HTML 知识扫盲

深藏阁楼爱情的钟 2024-03-17 13:38 43阅读 0赞

## 写在前面 ##

HTML 是一门超文本标记语言，不管你听没听说过 HTML，但在网上冲浪的途中你无时不刻都在与它接触，他遍布在每个你看得到的互联网的角落。其实对于笔者而言，我已经断断续续地学习过这门语言，经过时间的磋磨，所剩知识也是寥寥无几，这次借此机会复盘并总结一下 HTML，当然在这里我不会将 HTML 语言的细节全盘拖出，只是总结笔者认为的重点，与诸君共勉。最后再补充一句，知识的广度使你我力所不能及，但是我们身处当下的互联网盛世，适应时代改变学习思维，已成必然。

（本篇文章不刨根问底，且概概而谈）

## 常见标签 ##

标签是HTML中的一个重要概念，但是html标签很多，对于不专注于前端开发的来说，记得下面一些常见标签即可，如遇场景需要使用其他陌生标签，再去查阅文档即可，这里推荐 [菜鸟教程][Link 1]：

换行单标签
    <br/>

格式化标签
    <strong>加粗标签</strong>
    <b>b 加粗标签</b>
    
    <em>倾斜标签</em>
    <i>倾斜标签</i>
    
    <del>删除线标签</del>
    <s>删除线标签</s>
    
    <ins>下划线标签</ins>
    <u>下划线标签</u>

图片标签
    <img src="图片地址" alt="替换文本" title="提示文本" width="图片宽度" height="图片高度" border="边框">

超链接标签
    1.添加链接
    <a href="http://www.baidu.com">百度</a>
    2.添加锚点（点击跳转）
    <a href="#one">第一集</a>
    	.
    	.
    	.
    <p id="one">
       第一集剧情 <br/>
       第一集剧情 <br/>
       ...
    </p>

列表标签
    <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>
        <dd>敲代码</dd>
    </dl>

## 特殊字符 ##

对于html中的特殊字符，是一些在HTML中具有特殊含义或被保留的字符。这些字符在HTML中具有特殊用途，如果直接在HTML文档中使用它们，可能会导致解析错误或被错误地解释。想要正确地在HTML文档中显示必须使用特定的语法格式，下面列出几种常见的特殊字符及对应的语法格式，端末附有完整对照表：

> `<`：小于号（用于起始标签）。对应实体字符：`<`  
> `>`：大于号（用于结束标签）。对应实体字符：`>`  
> `&`：和号（用于表示特殊字符的开始）。对应实体字符：`&`  
> `"`：双引号（用于属性值的引号）。对应实体字符：`"`  
> `'`：单引号（用于属性值的引号）。对应实体字符：`'`  
> ``：空格。对应实体字符：` `  
> `©`：版权符号。对应实体字符：`©`

[HTML特殊字符编码对照表][HTML]

## 表格标签 ##

表格是HTML中一个很重要的组件，实际操作中也经常遇得到，下面就以一个“成绩表”的例子详细地说一说：

<table border="1px" cellspacing="0" align="center" width="350px" height="200px">
    			<tr>
    				<th colspan="2">成绩</th>
    			</tr>
    			<tr align="center">
    				<td rowspan="2">语文</td>
    				<td>100</td>
    			</tr>
    			<tr align="center">
    				<td>95</td>
    			</tr>
    		</table>

呈现效果：  
![8c8d7604ad0b45988245232ed2a0f4ee.png][]

注释：

> 1.  首先使用表格，必须要先写出`<table></table>`标签。
> 2.  table 标签中的：`align` 是表格相对于周围元素的对齐方式，`border` 表示边框，`cellpadding`内容距离边框的距离，`cellspacing`单元格之间的距离，width / height: 设置尺寸。
> 3.  其中`tr`表示表格的一行，`th`表示表头单元格（内部文字会加粗居中），`td`表示普通单元格
> 4.  `tr`必须嵌套到`table`标签中，`th、td`必须嵌套到`tr`标签中
> 5.  `rowspan="n"` 表示跨行合并，`colspan="n"`表示跨列合并

## 表单标签 ##

表单标签经常用在用户输入的各种场景下，下面同样以一个例子进行详细介绍：

<form action="#" method="post">
    	<table>
    		<tr>
    			<td>用户名:</td>
    			<td colspan="3"><input type="text" name="username" placeholder="用户名"/></td>
    		</tr>
    		<tr>
    			<td>密码:</td>
    			<td colspan="3"><input type="password" name="userpassword" placeholder="密码"/> </td>
    		</tr>
    		<tr>
    			<td>性别:</td>
    			<td ><input type="radio" name="sex" value="男" />男</td>
    			<td><input type="radio" name="sex" value="女" />女</td>
    		</tr>
    		<tr>
    			<td>兴趣:</td>
    			<td><input type="checkbox" name="interest" value="编程"/>编程</td>
    			<td><input type="checkbox" name="interest" value="书法"/>书法</td>
    			<td><input type="checkbox" name="interest" value="音乐" checked/>音乐</td>
    		</tr>
    		<tr>
    			<td>协议:</td>
    			<td colspan="3">
    				<textarea rows="5" cols="50" name="messege" placeholder="请在这里键入附注"></textarea>
    			</td>
    		</tr>
    		<tr>
    			<td>老家:</td>
    			<td colspan="3">
    				<select name="location">
    					<option value ="北京">北京</option>
    					<option value ="河南" selected>河南</option>
    					<option value ="广东">广东</option>
    				</select>
    			</td>
    		</tr>
    		<tr>
    			<td>生日:</td>
    			<td colspan="3"><input name="birthday" type="date"/></td>
    		</tr>
    		<tr>
    			<td >体重:</td>
    			<td colspan="3"><input name="weight" type="number" min = "30" max="150" placeholder="30~150"></td>
    		</tr>
    		<tr>
    			<td>上传附件:</td>
    			<td colspan="3"><input type="file" id="fileUpload" name="fileUpload"></td>
    		</tr>
    		<tr>
    			<td><input type="submit" name="注册" value="注册"></td>
    			<td colspan="3"><input type="reset" name="重置" value = "重置"></td>
    		</tr>
    	</table>
    </form>

呈现效果：  
![b379cdb3733e4ecd9cfba20a2556eec5.png][]  
注释：

> 1.  各种输入控件必须放到`<form></form>`标签中才有实际效果。
> 2.  input 标签表示各种输入控件，其中 `type`属性(必须有)，取值种类很多, `checkbox`(多选框), `text`(文本框), file(上传文件),`password`(密码框), `radio`(单选框)  
>     ,`data`(日期),`number`(数字域)等。
> 3.  其中`type`还提供了三种按钮，分别是`button`(普通按钮)、`submit`(提交按钮)、`reset`(清空按钮)。
> 4.  `placeholder` 是一个用于在表单字段中显示提示性文本的属性。
> 5.  `name`表示给 `input` 起了个名字，尤其是对于 `radio` 单选按钮, 具有相同的 `name` 才能多选一。
> 6.  `value`属性`input` 中的默认值，一般`text`文本框和`password`密码框，不设置`value`值。
> 7.  `checked`默认被选中。(用于单选按钮和多选按钮)
> 8.  select 标签表示下拉框，`<option></option>`内填写下拉内容，`option` 中定义 `selected` 表示默认选中。
> 9.  textarea 标签表示文本域。
> 10. 一般表单为了对齐美观，通常嵌套进表格标签`<table></table>`中使用 。

## 无语义标签 ##

在实际开发中我们通常会使用到两种无语义标签`<div></div>`和`<span></span>`。虽然无语义，但它们提供了一种有效的方式将内容与样式和布局分离，同时增强了代码的可读性、灵活性和可扩展性。

`<div></div>`和`<span></span>`就是两个盒子，用于网页布局，其中：

> 1.  `div` 是独占一行的, 是一个大盒子。
> 2.  `span` 不独占一行, 是一个小盒子。

[Link 1]: https://www.runoob.com/html/html-tutorial.html
[HTML]: https://www.jb51.net/onlineread/htmlchar.htm
[8c8d7604ad0b45988245232ed2a0f4ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c57c6605840d4b0dbd7dc0abf6fc805c.png
[b379cdb3733e4ecd9cfba20a2556eec5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/63060c8534ce48e19b804c12b6537a7c.png