HTML网页、元素、标签、常用的特殊字符
文章目录
网页是由什么构成的
网页是由HTML标签、CSS样式和JavaScript代码构成的，HTML是网页的源代码。
结构：HTML——超文本标记语言（除了文本之外还有图片、视频、音频等）
样式：CSS
动作：JavaScript
HTML中的标签结构
HTML中的标签是有结构的
<!DOCTYPE HTML>:文档声明，指定网页的类型
<html>:必须有html标签，只能有一对，被称为根元素
<head>/</head>表示网页的头部信息
<body></body>表示网页的主题信息，表示网页中能够呈现的内容
页面中的大部分标签都是成对出现的:<标签名></标签名>
也有一部分标签是单标签:<标签名>，如</br>
元素及元素的属性
-
元素：将网页中一个完整的标签称为元素，元素和标签是同义词。
比如：创建一个
<h1>一级标题</h1>，成为h1标签或h1元素。 -
属性：- 我们可以为每个标签设置属性，比如为div标签添加id属性
通过属性可以为标签添加附加信息，比如添加id属性表示为标签设置一个唯一的名称。
属性需要设置在开始标签中，很少设置在结束标签中
属性设置的语法：属性名称=“属性值”，属性值必须添加双引号
常见的属性：
id：该属性值作为标签的唯一标识，同一个网页中只能有一个id值相同
class：属性值可以重复，经常用来分组
HTML注释
注释：对代码进行解释和说明，注释的内容在页面中不显示。
合理的注释可以帮助我们更快速的理解代码。
注释语法：<!-- -->，注释不能嵌套。
HTML环境
前端开发工具：VSCode（微软开发工具，免费）、webstorm（专业性强，收费）
HTML标签
用h1-h6表示页面中的标题，h1最大，h6最小，h1是比较重要的标签，有助于浏览器中搜索引擎的搜索，影响到搜索引擎的排名，一个页面中只能拥有一个h1标签。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题<h5>
<h6>六级标题</h6>
p标签：段落标签，表示页面中的一个段落，p标签中的文本内容会默认独占一行，段落之间有间距。
br标签是单标签，表示换行。
hr表示水平线
HTML部分常用标签
| 标签 | 描述 |
|---|---|
<h1>~<h6> | 标题标签，用于组织文档内部的文本 |
<p> | 段落标签，用于组织网页中的段落 |
<a> | 超链接标签，与网络上的另一个文档相连 |
<img> | 在文档中显示图像 |
<br> | 换行标签，用于换行 |
<hr> | 网页中的分割线 |
<strong> | 用于加粗文本 |
<i> | 定义与文本中其他内容不同的部分，呈现为斜体文本 |
<u> | 为文本增加下划线 |
<form> | 定义一个表单域 |
<input> | 定义一个可以输入字段的框 |
<textarea> | 定义一个多行文本框 |
<button> | 定义一个按钮 |
<select> | 定义一个下拉菜单 |
<label> | 为input元素进行标注 |
<link> | 引入外部文件的方法 |
<style> | 定义文档的样式 |
<ul> | 定义一个无序列表 |
<ol> | 定义一个有序列表 |
<li> | 定义列表中的内容 |
<table> | 定义一个表格 |
<th> | 定义表格中的表头 |
<tr> | 定义表格中的一行 |
<td> | 定义表格中的一列 |
<div> | 定义了文档中的节 |
标签介绍
图像标签
使用<img>标签向网页中引入一个外部图片，img标签是单标签，在浏览器中的默认大小为图片的实际大小
属性：
src：图片的位置，可以是绝对路径也可以是相对路径。
title：鼠标放置图片上时的提示信息。
alt：当图片加载失败时，用来替换图片的文字，搜索引擎也可以通过alt属性来识别图片。
width：宽
height：高
高度和宽度只设置一个属性时，另一个会按照比例动态调整。
相对路径
以当前HTML文件为起点，找到相应图片的位置
使用…/退出一级目录，如果需要退出多级目录则使用多个…/
绝对路径
文件相对于计算机的路径
meta标签
name：设置页面的关键字，
charset：设置页面的编码格式
标签规则
- 览器会尽最大努力修正页面，但还是要遵守一些编程规范：
- html不区分大小写，但一般小写，
- 注释不能 嵌套，
- 标签结构必须完整，除非是自结束标签，
- 标签可以嵌套，但是不能交叉嵌套
- 标签如果设置属性则必须有值，且值必须使用引号
内联标签<iframe>
在页面中引入另一个页面信息
src:设置一个外部html的路径，一般为相对路径
width/height：设置页面的宽高，如果合适，则可以自动出现滚动条
frameborder：设置边框，0表示无边框，1表示有边框，
name：表示给内联框架指定一个名称
内联框架不会被搜索引擎检索和识别
超链接标签<a>
使用超链接可以从一个页面跳转到另一个页面
<a href="" target="">
href:跳转页面的链接
target：可以指定打开链接的位置
_blank:表示在新的窗口打开
_self:表示在当前窗口打开，为默认值，会覆盖当前页面。
a标签有默认样式，没访问过颜色为蓝色，访问过颜色为紫色，鼠标点击没有松开时为红色
小案例
a标签和iframe标签联动，点击超链接，将链接中的内容在iframe标签中显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a标签和iframe标签联动</title>
</head>
<body>
<a href="http://www.baidu.com" target="my">百度</a>
<iframe src="登录.jpg" frameborder="1" width="100%" height="500px" name="my"></iframe>
</body>
</html>
- 锚链接：点击跳转到页面中的指定位置
<a href="#login">登录</a>``<div id="login">123</div>当前id值在单签页面不能重复
-
邮箱，联系我们
a链接的href属性设置为mailto：邮箱地址
其他标签
-
<strong>和<em>都表示强调的内容 em重在表示一个段落中的重点，strong重在表示一个内容的重要性。
em主要是一种语气上的强调，strong强调内容，比em更强烈。
em和strong可以一起使用。em通常为斜体，strong为粗体。
-
<i>标签内容斜体显示 i标签内容斜体显示，b标签内容加粗显示
在html中规定，对于不需要着重的内容，而单纯需要加粗或倾斜的字体使用b标签或i标签。
-
small标签
<small>标签中的内容会比父元素的内容小一些，在h5中使用small标签标示一些细则一类的内容，比如合同中的小字，网页站版权的声明 -
cite书名标签
书名可以使用
cite标签来表示，为斜体，并不是书名号 -
q标签、blockquote标签
q标签用来表示短语的引用，会默认添加双引号。标签的大小和内容的大小相同
blockquote标签表示一个长引用，默认占整行
-
sup标签表示上标，sub标签表示下标。
-
del标签表示删除内容，内容自动添加删除线。
-
ins标签表示一个添加的内容，默认添加下划线。
-
pre表示预格式标签，会将页面中的文本、代码、空格保留，进行原样显示
-
code表示代码一般情况我们会将pre和code配合使用显示代码块
-
div表示一个块级元素，无样式，主要用来布局，默认宽度为整行，默认高度由内容撑开。
-
span是一个行内元素，没有任何语义效果，span标签用来选择内容，然后进行修饰。
特殊字符
在HTML中一些特殊的字符不能直接使用，需要用一些特殊的符号来表示特殊的字符。
常用的特殊字符
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| " | 引号 | " |
| ’ | 撇号 | '(IE不支持) |
---- | ------------------ |
| | 空格 | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| " | 引号 | " |
| ’ | 撇号 | '(IE不支持) |
行内元素和块级元素
块级元素
块级元素表示默认会占一行的标签，无论元素内容的多少，都会占一行，常见的块元素有：
<p>标签、<div>标签、h标签
行内元素
行内元素指占用自身大小的元素，不占一整行，常见的行内元素有：
<span>标签、<a>标签、<img>标签、<iframe>标签。
列表
有序列表<ol>
使用ol标签表示有序列表，使用li标签表示列表项
<ol>
<li>数学之美</li>
<li>态度</li>
<li>科技史纲</li>
</ol>
可以通过修改ol标签的type属性修改列表项的符号
默认使用阿拉伯数字，可选a或A：英文大小写序号；i或I：罗马数字
有序列表的特点：有顺序，每个li独占一行。
有序列表的使用场景：问卷调查、带顺序的列表选项
无序列表<ul>
使用ul标签表示无序列表，使用li标签表示列表项
ul和li都是块级元素。
<ul>
<li>未来简史</li>
<li>人类简史</li>
<li>今日简史</li>
</ul>
通过ul标签的type属性可以设置列表项的符号。
默认的项目符号在不同的浏览器中有差异，大多数情况我们会使用图片来代替项目符号。
disc：实心圆（默认值）
circle：空心圆
square：实心方块
无序列表特点：默认实心小圆点，没有顺序，每个li独占一行。
一般无序列表的使用场景：导航、侧边新闻栏等有规则的图文混排
- 有序列表和无序列表可以互相嵌套
定义列表
dl表示定义列表，dt表示定义的标题，dd表示对标题的描述
<dl>
<dt>列表</dt>
<dd>有序列表</dd>
<dd>无序列表</dd>
<dd>定义列表</dd>
</dl>
218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
