字符集

1
2
3
4
5
6
7
utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312;
gb2312简单中文,包括6763个汉字;
BIG5繁体中文,港澳台等用;
GBK包含全部中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312;
UTF-8则包含全世界所有国家需要用到的字符;

记住一点:以后我们统统使用UTF-8字符集,这样就避免出现字符集不统一而引起乱码的情况了。

HTML文档结构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
  • <!DOCTYPE html> 声明文档类型,HTML5标准写法。
  • <html> 根标签,lang属性指定语言。
  • <head> 头部标签,包含元数据。
  • <meta charset="UTF-8"> 指定字符集。
  • <title> 网页标题。
  • <body> 页面主体内容。

注释

1
<!-- 这是注释内容 -->

标题标签

1
2
3
4
5
6
单词缩写:head 头部、标题
为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即:
h1 h2 h3 h4 h5 h6
标题标签语义:作为标题使用,并且依据重要性递减!

注意:h1标签因为重要,尽量少用,一般h1都是给logo使用。

段落标签

1
2
3
4
5
单词缩写:paragraph 段落
在网页中要把文字有条理的显示出来,离不开段落标签,就如同写文章需要首行缩进、需要分段一样,整个网页也可以分为若干个段落。
段落标签:
<p>文本内容</p>
是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签

1
hello!<hr>张三
  • <hr> 用于插入水平分隔线。

换行标签

1
<br>
  • 强制换行,不能单独换段。

div、span标签

1
2
3
div span是没有语义的,是我们网页布局主要的两个盒子;
div就是分割、分区的意思,其实有很多div来组合网页;
span跨度、跨距、范围。
  • <div> 块级元素,常用于布局。
  • <span> 行内元素,常用于包裹文本。

文本格式化标签

1
2
3
4
5
在网页中有时需要为文字设置粗体、斜体或者下划线效果,这时候就需要用到HTML中的文本格式化标记,使文字以特殊的方式显示。
粗体:<strong>、<b>(b已废弃,不建议使用)
斜体:<em>、<i>(i已废弃,不建议使用)
删除线:<del>、<s>(s已废弃,不建议使用)
下划线:<ins>、<u>(u已废弃,不建议使用)
  • 推荐使用<strong><em>,语义更明确。

特殊字符与实体

1
&lt;  &gt;  &amp;  &quot;  &copy;  &nbsp;
  • <&lt;>&gt;&&amp;"&quot;
  • 空格:&nbsp;,版权:&copy;

超链接标签

1
<a href="https://example.com" target="_blank">点击访问</a>
  • href:目标地址
  • target="_blank":新窗口打开

图像标签

1
2
3
图像标签:img
该语法中src属性用于指定图像文件的路径和文件名,它是img标签的必要属性。
<img src="图像URL" alt="描述">
  • alt属性用于图片无法显示时的替代文本。

列表标签

1
2
3
4
5
6
7
8
9
10
<ul>
<li>无序列表项</li>
</ul>
<ol>
<li>有序列表项</li>
</ol>
<dl>
<dt>定义标题</dt>
<dd>定义内容</dd>
</dl>

表格标签

1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>

表单标签

1
2
3
4
5
<form action="/submit" method="post">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="submit" value="提交">
</form>

手册文档

未完,持续补充中…