web前端实战入门训练之HTML基本元素
时间：2023-09-01 01:42:01 | 来源：网站运营
时间：2023-09-01 01:42:01 来源：网站运营
web前端实战入门训练之HTML基本元素：
【前言】
在我们开始学习前端开发的时候，经常会用到HTML，它到底在web前端开发中有什么作用，HTML是什么呢？
HTML（Hypertext Markup Language）：即超文本标记语言，是一种用来设计网页的标记语言，用该语言编写的文件，以.html或.htm为后缀，并且由浏览器解释执行，生成相应的界面。网页文件本身只是一种文本文件，我们通过在文本文件中添加标记符号，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等），这些标记符号就是html，我们学习html就是学习这些标记符号，html标记符号也称为html元素。
一、标题
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
标题很重要 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
二、段落 段落是通过 <p> 标签定义的。
三、换行 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
<br /> 元素是一个空的 HTML 元素。
四、水平线 <hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
属性：
color：设置水平线的颜色
width：设置水平线的长度
size：设置水平线的高度
align：设置水平线的对齐方式（默认居中），可取值left|right
五、图片 <img> 标签定义 HTML 页面中的图像。
属性：
Src：路径
Alt：规定图像的替代文本。
Width：规定图像的宽度。
Height：规定图像的高度
Title：鼠标悬停在图片上给予提示
六、超链接 HTML使用标签 <a>来设置超文本链接。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
（1）一个未访问过的链接显示为蓝色字体并带有下划线。
（2）访问过的链接显示为紫色并带有下划线。
（3）点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。七、文本格式化标签效果如下：
八、列表8.1无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
浏览器显示如下：
<ul><li>的属性type 拥有的选项
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示
8.2有序列表 同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
浏览器中显示如下：
<ol><li>的属性type 拥有的选项
1 表示列表项目用数字标号（1,2,3...）
a 表示列表项目用小写字母标号（a,b,c...）
A 表示列表项目用大写字母标号（A,B,C...）
i 表示列表项目用小写罗马数字标号（i,ii,iii...）
I 表示列表项目用大写罗马数字标号（I,II,III...）
8.3自定义列表 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
浏览器显示如下：
最后：初学者可以参考尚学堂【HTML基本元素】视频教程：
全套视频基础入门详细讲解：
在线咨询
