前端笔记 HTML

1. HTML5介绍

HTML5是用来描述网页的一种语言，被称为超文本标记语言，后缀以.html结尾
<!DOCTYPE html> 是H5的声明，位于文档的最前面（网页必备组成部分，避免浏览器的怪异模式）

2. HTML基本骨架

<!DOCTYPE html>     
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
    </head>
    <body>
    </body>
</html>

html标签：定义HTML文档，标签限定了文档的开始和结束
head标签：文档的头部，描述文档的属性和信息，包括：文档的标题、在Web中的位置以及其他文档的关系。绝大多数内容不会显示给读者
body标签：定义文档主体（文本、超链接、图像、表格、列表等），展示给读者
title标签：定义文档的标题，显示在浏览器窗口的标题栏或状态栏上，是<head>标签中唯一必须包含的内容，有利于SEO优化（搜索引擎优化）
meta标签：描述HTML网页文档的属性、关键词等。例如：charset=“UTF-8”表示当前使用的是UTF-8的编码格式

3. 标题标签

标题通过 <h1> ~ <h6> 标签进行定义

<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
……
<h6> 六级标题 </h6>

生成h1~h6的快捷键：h$*6
注意：请确保标题标签只用于标题（有益于SEO）
标题标签位置摆放：在标签中添加属性：align="left|center|right"，默认居左（align在代码中会变红，即不推荐这样使用，后续用css调整位置）

4. 标签：段落、换行、水平线

段落：

通过<p>定义

<p>段落1</p>
<p>段落2</p>

换行：

通过<br>定义（单标签）

第一行<br>第二行<br>第三行

水平线：

通过<hr>定义（单标签）

<hr color="" width="" size="" align="">

属性：color 颜色； width 宽度； size 高度； align 对齐方式（默认居中，可取left | right）

5.图片标签

图片标签通过<img>定义（单标签）

<img src="" alt="" title="" width="" height="">

属性：
- src：路径（可用绝对路径、相对路径、网络路径）
- alt：规定图片代替的文本
- width：宽度
- height：高度（一般不用）
- title：鼠标悬停在图片上给予提示（一般不用）

6. 超链接标签

超链接标签通过<a>来设置

<a href="url">链接文本|图片</a>

默认情况下，链接将以以下形式出现在浏览器中（后期通过CSS修改这些效果）：
- 未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示紫色并带有下划线
- 点击连接时，链接显示红色并带有下划线
鼠标悬停在超链接上会有变化

7. 文本标签

常用文本标签

标签	描述
<em>	定义着重文字
<b>	定义粗体文本
<i>	定义斜体字
<strong>	定义加重语气
<del>	定义删除字
<span>	元素没有特定的含义

8. 列表标签

有序列表：

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol> 标签，每个列表项始于<li> 标签

<ol type="">
    <li>第一项</li>
    <li>第二项</li>
</ol>

属性type表示排序的标号：
- 1 表示数字标号（1，2，3……）（默认）
- a 表示小写字母标号（a，b，c……）（大写用：A）
- i 表示小写罗马数字标号（i，ii，iii……）（大写用： I）
有序列表可以嵌套

无序列表：

无序列表使用粗体圆点进行标记。有序列表始于<ul> 标签，每个列表项始于<li> 标签

<ul type="">
    <li>第一项</li>
    <li>第二项</li>
</ul>

属性type表示粗体圆点的形式：
- disc 表示实心圆（默认）
- circle 表示空心圆
- square 表示小方块
- none 表示不显示
无序列表也可以嵌套
常见应用场景：
- 无序列表的效果
- 导航效果（通过CSS可调整布局）
快捷键：ul>li*3 (数字根据自己的需求的li数量修改)

9. 表格标签

表格：

表格：<table> ；行：<tr> ；单元格(列)：<td>

<table align="" border="1" width="400">
    <tr>
        <td>（1，1）</td>
        <td>（1，2）</td>
    </tr>
    <tr>
        <td>（2，1）</td>
        <td>（2，2）</td>        
    </tr>
</table>

快捷键：table>tr*3>td*5{单元格内容}
属性：
- border：设置表格的边框（数字表示像素单位）
- width：设置表格的宽度
- height：设置表格的高度

表格单元格合并：

水平合并：添加属性：colspan=“合并格数”（保留左边删除右边）
- 垂直合并：添加属性：rowspan=“合并格数”（保留上边删除下边）

<table align="" border="1" width="400">
    <tr>
        <td colspan="2" rowspan="2">（1，1）、（1，2）、（2，1）、（2，2）</td>
        <td rowspan="2">（1，3）、（2，3）</td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td colspan="3">（3，1）、（3，2）、（3，3）</td>
    </tr>
</table>

10. 表单

表单：

表单是由容器和控件组成，一个表单一半应该包括用户填写信息的输入框、提交按钮等，这些输入框、按钮叫做控件，表单就是容器，它能容纳各种控件

<form action="url" method="get|post" name="myform"></form>

属性：
- action：后台服务器地址
- name：表单名称
- method中get和post的区别：
  - 数据提交方式，get提交的数据url可以看到，post看不到
  - get一般用于提交少量数据，post用来提交大量数据

表单元素：

表单元素：一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮
- 文本框：文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时使用
- 密码框：密码框通过 <input type="password"> 来定义
- 提交按钮：提交按钮通过 <input type="submit"> 来定义

<form>
    <!--文本框-->
    First name: <input type="text" name="firstname">
    <br>
    Last name: <input type="text" name="lastname">    
    <!--密码框-->
    Password: <input type="passord">
    <!--提交按钮-->
    <input type="submit" value="登录">
    <button>登录</button>	   
</form>

11. 块级元素与内联元素

HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在HTML5中，元素不再按照这种方式来区分，而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型phrasing content)、内嵌型(embedded content)、交互型interactive content)。元素不属于任何一个类别，被称为穿透的，元素可能属于不止一个类别，称为混合的

详细参考：Web开发技术内容分类

块级元素与内联元素区别：

块级元素	内联元素
块级元素会在页面中独占一行（自上向下垂直排列）	内联元素不会独占页面中的一行、只占自身的大小
可以设置width、height属性	内联元素设置width、height属性无效
一般块级元素可以包含内联元素和其他块级元素	一般内联元素包含内敛元素不包含块级元素

常见块级元素：div、form、h1~h6、p、table、ul、ol 等
常见内联元素（行内元素）：a、b、em、i、span、strong 等
常见行内块级元素（特点：不换行、能够识别宽高）：button、img、input 等

12. HTML5新增标签

HTML5 是 HTML 最新的修订版本，2014年10月由万维网联盟 (w3c) 完成标准制定
在HTML5 出现之前，我们一般采用 DIV+Css 布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5 新增了很多新的语义化标签

老版本中容器元素：<div></div>，用于为HTML文档内大块的内容提供结构和背景的元素
H5新标签：
- <header></header> ：头部
- <nav></nav> ：导航
- <section></section> ：定义文章中的节，比如章节、页眉、页脚
- <aside></aside> ：侧边栏
- <footer></footer> ：脚部
- <article></article> ：代表一个独立的、完整的相关内容快，例如一篇论坛帖子、一篇博客文章、一个用户评论等

<!--div实现-->
<div id="header"></div>
<div id="nav"></div>
<div id="article">
	<div id="section"></div>
</div>
<div id="aside"></div>
<div id="footer"></div>

<!--H5新标签实现-->
<header></header>
<nav></nav>
<article>
	<section></section>
</article>
<aside></aside>
<footer></footer>

rainbowYao's Blog

前端笔记 HTML

1. HTML5介绍

2. HTML基本骨架

3. 标题标签

4. 标签：段落、换行、水平线

段落：

换行：

水平线：

5.图片标签

6. 超链接标签

7. 文本标签

8. 列表标签

有序列表：

无序列表：

9. 表格标签

表格：

表格单元格合并：

10. 表单

表单：

表单元素：

11. 块级元素与内联元素

12. HTML5新增标签