html:超文本标记语言。用于定义文档的内容结构。(Hyper Text Markup Language)。
Hyper Text(超文本):不只包括文本,还包括图片。连接,音乐,视频等非文本元素。
Markup Language 标记语言 :是一套标记标签,html是使用标记标签来描述网页的。
html的注释:<!--注释内容-->
译:注释用于描述代码功能,浏览器解析代码会忽略注释内容
快捷键:ctrl+? 一下注释 二下撤销
html元素(标记,标签):
1.什么是html元素:html元素是html文档的重要组成部分,一个html文档由大量元素组成的html中的所有内容结构。都是靠元素组织到页面中。
例: <h3> </h3>
h3是起始标签(元素,标记)表示元素的开始 中间的空格之间是元素内容 /h3是结束标记(标签,标记)表示元素的结束
例: <a herf ="路径"> 百度 </a>
标记 属性名 属性值 元素内容 结束标记
(a 标记一个连接)
2.html 元素的组成部分
3.空元素:又叫自闭合元素
<img str =" " />
4 .元素的层次结构:一个元素的内容可以包含其他元素,形成嵌套的层次结构。但是2个元素之间不能嵌套。
例: <a> <h3></h3> </a> 对
例 :<p><strong></p><strong> 错
html文档结构:
1. 文档声明既不是元素,也不是注释,它总是出现在html代码的第一行。<! DocTYPE html >:用于通知浏览器,目前的文档正在使用那一个html的版本。若不是文档声明。浏览器渲染页面时会进入怪异模式。
2.html元素:又叫根元素,根标记,它是所有其他元素的祖先元素。文档中所有其他元素都必须放置在元素内容中。
相关属性:lang
该属性可能会影响到浏览器的语音阅读和翻译行为。
例:<html lang= "en"></html> 文档中使用英文来书写
例:<html lang= "zh-Cmn-Hans"></html> 文档中使用中文来书写
3 head 元素:又叫文档头,它是html元素的第一个子元素,文档头中可以包含一些其他元素,用于描述页面的附加信息。
litle 标题:标识文档标题,该标题会显示在浏览器的标题栏上货标签页上。
<meta>空元素,标识页面的其他元数据(页面相关的附加信息),只是一个空元素。
例: <meta charsef="utf-8">指浏览器,使用字符编码集utf-8解析页面。
head 元素中包含以下元素:<title><meta><style><link><script>
4.body元素:又叫文档体,网页中所有的可见内容都放在该元素中。
它包含了大量的其他元素,定义文档的内容结构。
绝对路径和相对路径:
引用css:
1.使用外部样式表:css代码在一个独立的文件中,html通过Link 元素引入到页面。
例:<link rel ="stylesheet" herf = " 导入路径">
link 空元素。表示引用外部资源。
2.使用内部样式表:将css代码写到html文档的style 元素内容中
使用内部样式表的特点:①没有样式表文件,在某些时候可以提升效率;
②多个页面难以共享样式,不利于代码复用。
③html和css代码混杂,不利于程序员和搜索引擎阅读。
3.使用行内样式表:又叫内嵌,css代码写在元素的style中属性,行内样式不写选择器。
使用行内样式表的特点:①没有了样式表文件,在某些时候可以提升效率。
head里面的子元素有:
搜属于元数据和脚本标签
<meta charset= "utf-8">
<title>哈哈</title>
<style type="text/css">
<link rel ="stylesheet" herf= "路径"></style>
<script> </script>
<noscript> </noscript>
<base herf=" "/> 来写出相应的命令
文本元素:
<a herf =" ww.baidu.com"> 百度</a>
</span>你好,世界!</span> 对长段文字当中一段文字进行改变
<b>你好,世界!</b> 不许用 加粗
<strong> 成都,你好!</strong> 有语意 加粗
斜体 <i> </i>
<em> </em>有着重效果,有语意,针对视力有问题的
缩写 <abbr title = "Hyper Text Markup Language"> HTML </addr> 显示的是HTML ,当鼠标刚在HTML上 全称Hyper Text Markup Language"就显示出来了。
时间 <time datetime = "2018-2-14">情人节</time >
属性 值
字体 <small> </small>不建议使用 它只缩小一号
sup/sub 上下标签 ,X <sup>2 </sup> 显示的是x 的平方;O<sub> 2 </sub> 显示的是氧气
引用:大段引用:<blockquote> </blockquote> 默认前面 有缩进 它不属于文本元素,是组合内容
定义引用:<cite> </cite> 写相应的代码
<mark> </mark>是一个标签。背景颜色自动为黄色
组合内容:
换行<br> 不能使用-
横线 <p> <hr> </p> 不能用 分割上下
区域 区块之前的html用来进行布局:
<div>
</div>
预编译<pre> </pre>代码中怎么写的怎么显示出来。用到的很少
大段引用:<blockquote> </blockquote> 默认前面 有缩进
src 属性表示引用内部资源
<img src = "alt" ="logo"> 当图片无法显示出来"logo"
herf 属性表示访问或获取外部资源 ;<link herf =" ">外部样式
<a herf =" "> 跳转
图片描述
<figure>
<img src = “ ” alt ="logo">
<figcapiton> 蜡笔小新 </figcapiton>
<figure>
<head>
<meta name ="keyword" content="蜡笔小新,小白,美伢.."/> 关键字/关键词
<meta name ="discription" content="它是一部日本动漫,讲述了..."
</head>
列表:
有序列表
<ol>
<li> </li>
<li> </li>
</ol>
快捷键 ol>li*n tab键
无序列表
<ul>
<li> </li>
<li> </li>
</ul>
快捷键 ul>li*n tab键
定义列表
<dl>
<dt> 前端工程师</dt>
<dd> 需要具备</dd>
<dl>
表格元素:
<table border = "2"> 译2px 边框
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
快捷键: tr*行数>td*列数
td clospan = "几个单元格" column代表列 横向合并为列
td rowspan = "几个单元格" row 代表行 纵向合并为行
*表单元素 <form action = " #" method=" get/post"
输入框:
<input type ="text"/>
<input type ="password"/>
<input type ="submit" value=" "/> 提交按钮,具有提交功能,浏览器可以识别
<input type ="button" value=" "/>普通按钮
<input type =" reset"/> 重置按钮
<input type =" number"min=" " max=" " step=" " value=" "/> ( max 最大值step间距/步数 value初始值 min最小值)
<input type ="text" required maxlength= " "/> 必填项 输入框的长度
<input type =" date"/> 添加日理插件
<input type =" color" name =" color"/> 你喜欢的颜色
select 下来菜单(列表):
ctr+d复制当前这行
<select name = " city" id=" ">
<option value =" cd" >成都 </option>
<option value =" my" >绵阳 </option>
<option value =" gy" >广元 </option>
......
</select >
单选框:
<input type =" radio" name= " aihao"value="paobu"/>跑步
<input type =" radio" name= " aihao"value="lvyou"/>旅游
<input type =" radio" name= " aihao"value="kanshu"/>看书
<input type =" radio" name= " aihao"value="huahua0"/>画画
多行文本框:
<input type =" checkbox" name= " aihao"value="paobu"/>跑步
<input type =" checkbox" name= " aihao"value="lvyou"/>旅游
<input type =" checkbox" name= " aihao"value="kanshu"/>看书
<input type =" checkbox" name= " aihao"value="huahua0"/>画画
提示快捷信息选择:
<input type ="text" list =" city"
<datalist id = "city">
<option value ="CD">成都 </option>
<option value ="SN">遂宁 </option>
.........
</datalist>
语义化结构元素:
header 用于表示页面或某个区域头部
nav 用于表示导航栏
aside 用于表示周围主题相关胡附加信息
article 用于表示文章或其他可独立页面胡内容
section 用于表示一个整体胡一部分主题
footer 用于表示页面或某个区域胡脚注
嵌入式元素:<img src = " ..." alt ="logo">
音频/视频元素:
<audio src = " 路径" controls autoplay loop></audio> 音频播放
<video src = " 路径" controls autoplay loop> </video> 音频播放
controls 为属性,值也是 controls ,所以这里写一个 controls 就可以了
autoplay 自动播放,不用点开始
loop 循环播放
交互元素:
<datails>
<summary>
</summary>
<p>
</p>
</datails>