HTML精华总结大全

<html>
    <head>
        <title>这是第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

id属性

<body id = "hello">hello world</body>

表示标签的唯一身份标识，用于后期便于控制，不影响显示

鲁棒性强

HTML的语法要求相对来说更宽松，一些简单错误的代码，浏览器也能正常运行，即容错能力强

自动生成框架

!<tab>自动生成框架

<!DOCTYPE html>		<!-- 文档类型定义，有没有问题不大 -->
<html lang="en">	<!-- language，en表示英文，方便浏览器启动翻译功能 -->
<head>
    <meta charset="UTF-8">		<!-- 通过meta标签指定页面属性，charset表示字符集 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>		<!-- 标题 -->
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

基本标签

注释

<!-- 注释内容 -->

标题：h1 ~ h6

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落：p

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

换行：br（单标签）

这里需要换行→  <br/>换行成功

格式化：b i s u

加粗：strong 标签和 b 标签
倾斜：em 标签和 i 标签
删除线：del 标签和 s 标签
下划线：ins 标签和 u 标签

<strong>加粗</strong>
<b>加粗</b>

<em>倾斜</em>
<i>倾斜</i>

<del>删除线</del>
<s>删除线</s>

<ins>下划线</ins>
<u>下划线</u>

图片：img（单标签）

<img src="xxx.jpg"
     alt="加载失败时替换文字"
     title="鼠标悬停时提示文字"
     width="1920px" height="1080px"
     border="5px">

超链接：a

<!-- 外部链接 -->
<a href="https://github.com">这是一个超链接</a>

<!-- 内部链接，相对路径 -->
<a href="xxx.html">内部跳转链接</a>

<!-- 空链接 -->
<a href="#">空链接</a>

<!-- 定位链接，利用id定位 -->
<a href="#one">第一集</a>
<a href="#two">第二集</a>

<p id="one">
   第一集剧情 <br>
</p>
<p id="two">
   第二集剧情 <br>
</p>

表格标签：table

table：表示整个表格（width height border cellspacing等）
tr：表示表格的一行
td：表示一个单元格
th：表示表头单元格. 会居中加粗
thead：表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody：表格得到主体区域

<table width="200px" height="100px" border="1px" cellspacing="0">
    <tr>
        <th>姓名</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>

    <tr>
        <td>张三</td>
        <td>男</td>
        <td>20</td>
    </tr>
</table>

列表标签：list

无序列表、有序列表、自定义列表

<h3>无序列表</h3>
<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ul>
<h3>有序列表</h3>
<ol>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ol>
<h3>自定义列表</h3>
<dl>
    <!-- 缩进自定义列表 -->
    <dt>列表标题</dt>
    <dd>第一个</dd>
    <dd>第二个</dd>
</dl>

⭐表单标签

form标签

常用于交互时使用

input标签

    <!-- 文本框 -->
    <input type="text">

    <!-- 密码框 -->
    <input type="password">

    <!-- 单选框，相同name实现，checked默认-->
    <input type="radio" name="sex">男
    <input type="radio" name="sex" checked=""checked>女

    <!-- 复选框 -->
    <input type="checkbox">吃饭
    <input type="checkbox">睡觉
    <input type="checkbox">打豆豆

    <!-- 普通按钮 -->
    <input type="button" value="一个按钮" onclick="alert('弹窗提示')">

    <!-- 选择文件 -->
    <input type="file">

label标签

<input type="text" id="labeltest">
<label for="labeltest">label for实现绑定</label>

select标签：下拉菜单

<select>
<option>--请选择年份--</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>

textarea标签：多行编辑框

<textarea rows="3" cols="50">这是一个多行文本</textarea>

无语义标签

div独占一行，span不独占一行

<div>
<span>第一句</span>
<span>第二句</span>
<span>第三句</span>
</div>

<div>
<span>第一句</span>
<span>第二句</span>
<span>第三句</span>
</div>