学习html标签只需要关注语意，不需要关注样式，样式交给css
Web 标准构成
结构标准：结构用于对网页元素进行整理和分类，用HTML实现
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，用CSS实现
行为标准：行为是指网页模型的定义及交互的编写，用Javascript实现
基本介绍
html概念
html是超文本标签语言，可以编写静态网页，该静态网页包括文字，图形，动画，声音，表格，链接
元素的概念
- 元素指的是从开始标签到结束标签的所有代码
- 元素的内容是开始标签与结束标签之间的内容
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素拥有属性
语意化标签
结构化语意标签
- header： 表示网页的头部
- main：表示网页的主体
- footer：表示网页的底部
- nav：表示网页中的导航
- aside：和主体相关的其他内容（侧边栏）
- article：表示独立的文章
以上标签可用div代替，div没有语意，就表示一个区块，目前来讲div还是我们主要的布局元素
有语意的标签
- h：标签可定义标题
- p： 标签定义段落
- br：插入一个换行
- hr：定义水平线
没有语意的标签
- div：块元素，没有语意，主要用来做页面布局
- span：行内元素，没有语意，主要用来包裹文字
浏览器在解析网页时，会自动对不符合规范的内容进行修正，如：
- 标签写在了根元素的外部
- p元素中嵌套了块元素
- 根元素中出现了head和body以外的子元素
文本格式化标签 link
HTML 可定义很多供格式化输出的元素，比如粗体和斜体字
pre -------- 预格式化标签
b --------- 定义粗体文本
big -------- 定义大号字
em --------- 定义着重文字
i -----------定义斜体字
small ------ 定义小号字
strong ----- 定义加重语气
sub -------- 定义下标字
sup -------- 定义上标字
ins -------- 定义插入字
del -------- 定义删除字
特殊字符（字符实体） link
- 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体去替换预留字符、
- 在 HTML 中不能使用小于号 < 和大于号 >，这是因为浏览器会误认为它们是标签
- 多个空格默认情况下会被浏览器解析为一个空格，可以用
 表示
<!--只写了常用的 其他看手册-->
空格
& &
< <
> >
" "
' '
© ©
标签属性（一般用css写）
样式属性
- 大部分标签内都可以加样式属性，但不推荐，这类属性一般用css写
- 单个文件需要特别样式时，可以使用内部样式表，即使用 style 属性改变元素样式
<!--实在需要在标签中加属性推荐用内联样式-->
<p style="text-align: center; color: #00b3ff">hello</p>
<!--不建议这样写-->
<p align="center">hello</p>
特殊属性 (举例)
- img 标签有两个必需的属性：src 属性 和 alt 属性
- a 标签中的 href 属性，它指示链接的目标，name属性指向锚点
- 这种特殊标签属性必须写在标签内，类似的还有很多
<!--这些是必备特殊属性，必须写在标签内-->
<a href="https://www.baidu.com/">百度一下</a>
<img src="xxx.jpg" alt="图片">
如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化，有3种方式来插入样式表
外部样式表
- 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择
- 使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
- 当单个文件需要特别样式时，就可以使用内部样式表
- 你可以在 head 部分通过 style 标签定义内部样式表
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
内联样式
- 当特殊的样式需要应用到个别元素时，就可以使用内联样式
- style 属性提供了一种改变所有 HTML 元素的样式的通用方法
- 样式属性可以包含任何 CSS 属性
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
超链接 link
标签用法
超链接可以是字词，也可以是图像，可以点击这些内容来跳转到新的页面或者当前文档中锚点
标签属性
href：属性规定链接指向的页面的URL，也可以是锚点或邮箱target：属性规定在何处打开链接文档，有4个重定向操作
链接到外部 (target 属性细节)
<!--
target属性 有4个保留的目标名称用作特殊的文档重定向操作：
_blank ------ 打开新窗口
_self ------- 在本窗口打开
_top -------- 替换整个窗口
_parent -----
framename --- 在指定的框架中打开被链接文档（详见html框架）
-->
<a href="https://www.baidu.com/" target="_blank">百度</a>
<a href="./111.html" target="_blank">本地文件</a>
相对路径
./表示当前文件所在目录../表示当前文件所在目录的上一级目录
链接到同一个页面的不同位置（锚点）
- href值为#，可以跳转也页面顶部，#xxx可以跳转到id为xxx的页面位置
- 以前常用#作为超链接路径的占位符使用，其实用
javascript:;做占位符更好
<style>
body{
height: 2000px;
}
</style>
<body>
<h1 id="top">文章标题</h1>
<br><br><br><br><br><br><br><br><br>
<a href="#top">回到标题</a>
</body>
跳出框架
…
创建电子邮件链接
<a href="mailto:xxx@qq.com?">发送邮件</a>
图像标签 link
img是一个替换元素，类似的替换元素还有iframe标签，音视频标签，都需要src引入
img是一个行内块元素，不会独占一行，又能设置宽高
img 标签
- img 标签向网页中嵌入一幅图像
- img 标签并不会在网页中插入图像，而是从网页上链接图像
- img 标签创建的是被引用图像的占位空间
img 标签属性
- img 标签有两个必需的属性：src 属性 和 alt 属性
- alt 属性规定图像的替代文本，如果无法显示图像，浏览器将显示替代文本
- src 属性和规定显示图像的URL，可以是绝对路径或相对路径
- ismap 属性将图像定义为服务器端图像映射
- usemap 属性将图像定义为客户器端图像映射
- longdesc 属性指向包含长的图像描述文档的 URL
图片链接
a标签中嵌套img标签实现图片链接
图片大小
- 宽高一般只修改一个，另一个等比例缩放
- pc端一般不建议修改图片大小，需要多大就裁多大
- 移动端经常要对图片缩放（大图缩小）
图片格式
jpeg(jpg)：支持颜色丰富，不支持透明效果，不支持动图gif：支持颜色比较少，支持简单透明，支持动图png：支持颜色丰富，支持复杂透明，不支持动图webp：谷歌推出的专门用来表示网页图片的格式，具备其他格式文件的所有优点，并且文件特别小，缺点兼容性不好base64：将图片使用base64编码，使图片转换为字符，通过字符的形式引入图片，效果是图片可以和网页一同加载
img标签配合map标签和area标签实现图片分区链接效果
- map 标签定义一个客户端图像映射。图像映射指带有可点击区域的一幅图像
- area 标签永远嵌套在 map 标签内部。area 标签可定义图像映射中的区域
- img 中的 usemap 属性可引用 map 中的 id 或 name 属性(取决于浏览器)，所以我们应同时向
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" usemap="#logo">
<map name="logo" id="logo">
<area shape="circle" coords="270,200,30" href ="https://www.baidu.come/" alt="baidu" />
<area shape="rect" coords="100,100,200,200" href ="https://www.bilibili.com/" alt="blibili" />
</map>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
