青训营笔记创作活动——HTML ｜青训营在设计和编写 HTML 时，需要充分思考其结构和语义性。HTML 是构建网页的

1、基本结构。

//!+Enter  ctrl+\ 注释
<!DOCTYPE html> //表明按照什么超文本标记语言标准编写网页 一般是html5
<html lang="en"> //表明网页语言 一般浏览器会根据网页语言和浏览器语言版本进行翻译
<head>
  <meta charset="UTF-8"> //表明网页按照什么标准编码相应的浏览器按照什么标准解码
  <meta http-equiv="X-UA-Compatible" content="IE=edge">//移动端
  <meta name="viewport" content="width=device-width, initial-scale=1.0">//移动端
  <title>你的第一个网页</title> //网页标题
</head>
//窗口默认100%的width但是默认没有height其height是由内容撑开的
<body>
  <h1>Hello World！</h1>
</body>
</html>

2、常用标签。

标签	含义
<h1></h1> ……<h6></h6>	标题
<p></p>	段落
<br>	换行
<hr>	水平线
<strong></strong>	加粗强调
<em></em>	倾斜强调
<del></del>	删除
<u></u>	下划线
<sup></sup> <sub></sub>	上标下标
<div></div>	划分区域
<span></span>	文本独立修饰

3、特殊符号。

表示	含义
&lt &gt	左尖角号< 右尖角号>
&nbsp &emsp	空格（受字体影响）空格（占一个中文宽度且不受字体影响）
©	版权©
™ ®	商标™ 商标®
&#128513	表情（最后一位数可以更换）

4、标签属性。

<标签属性="属性值"……></标签>

属性	含义
style	style="属性:属性值;……"
color	颜色
width	宽度
height	高度
noshade	没有阴影
align/valign	文字水平对齐/文字垂直对齐

5、语法糖。

简写	含义
div{}*n	{}内表示内容 *n表示创建的标签个数
ul>li{}*n	ul与li是父子关系
dl>dt{}+dd{}*n	+表示dt和dd是同级关系 >表示dl和dt以及dd是父子关系
table>(tr>tdn)m	m个tr且每个tr中n个td
table>trm>tdn	m个tr且每个tr中n个td

6、三种列表。

有序列表

<ol type="1/a/A/i/I"（表示列表序号类型） start=""（表示列表序号起始）>
    <li></li>
    ……
</ol>

无序列表

<ul type="disc(实心圆)/circle(空心圆)/square(正方形)/none(什么都没有)">
    <li></li>
    ……
</ul>

自定义列表（用于图文并排）

<dl>
    <dt>图片</dt>
    <dd>文字</dd>
</dl>
……
<dl>
    <dt>图片</dt>
    <dd>文字</dd>
</dl>

注意：二级列表即ul中的li里再套ul。一般footer部分，多行多个li，如何设置宽和高呢？首先li的高是字体和间隙部分，其中间隙部分是使得字体垂直居中，其次li的宽是相邻的两个，左边各自量出padding，然后剩余部分就是右边。

7、图片相关。

<img src="图片路径" title="鼠标移入图片所显示的内容" alt="图片加载不出来所显示的内容" width="宽度" height="高度"/>

图片路径分为相对路径和绝对路径：

相对路径：推荐使用，相对路径使用的是http协议，./表示当前目录下，../表示上一级目录下，其中./可以省略；
绝对路径：不推荐使用，绝对路径使用的是file协议，可以在浏览器中打开，但是不可以在服务器中打开；

8、超链接。

<a href="新的链接" target="规定在哪里打开 _self(当前页面)/_blank(新的页面)" title="鼠标移动上去显示的文字"></a>

注意：锚点的作用是实现页面不同区域的跳转。

<a href="#锚点名字"></a>  //锚点名字指的是id名字

9、表格。

//注意添加属性时是添加在哪一个标签上table/tr/td
//如果一个单元格设置高度则这一行单元格的高度均被影响
//如果一个单元格设置宽度则这一列单元格的宽度均被影响

<table> //table表示表格
    <tr>  //tr表示行
        <td></td> //td表示单元格
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

//border 边界

//colspan合并列
//rowspan合并行

//cellspacing 单元格与单元格之间的距离
//cellpadding 单元格与内容之间的距离

10、表单。

<form method="get/post" action="向何处发送表单数据">
    <input/>
    A.属性type定义输入框的类型
        a.文本框type="text"
        b.密码框type="password"
        c.提交框type="submit"
        d.按钮框type="button"
        e.重置框type="reset"
    B.属性placeholder描述输入字段的简短提示信息
    C.属性name表示提交表单时的属性名
    D.属性value表示提交表单时的属性值
    //一般使用<label></label>标签将文字信息和<input/>标签绑定起来
</form>

在设计和编写 HTML 时，需要充分思考其结构和语义性。HTML 是构建网页的基础，应当合理使用标签和元素，以确保页面结构清晰、可读性高。同时，要考虑到网页的可访问性和可维护性。通过正确使用语义化的标签，可以帮助屏幕阅读器和搜索引擎理解网页内容，使页面适应不同的设备和浏览器。此外，为了提高可维护性，应该尽量减少重复代码，并使用 CSS 来控制样式。注重响应式设计，使页面在不同分辨率和设备上都能良好展示。还要对安全性保持警觉，防止跨站点脚本攻击。综上所述，对于 HTML 的思考应当考虑到结构、语义、可访问性、可维护性、响应式设计和安全性。只有在仔细思考和实践的基础上，才能编写出高质量的 HTML 代码，为用户提供优质的网页体验。

青训营笔记创作活动——HTML ｜ 青训营