HTML学习笔记

HTML，即：超文本标记语言（Hyper Text Markup Language）。
HTML文档，后缀名为：.htm 或 .html
HTML标签，由尖括号包围的关键词，通常是成对出现的，比如 <html></html>、<p></p> 等。（标签对中的第一个标签是开始标签，第二个标签是结束标签。）

一、HTML文档结构

以下为HTML文档的结构：

<!DOCTYPE html>
<html lang="en">    //告诉搜索引擎爬虫：这是一个关于“英文”内容的网站
<head>
    <meta charset="UTF-8">  //定义网页所采用的的编码字符集为：UTF-8（Unicode的一种）
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
</head>
<body>
    
</body>
</html>

二、常用简单标签

以下是一些在日常开发中常用的相对简单的HTML标签

根标签：<html></html>
结构化标签：<head></head>、<body></body> head标签里存放的是：思想类的东西，如定义编码字符集等。 body标签里存放的是：展现给用户看的东西。
段落标签：<p></p>
标题标签：<h1></h1> …… <h6></h6> h1到h6标签的字体大小依次减小 功能：独成一段、更改字体的大小、加粗字体
加粗：<strong></strong> 斜体：<em></em> 单删除线：<del></del> 地址标签：<address></address> （成段展示，斜体） 回车标签：<br> 水平线标签：<hr>
可以当容器使用的标签：<div></div>、<span></span>
注意：空格在html文档中的的含义是：文本分隔符（和空格文本不同）。如下是常见的 3 种HTML编码： ① 空格文本：  ② “<”符号（less than）：< ③ “>”符号（great than）：>

三、常用复杂标签

以下是一些在日常开发中常用的相对复杂的HTML标签

ol 有序列表：
```
<ol type="1" start="2" reversed="reversed">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li> ... </li>
</ol>
```
在以上代码中的<ol></ol>标签的属性及属性值如下， ① type属性，属性值有：1、a、A、i、I（共5种，用以表示有序列表中使用的标记类型） ② start属性，属性值有：1、2、3、...（共无数种，用以表示有序列表的起始值） ③ reversed属性，属性值有：reversed（共1种，用以使列表倒序排序）
ul 无序列表： （相较于有序列表很重要，常用于书写导航栏结构）
```
<ul type="disc">
   <li>第一项</li>
   <li>第二项</li>
   <li>第三项</li>
   <li> ... </li>
</ul>
```
在以上代码中的<ul></ul>标签的属性及属性值如下， ★ type属性，属性值有：disc（实心圆）、square（方块）、circle（空心圆）。
img 标签： （插入图像）
```
<img src="imgs/123.jpg" alt="图像的替代文本" title="图像提示符">
```
在以上代码中的<img>标签的属性及属性值如下， ① src 属性，属性值有：URL网址、本地的相对地址、本地的绝对地址（共3种，用以表示图片资源的位置） ② alt 属性，属性值有：自定义的字符串（图像的替代文本） ③ title 属性，属性值有：自定义的字符串（图像提示符，当鼠标置于图像上方时会显示的提示性文本）

a 标签： （插入超链接） <a href="http://www.baidu.com" target="_blank">点击一下</a> 在以上代码中的<a></a>标签的属性及属性值如下：

① href 属性，功能为：超链接、锚点、打电话或发邮件、协议限定符。具体用法如下

<!-- 插入超链接 -->
<a href="http://www.baidu.com">超链接</a>

<!-- 插入锚点 -->
<h1 id="head1">标题一</h1>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<h1 id="head2">标题二</h1>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<h1 id="head3">标题三</h1>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<a href="#head1">定位到标题一的位置</a>
<a href="#head2">定位到标题一的位置</a>
<a href="#head3">定位到标题一的位置</a>

<!-- 打电话、发邮件 -->
<a href="tel:12345678912">打电话</a>
<a href="mailto:132456@qq.com">发邮件</a>

<!-- 协议限定符 -->
<a href="javascript:while(1){alert('让你手欠！')}">触发一个死循环的弹框（伪黑客功能）</a>

②target 属性，功能为：规定在何处打开链接文档。属性值有：blank、 self 等。

form 标签： （插入表单及表单控件）

<!-- 表单标签 -->
<form method="get" action="action_page.php">
    <!-- 1.输入框 -->
    用户名：<input type="text" name="username">

    <!-- 2.密码框 -->
    密码：<input type="password" name="password">

    <!-- 3.单选框 -->
    <h1>你最想去哪里旅游？</h1>
    <input type="radio" name="scenery" value="jinli">成都锦里
    <input type="radio" name="scenery" value="lijiang">丽江古城
    <input type="radio" name="scenery" value="daocheng">稻城亚丁

    <!-- 4.复选框 -->
    <h1>你的爱好是什么？</h1>
    <input type="checkbox" name="hobbies" value="reading">看书
    <input type="checkbox" name="hobbies" value="running">跑步
    <input type="checkbox" name="hobbies" value="muusic">听音乐

    <!-- 5.下拉列表 -->
    <!-- name属性,在select标签中设置 -->
    <!-- value值默认为option标签之间的值，如此处的Beijing。但如果在option标签中重新设置value值，则以新设置的value值为准。 -->
    <h1>你的家乡在哪？</h1>
    <select name="hometown">
        <option value="BEIJING">Beijing</option>
        <option>Shanghai</option>
        <option>Chengdu</option>
    </select>

    <!-- 6.重置按钮 -->
    <input type="reset">

    <!-- 7.提交按钮 -->
    <input type="submit">
</form>

在以上代码中需注意以下几点：

<form></form>标签中，method 属性表示发送数据的方式，属性值有：get 和 post。
- 何时使用 get
  - 如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
  - 当您使用 GET 时，表单数据在页面地址栏中是可见的。
  - GET 最适合少量数据的提交。浏览器会设定容量限制。
- 何时使用 post
  - 如果表单正在更新数据，或者包含敏感信息（例如密码）。
  - POST 的安全性更强，因为在页面地址栏中被提交的数据是不可见的。
  - action 属性表示将数据发送给谁，如果省略action属性，则action会被设置为当前页面。
各个表单控件标签，必须定义name属性及属性值，这样才能提交成功。
单选框标签、复选框标签中的name属性值必须统一；并且都需要设置value属性值，方便提交数据。
详见以上代码块！！！

四、当今主流浏览器

主流浏览器	内核
IE	Trident
Firefox	Gecko
Google Chrome	Webkit / Blink
Safari	Webkit
Opera	Presto

【注意】衡量标准为：占有一定的市场份额；必须有其独立研发的内核。

五、补充

前端开发讲究：结构（HTML）、样式（CSS）、行为（JavaScript）相分离。

总结自《渡一教育_2020权威HTML+CSS零基础入学》

HTML+CSS的那些事儿（一）