这是我参与「第四届青训营」笔记创作活动的的第1天

HTML入门

W3C标准：网页由三部分组成

结构：HTML

表现：CSS

行为：JavaScript

flowchart LR


subgraph W3C标准
    A[JavaScirpt 行为]
    B[CSS 样式]
    C[HTML 内容]
end

subgraph 服务器端
    
end

 W3C标准  -- 网络协议 --> 服务器端

 服务器端 -- 网络协议 --> W3C标准

DOM树

什么是DOM树？

DOM（Document Object Model）即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。

graph LR
subgraph DOM树
文档 --- HTML

HTML --- head[<head>]

HTML --- body[<body>]

head --- meta

head --- title

body --- h1[<h1>]

body --- p[<p>] 
end

HTML

一、什么是HTML

超文本标记语言

超文本：超越纯文本的限制，比普通文本更强大。可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言

HTML参考

W3SCHOOL-HTML教程

HTML语法

语法松散
不区分大小写 (推荐小写）
标签属性值单双引号皆可 (属性值推荐双引号)

二、基础标签

标签	描述
<h1> ~<h6>	定义标题，h1最大，h6最小
<font>	定义文本字体、大小、颜色（但是官方不推荐使用改标签，以后用CSS来控制文本样式）
<b>	加粗字体
<i>	斜体
<u>	下划线
<center>	居中(官方也不推荐使用改标签，原因同font)
<p>	定义段落
<br>	拆行
<hr>	水平线

三、图片、音频、视频标签

标签	描述
<img>	图片
<audio>	音频
<video>	视频

尺寸单位

px：像素
百分比

四、超链接标签

标签	描述
<a>	定义超链接

href：指定访问资源的URL
target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开

<a href="https://juejin.cn/" target="_blank">掘金官网</a>

五、列表标签

标签	描述
<ol>	有序列表
<ul>	无序列表
<li>	列表项

type

设置项目符号

但是官方不建议使用该符号，建议使用css样式取代

六、表格标签

标签	描述
<table>	定义表格
<tr>	行
<td>	单元格
<th>	表头单元格

table

border：表格边框的宽度
width：表格的宽度
cellspacing：规定单元格之间的空白

tr

align：表格行的内容对齐方式

td

rowspan：单元格可横跨的行数
colspan：单元格可横跨的列数

上数两个属性即合并单元格

应用：绘制一个学生成绩表

<body>
学生成绩表
<table width="500" border="1" cellspacing="0">
    <tr align="center">
        <th>id</th>
        <th>name</th>
        <th>score</th>
    </tr>

    <tr align="center">
        <td>01</td>
        <td>wcb</td>
        <td>95</td>
    </tr>

    <tr align="center">
        <td>02</td>
        <td>zhangsan</td>
        <td>90</td>
    </tr>

    <tr align="center">
        <td>03</td>
        <td>lisi</td>
        <td>85</td>
    </tr>


</table>


</body>

总结

HTML的标签和属性繁多，应当多去应用、了解并熟悉他们，开发者应当遵循语义来编写HTML。

HTML传达内容，而不是样式

HTML入门｜ 青训营笔记