HTML入门系列（二）

HTML标签

---

标题

标题的介绍与应用

标题（heading）是通过<h1> ~ <h6>标签进行定义的。
h1定义最大的标签，h6定义最小的标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

正确使用标题

请确保将HTML标题标签只用于标题。
不要仅仅为了生成粗体或大号的文本而是用标题。
正确使用表标题有利用SEO。
应该将<h1>用作标题（最重要），其后是<h2>（次重要的），再其次是<h3>，以此类推。

标题的位置和摆放 (推荐是用css)

再标签中添加属性：align=“left|center|rigth”

段落、换行、水平线

段落

段落是通过<p>标签定义的

<p></p>

换行

如果希望再不产生一个新的端口的情况下进行换行

<br>

水平线

<hr>标签在HTNL页面中创建水平线

<hr>

• color : 设置水平线的颜色
• width : 设置水平线的宽度
• size : 设置水平线的高度
• align : 设置水平线的对其方式(默认居中)，可取值left|rigth

图片

网站中使用最多的元素毋庸置疑，一定是图片

<img>标签定义HTML页面中的图像
img是单标签

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

• src : 路径（图片的地址与名称）
• alt : 规定图片的替换文本
• widgth : 规定图像的宽度
• height : 规定图片的高度
• title : 鼠标悬浮在图片上给予的提示

图片的路径详解

绝对路径

绝对路径是电脑的盼复存储访问的具体地址

相对路径

相对两者的关系，两者在同一路径下可以直接访问

• 子级关系 /
• 父级关系 …/
• 同级关系 ./

网络路径

网络图片链接

超文本链接

HTML中使用标签<a>来设置超文本链接
超链接可以是一个字，一个词，或者是一组词，也可以是一副图片，可以点解这些内容来跳转到新的文档或者当前文档的某个部分。

<a href="">链接文本<a>

超链接属性

在标签<a>中使用href属性来描述链接的地址，默认情况下将以，以下形式出现在浏览器中

• 一个未访问过的链接显示位蓝色字体并带有下划线
• 访问过的链接显示为紫色并带有下划线
• 点击链接时，链接显示为红色并带有下划线

超链接的表现

当鼠标悬浮在网页中某个链接上时，箭头会变成一个小手

文本

常用的文本标签

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

常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇

有序列表(ordered list)

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

<ol>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
    <li>西瓜</li>
</ol>

表现如下：

1. 苹果
2. 橘子
3. 香蕉
4. 西瓜

type属性

<ol>的属性type拥有选项

• 1 表示列表项目用数字标记（1、2、3…）
• a 表示列表项目用小写字母标记（a、b、c…）
• A 表示列表项目用大写字母标记（A、B、C…）
• i 表示列表项目用小写罗马数字标号（i、ii、iii…）
• I 表示列表项目用大写罗马数字标号（I、II、III…）

有序列表的嵌套

有序列表是可以进行嵌套的

<ol>
    <li>水果</li>
    <li>蔬菜
        <ol>
            <li>白菜</li>
            <li>油菜</li>
            <li>辣椒</li>
        </ol>
    </li>
    <li>肉类</li>
</ol>

表现如下：

1. 水果
2. 蔬菜
   1. 白菜
   2. 油菜
   3. 辣椒
3. 肉类

无序列表（unordered list）

无序列表表现

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

<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
    <li>西瓜</li>
</ul>

表现如下：

• 苹果
• 橘子
• 香蕉
• 西瓜

type属性

<ul>的属性type拥有选项

• disc默认实心圆
• circle空心圆
• square小方块
• none不显示

无序列表的嵌套

<ul>
    <li>水果</li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>辣椒</li>
        </ul>
    </li>
    <li>肉类</li>
</ul>

表现如下：

• 水果
• 蔬菜
  • 白菜
  • 油菜
  • 辣椒
• 肉类

#### 无序列表常见应用场景 - 无序的列表效果 - 导航效果

导航效果

<ul>
    <li>Xiaomi手机</li>
    <li>Redmi手机</li>
    <li>电视</li>
    <li>笔记本</li>
</ul>

表格

表格在数据展示方面非常简单，并且表象优秀

表格组成与特点

行、列、单元格
单元格特点：同行等高、同列等宽。

表格标签

• 表格：<table>
• 行：<tr>
• 列：<td>

表格的属性

• border：设置表格的边框（像素）
• width：设置表格的宽度（像素）
• height：表格的高度（像素）

表格单元格合并

单元格合并属性

• 水平合并 ：colspan
• 垂直合并 : rowspan

水平合并保留左，删除右
垂直合并保留上，删除下

Form表单

表单在Web网页中用来给用户填写信息，从而能采用用户信息，使网页具有交互功能。
所有的用户输入内容的地方都用表当来填写，如注册登录、搜索框.
表当是由容器控制和组件组成的，表当一般应该包含用户填写信息的输入框，提交按钮等，这些输入框，按钮叫做控件，表当就是容器，它能够容纳各种各样的控件

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

属性说明

• action：服务器地址
• name：表单名称

method中的get和post的区别

• 数据提交方式，get吧提交的数据URL可以看到，post看不到
• get一般用于提交少量数据，post用来提交大量数据

表单元素

一个完整的表单宝航三个基本元素：表单标签，表单域、表单按钮

• 表单标签
• 表单域
• 表单按钮

<form>
    <input type="text">
    <input type="submit">
</form>

表单元素

文本框

文本域通过<input type="text">标签来设定，当用户要在表单中输入字母、数字等内容时就会用到文本域

<form>
    First name：<input type="text">
    <br>
    Last name：<input type="text">
</form>

密码框

密码字段通过标签<input type="password">来表示，密码字段字符不会明文展示，而是用星号/圆点代替

<form>
    Password：<input type="password">
</form>

提交按钮

当用户点击确认按钮时，表单的内容会被传送到另一个文件。表单动属性定义了目的文件的文件名。
有动作属性定义的这个文件通常会对接收到的数据数据进行相关处理

<form>
    User Name: <input type="text">
    <input type="submit" value="submit">
</form>

块元素与行内元素（内联元素）

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kkk9Ow17-1676736286901)(https://note.youdao.com/yws/res/7941/WEBRESOURCEd53cffaed835c9b6f9fa880757119c6f)]

详细参考地址：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Content_categories

虽然到了HTML5的版本，元素分类更细致了，但是对初学者并不友好，所以仍然按块级元素和内联元素做区分，这对我们的布局起到了至关重要的作用。

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

块级元素	内联元素
块元素会在页面独占一行	行类元素不会独占页面中的一行，只占自身的大小
可设置width、height属性	行内元素设置width、height属性无效
一般块级元素可以包含行内元素和其他块级元素	一般内联元素不包含块级元素

常见的块级元素

<div>、<form>、<h1>~<h6>、<hr>、<p>、<table>、<ul>等

常见的内联元素(行内元素)

<a>、<b>、<i>、<span>、<em>、<strong>等

行内块级元素(特点：不能换行、能识别宽高)

<button>、<img>、<input>等

HTML5新增标签

HTML5是HTML的修订版，2014年10月由万维网联盟(W3C)完成标准制定

在HTML5出现之前，一般采用DIV+CSS布局页面，但是这样的布局方式不仅使文档的结构不够清晰，而且不利于搜索引擎的爬虫对页面的爬取。
为了解决上述的缺点，HTML5新增了很多新的语义化标签

扩展知识

<div>容器元素，也是页面中使用最多的元素

<div>实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n72MkI9Y-1676736286904)(https://note.youdao.com/yws/res/7989/WEBRESOURCEca958d3394e7f5b97efd7bfa0721c4b0)]

H5新标签实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JqzAFpJL-1676736286905)(https://note.youdao.com/yws/res/7991/WEBRESOURCE89c196703fae1982c715d4222c857dbd)]

H5新标签

• <header></header> 头部
• <nav></nav> 导航
• <section></section> 定义文档中的节、页眉、页脚
• <aside></aside> 侧边栏
• <footer></footer> 脚部
• <actical></actical> 代表独立的、完整的相关内容块，例如一篇完整的论坛帖子、一篇博客文章、一个用户评论等