返回首页

HTML5学习笔记 | HTML5 + CSS3学习

日期图标编写于2025年06月10日   修订于2025年06月28日

正文

H5文件结构

<!DOCTYPE html> 声明标签，非html标签，说明当前页面采用HTML5版本来显示网页。这句代码的位置一定要写到整个页面的第一行。

<html lang="zh-CN"> 声明网站语言。

<meta charset="UTF-8"> 声明采用UTF-8编码，UTF-8是万国码，几乎包含全世界所有国家的全部字符。

常用标签

<h1></h1> - <h6></h6> 标题标签，独占一行。

<p></p> 段落标签。

<br/> 换行标签，单标签，简单的开始新的一行，不会像p标签一样插入一段垂直间距。

文本格式化标签：<strong></strong>或<b></b> 加粗字体，<em></em>或<i></i> 倾斜，<del></del>或<s></s> 删除线，<ins></ins>或<u></u> 下划线。

<div></div>和<span></span> 标签是没有语义的，只是用来装内容的盒子标签，不同div之间各div内容独占一行，不同span的内容不换行，在一行显示。

<img/> 图像标签，单标签，<img src="图像url" />，src是必要属性，用于指定图像的文件路径。可选属性：alt——图片说明文本，图片不能正常显示时，显示alt文本，title——提示文本，鼠标放到图像上显示的文字，width——图像宽度，height——图像高度，border——边框样式。

<a href="跳转目标" target="目标跳转方式">超链接内容</a> 超链接标签，href属性是必须的，target的默认值为_self，当前页面打开，_blank为新窗口打开页面。空链接的写法：href="#"。

锚点链接：可以快速定位当前页面中的某个内容的位置。

<a href="#one">第1集</a>
<h1 id="one">第1集</h1>

HTML中的特殊字符转义

 < 小于号 &lt;
 > 大于号 &gt;
 & 和号 &amp;
 " 双引号 &quot;
 ' 单引号 &#39; 或 &apos;
 空格 空格 &nbsp;

表格

<table> <!-- 表格标签 -->
    <tr> <!-- 行 -->
        <th></th> <!-- 表头标签 -->
        <td><td> <!-- 单元格 -->
    </tr>
</table>

表格有一些样式属性，不过实际开发中并不常用，统一用css来设置样式。

表格结构标签：<thead></thead> 表格头部标签，定义表格的头部区域，<tbody></tbody> 定义表格的主体。

合并单元格：合并行——colspan="2"，合并列——rowspan="2"。

列表标签分为无序列表、有序列表和自定义列表，无序列表：<ul><li></li>...<li></li></ul>，ul标签中只能嵌套li标签，li标签内可以放任意标签。有序列表：<ol><li></li>...<li></li></ol>。自定义列表：<dl>标签中只能出现<dt>、<dd>。

<dl>
    <dt>关于小米</dt>
    <dd>了解小米</dd>
    <dd>加入小米<dd>
    <dt>关于小米</dt>
    <dd>了解小米</dd>
    <dd>加入小米<dd>
</dl>

完整的表单包含表单域、表单控件（表单元素）、提示信息三部分组成。

表单域

<form action="url地址"> method="提交方式" name="表单域名称"
    各种表单元素控件
</form>

action：用于指定接受并处理表单数据的服务器url地址。

method：取值为get或post。

name：表单名称，区分页面中的多个表单域。

表单控件

input：输入表单元素。<input type="属性值（属性值有很多，如button、text、checkbox、submit【提交按钮，将表单域中所有的元素值提交给后台】、reset【还原表单域所有表单初始值】等）" name="input元素名称" value="input元素值" checked="checked"（选中，单选控件只能写一个） maxlength="文本最大输入长度" />

select：下拉表单元素。

<select>
    <option>选项1</option>
    ...
    <option>选项n</option>
</select>

某一个option定义selected="selected"时，为默认选中项。

textarea：文本域元素，多行文本控件。

<label>标签，标注标签，为input元素定义标注。

<label for="sex">男</label>
<input type="radio" id="sex" />

参考

b站视频《黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程》。