HTML语法

1. DOCTYPE以及lang

• 描述：
  • <!DOCTYPE>：是文档类型声明标签，告诉浏览器使用HTML5来渲染。
  • lang：一般使用en或者zh-CN，告诉搜索引擎，采用什么语言展示。

2. head标签

2.1 设置字符集

• 样式：<meta charset=＂UTF-8＂>

3. body标签

3.1 标题标签

• 描述：h1-h6，一共六个级别
• 样式：<h1></h1>
• 注意：
  • 标题独占一行。
  • 字号大小逐渐减小。

3.2 段落标签

• 样式：<p></p>
• 注意：
  • 段落之间存在空隙，每个段落内会根据浏览器大小自动换行。

3.3 换行标签

• 描述：单标签，仅仅用来换行。
• 样式：<br />

3.4 文本格式化标签

用来突出文字重要性。

3.5 div和span标签

两个标签代表盒子，没有其他含义。
div一个就代表一行，相当于大盒子;span几个可以放置在一行里面，相当于小盒子。

3.6 图像标签

<img src=＂＂/>

• src表示图片路径未知

• alt表示图片无法显示时的文字

• title鼠标放在图片上时显示的文字

• width，height:一般修改一个属性，剩下一个会自动变化。

• border表示图片边框

• align 属性用于设置图像显示的位置。

  • left：水平方向居左
  • right：水平方向居右
  • top：垂直方向居上
  • bottom：垂直方向居下
  • middle：居中

3.7 超链接标签

<a href=＂＂>

• href指定链接目标的URL地址
  • 用#表示空链接
  • 若链接后缀是zip，点击则会下载
• target用于指定链接页面打开方式
  • _blank在新窗口打开
  • _self：在当前窗口打开链接
• 锚点链接:设置href#名字，名字为跳转位置的id值

3.8 注释标签

<!--注释-->

3.9 特殊字符

3.10 表格标签

常用标签

• table
• tr表示一行
• th用于设置表格每一列的题目，会居中显示
• td用于显示数据
• thead表示头部部分
• tbody表示数据部分

表格的属性:

合并单元格

• 跨行单元格rowspan
• 跨列单元格colspan
• 目标单元格:跨行则是上方的是目标单元格;跨列则是左边的是目标单元格

确定跨行还是跨列，然后将属性写入到目标单元格，删除多余的单元格。

3.11 列表标签

主要用来布局

无序列表(重要)

ul标签只能放置li，li则没有限制。

• ul
• li

有序列表

ol标签只能放置li，li则没有限制。

• ol
• li

自定义列表(重要)

常用于页面底部的描述，一个名词下面有几个小名词。例如官网下的服务支持，下面有售后政策，自助服务等。

• dl表示外边的标签
• dt表示名词
• dd表示名词解释1

3.12 表单标签

用于收集元素数据。

常用属性

• action表示url地址
• method用来指定get或者post
• name用来指定表单的名称，以区分一个页面的多个表单域

input标签

• type
  • button定义可点击按钮
  • checkbox定义复选框，同一组name属性必须一致
  • file定义输入字段和浏览按钮，供文件上传
  • hidden定义隐藏的输入字段
  • image定义图像形式的按钮
  • password定义密码字段
  • radio定义单选框，同一组name属性一致
  • reset定义重置按钮
  • submit定义提交按钮，提交表单数据
  • text定义单行的输入字段，默认宽度20字符
• name
• value
• checked默认选中
• maxlength规定最大输入字符，一般较少使用

lable标签

用于绑定标签，来实现自动获取焦点，通过lable的for属性，指向绑定标签的id。

select下拉标签

• select
• option
• 定义selected=selected表示默认选中

textarea标签

文本内容较多，可以使用该标签，例如评论，留言。首尾标签写在一行（否则会出现小问题）。

• textarea
• cols
• rows

4. HTML5新特性

4.1 新增语义化标签

• <header>：头部标签
• <nav>：导航标签
• <article>：内容标签
• <section>：定义文档某个区域
• <asider>：侧边栏标签
• <footer>：尾部标签

4.2 新增多媒体标签

视频标签

• <video>
• 所有浏览器支持 mp4 格式。

音频标签

• <audio>
• 所有浏览器支持 mp3 格式。

4.3 新增 input 类型

• type="email"
• type="url"
• type="date"
• type="time"
• type="month"
• type="week"
• type="number"
• type="tel"
• type="search"
• type="color"

4.4 新增的表单属性

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {
    color: pink;
}