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 文本格式化标签

用来突出文字重要性。

语义	标签	说明
加粗	<strong></strong>或者<b></b>	推荐<strong>
倾斜	<em></em>或者<i></i>	推荐<em>
删除线	<del></del>或者<s></s>	推荐<del>
下划线	<ins></ins>或者<u></u>	推荐<ins>

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表示数据部分

表格的属性:

属性名	属性值	描述
align	left，right，center	对齐方式
border	1或＂＂	是否有边框，默认没有
cellpadding	像素值	单元边沿与内容之间的空白
cellpacing	像素值	单元格之间的空白
width	像素值或百分比	表格宽度

合并单元格

• 跨行单元格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 格式。

属性	描述
autoplay="autoplay"
controls="controls"	显示控件
width	设置宽度
height	设置高度
loop=loop	设置循环播放
preload="auto/none"	是否预加载
src=url	视频地址
poster=url	封面图片
muted=muted	静音播放

音频标签

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

属性	描述
controls	显示控件
autoplay	（谷歌禁用）
loop=loop	设置循环播放

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 新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项默认已经打开,如autocomplete="on",关闭autocomplete ="off" 需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件

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

input::placeholder {
    color: pink;
}