HTML标签

HTML笔记

HTML : 超文本标记语言 Hypertext Markup Language 用来定义文档内容结构，W3C:万维网联盟-----技术标准机构

CSS ：层叠样式表（Cascading Style Sheets) 外观

最新的一个版本 html5

元素通过<>识别，尖括号里面的是元素的名称，这样就创建了一个标记，标记通常成对出现

单标记（空标记）只有开始（打开）标记没有结束（关闭）标签

单标记中 <标记名称属性> 和 <标记名称属性/>（自闭合）两种写法都是一样的

属性书写在开始标记里面属性 = “属性值”

样式css引入

外部样式表(外联）：<link>

内部样式表（内联）：<style>

内嵌样式：通过style属性

导入样式已经不再使用: @important

１.1 认识网页

组成：文字，图片，按钮，搜索框，视频。。。元素（html标签）组成的。

总结：

网页其实就是由html标签组成的。

１.2 网页标准

☞ 结构标准：（骨骼）

html ->搭建网页结构

☞ 表现标准：

css->美化网页

☞行为标准：

javascript

１.3 浏览器

☞作用：

浏览网页

内核（渲染引擎）：将网页中的标签信息转化为我们人眼能够识别的图文信息。

１.4 服务器（了解）

１.5 HTML类型（重点）

☞超文本：在网页中能够实现页面跳转的文字（超链接）

☞标记：指的是在网页中的html标签

☞html结构介绍：

目前我们是按照html5结构去设计网页的

之前： html4

xhtml（扩展）

<!Doctype html>

<html>

<head>

</head>

</html>

☞详细介绍结构中的标签

✔Doctype标签：告诉浏览器当前文档的类型。

如果不设置Doctype那么浏览器在显示过程中可能会出现一种怪异模式。

✔html标签：结构中的根标签

✔head标签：可以设置网页样式;可以设置网页标题；设置网页关键字，网页描述信息，js代码编写。。。。

✔title标签：设置网页标题

✔body标签：指的是网页的主体（我们看到的所有信息）

☞html版本介绍：

.strict.dtd : 严格模式（标准模式）

.transitional.dtd: 过渡模式

.loose.dtd: 过渡模式（松散模式）

１.6 Html标签（重点）

☞标签写法分类

✔双标签：有开始和结束标签

例如： head body title

✔单标签：只有开始没有结束

例如： meta , hr,br...

☞标签与标签之间关系的分类

✔并列关系：（兄弟）

✔包含关系（嵌套关系）：（父子）

1.7标签（单标签双标签）

单标签

✔横线标签 <hr>

✔设置网页编码 <meta charset="UTF-8">

✔换行标签 <br>

✔注释标签  或者 ctrl+/ 注释不要嵌套，容易出问题，也无意义

双标签

✔ 标题标签

注意：

✔ 标题标签只有从h1-h6

✔ 在当前网页中最好一号标题出现一次

✔段落标签 <p></p>

✔格式化标签（突出显示信息）

◆文字加粗 <strong></strong> 或者 <b></b>

◆文字斜体 <em></em> 或者 <i></i>

◆文字下划线 <ins></ins> 或者 <u></u>

◆删除线标签 <del> </del> 或者 <s></s>

◆设置文字颜色或者大小

总结

color属性：设置文字颜色

size 属性：设置文字大小，不需要带单位

其他双标签（了解）

☞ div

☞ span

总结：

◆使用场景是在网页布局过程中使用该标签

◆该标签属于没有语义的标签

1.8块标记和行内标记

元素模式分类及模式转化

☞按照标签的显示方式分类

✔块级元素

✔行内元素

✔行内块元素（替换元素）

块级元素

☞ div,h1-h6，p,ul,ol,dl,li,dd...

☞特点：

✔如果一个块级元素默认没有设置宽度，那么该元素的宽度与其父元素的宽度一样。（宽度和高度不能继承）

✔所有的块级元素都要独占一行显示

✔可以直接设置宽度和

行内元素

☞ a,span,font,strong,del.....

☞特点：

✔行内元素不能直接设置宽度和高度

✔行内元素都在一行上显示。

行内元素不能设置上下内外边距

行内块元素

☞ img,input..

☞特点：

✔可以设置宽度和高度

✔元素可以在一行上显示

注意：上图中img图片是和红色的div在一行上显示，由于div高度要高，img，div都处于一行当中的下方对齐显示

元素的转换方式（模式转换）

☞转换为块级元素

display: block;

☞转行内块元素

display: inline-block;

注意：

行内块元素不能转换为块级元素或者行内元素。

☞转行内元素

display: inline;

行内块元素特征主要体现在排版上共占一行横向排列，自身又可以设置宽高内外边距

１.9 图片标签（重点）

☞<img>

☞相关属性：

src=””: 通过该属性设置图片的相对路径或绝对路径，用来向浏览器展示所要显示的图片

与css外联一样

title=“”：设置鼠标悬停到图片上的文字提示

alt=””: 设置图片描述信息（注意：该属性并不是给用户展示的，为搜索引擎提供服务）

width: 设置宽度

height:设置高度

总结：

◆图片标签也属于多媒体标签的一部分

◆多媒体标签有自己的缩放比例关系

图片的格式：

１.10 路径（重点）

☞绝对路径：

凡是带有磁盘目录或者网站地址的路径

☞相对路径：

◆相对路径必须保证在同一个根目录下

◆没有磁盘目录或者网站地址的路径

✔如果当前页面（html）和要访问的资源（图片），在同一个文件夹中， src=”直接设置图片名称即可”

✔如果当前页面（html）和要访问的资源（图片），不在同一个文件夹中，如果页面在图片的上一级目录中，src=”文件夹名称/+图片名称”;

✔如果当前页面（html）和要访问的资源（图片），不在同一个文件夹中，如果页面在图片的下一级目录中，src=”../图片名称”;

１.11 超链接a（掌握）

☞ 作用：实现页面跳转

a标签:

☞属性介绍：

1. target = ""{_self ,在当前页面打开（默认）；_blank,从新页面打开}

一般常用_blank从新页面打开

注意：在head标签中添加base标签，在base标签中设置target属性为_blank;

title: 设置鼠标悬停到超链接上的文字提示

2. href = " 链接地址“

1.页面路径 2. 网址 href = "http://网址“ 3. 锚点

☞超链接在本页面内部跳转锚链接

◆直接设置href的值为=”#”

◆锚链接

3.mailto:邮件地址

如果要使用 mailto:邮件地址要求客户端要有邮箱软件，否则不会打开邮箱

当给a标签设置模式转化并设置背景图片时，a标签内的文字是搜索引擎需要的图片描述，下边是几种使a内文字不可见的方法：

font-size:0 2. grba() 透明 3. 设置 text-indent 和 overflow:hiddeen

１.14 多媒体标签（h5）

☞音频

☞视频

☞视频标签

属性：

src: 设置视频的路径

controls：显示控制栏

loop：设置视频循环播放

autoplay：自动播放

或者如下的写法：

☞音频标签

总结：

◆音频标签的用法及属性与视频标签一样

１.2 Meta

☞<meta charset="UTF-8">

◆charset 字符集

◆UTF-8 属于字符集中的一种编码格式

unicode

gb2312

gbk

big5

作用：设置网页编码 -->防止网页乱码

☞设置网页关键字

总结：

◆设置网页关键字属于网页优化的一部分

◆网页关键字是为搜索引擎提供服务的

☞ 设置网页描述信息

总结：

◆设置网页描述信息

◆ 该标签是为搜索引擎提供服务的

☞实现网页重定向

１.9 表单控件（了解）

◆如果要将表单数据进行提交，那么表单控件必须放到表单域中

<input type="email" name="em"> 验证邮箱格式控件

☞输入框：

✔属性：

autofocus：设置控件自动获取焦点

required：设置控件为必须填写

placeholder：占位符（提示信息）

name:设置当前控件的名称

maxlength：设置当前控件最大输入字符长度

value：设置当前控件的默认值

id: 设置当前控件唯一标识

☞密码输入框:

属性与文本输入框的属性一致。

☞单选控件

注意：

◆如果该标签要实现单选效果，需要设置相同的name属性值

◆设置默认选中项，设置checked属性

☞下拉列表：

设置默认选中项：

selected

设置多选效果：

multiple

其他设置方式：

☞复选框（多选控件）

通过checked属性设置默认选中项

☞文本域

☞分组控件

☞按钮：

◇表单提交按钮

◇普通按钮（该按钮和js配合使用）

注意：该按钮不能进行数据提交

◇表单重置按钮

将表单控件中的值还原到默认值。

◇图片提交按钮（可以进行数据提交）

☞required 必填项

☞autocomplete 自动完成

可以设置on 或者off

☞自动获取焦点

autofocus

☞关闭验证：novalidate

１.11 新增的表单元素

1.12 iframe

在实际中不推荐使用，如果公司内部使用可以用

p标签

语义化标签

空格在html文档中多个空格或者 enter换行都只显示一个空格

注意：p 标签内不要有任何块标签

h1 ~ h6 标题

加粗：strong 重要文本 b突出文本

斜体： em i

小字： small 标签中的文字要小一些表示一些细则一类的内容

span 跨越多个字符

表示作品引用：

blockquote 整段的引用（块引用）（这是一个块标记）

cite 对参考文献的引用（比如作品名字）

q 小段引用的文本（行内引用）浏览器会默认加引号

abbr 缩写显示 title ：全称

sup (上标)和 sub(下标):

二的二次方：2<sup>2</sup>

del表示删除：标签中的内容会自动添加删除线

ins表示插入的内容，会自动添加下划线

pre 是一个预格式标签，会将代码中的格式保存，不会忽略多个空格

code专门表示代码但是不会保存格式

一般情况下 code和pre 会配合使用

href 和src 区别

href是Hyertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。

src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script ，iframe。当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。（有不对的地方，请留言）

１.1 特殊标记（了解）

１.2 标签语义化（了解）

概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

作用：让网页结构更合理，对于搜索引擎比较友好。

如何实现标签语义化：在写网页的过程中，多使用有语义的标签。

１.10 伪元素

伪元素和伪元素选择器没有任何关系

☞ ::before

☞ ::after

总结：

✔伪元素必须设置content属性

✔伪元素属于行内元素

伪元素中不能再创建伪元素

一般是要将伪元素依附于某个html标签，如果没有写标签，则默认为*

不是真正的html标签，但是可以做出来一个标签的样子，这就是伪元素

１.3 语义标签（h5中的标签）（理解）

☞<header></header>

☞ <article></article>

☞ <aside></aside>

☞ <footer></footer>

☞ <section></section>

☞ <nav></nav>

注意：

◆以上语义标签与div的用法一模一样。

◆以上标签与div 相比，只体现了语义性。

◆由于以上新标签存在兼容性，所以推荐使用div标签。

１.4 列表

☞无序列表

注意：列表项li中可以放任何的标签或内容

☞有序列表

☞自定义列表

自定义列表使用场景：

１.6 Link标签介绍

该标签放在head标签中

作用：

◆ 设置网页标题图标

◆引用外部样式表

１.7 表格标签

1.71表格基本的结构

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

属性：

border: 0默认值

width: 设置宽度

height: 设置高度

align: 设置对齐方式 left | right | center

注意：

◆如果将align属性设置给table标签，只能让该白去整体居中显示，内容不会居中显示

◆如果要内容居中显示，则将该属性设置给td或者tr.

cellspacing:设置td(单元格)之间的距离。默认值是2

cellpadding:设置内容与td边框之间的距离

注意：cellpadding该属性可以改变表格大小。

bgcolor：设置背景颜色

注意：

◆所有的标签默认都是在浏览器的左上角开始显示

◆标签中的所有内容（文字，图片）默认在标签的左上角显示

☞表格中的标签：

<caption>这是表格标题</caption>

◆设置表格中的表头

注意：

th与td的用法一样。

一般情况下，不用写 tbody thead tfoot ,浏览器会自动添加，同时有些浏览器不支持这些标签可能报错

table{

border-collapse: collapse; 为表格设置合并边框模型

}

１.8 表格的基础结构（了解）

１.9 表格中单元格合并

☞ 横向列合并

colspan：合并几列就设置对应的数字

☞ 纵向跨行合并

rowspan：跨行合并

☞横向合并

colspan=“数字”

注意：

合并完单元格后要记得将多出的列删掉

☞纵向合并

rowspan=“数字”

注意：

合并完单元格后要记得将多出的列删掉

１.10 表单

☞如果希望将表单控件当中的数据进行提交，则必须将表单控件写到表单域中

☞作用：收集用户填写的信息

☞组成：

◆表单域

◆提示信息

◆表单控件（重点）

☞表单域中的属性：

action：处理表单数据的一个后台程序（1.php）

method：提交数据的方式

get| post

总结：

◆get提交数据的时候，会将数据显示到地址栏中（不安全）

◆post提交数据，通过后台提交（安全）

１.11 表单控件（重点）

VScode 快捷键：

Ctrl + alt + f 代码格式化

ctrl + d 选择多个相同标签

posted @ 2020-03-10 16:34 代码，让世界更美好！阅读(410) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Hi你好！

HTML标签

样式css引入

１.1 认识网页

１.2 网页标准

１.3 浏览器

１.4 服务器（了解）

１.5 HTML类型（重点）

１.6 Html标签（重点）

1.7标签（单标签 双标签）

单标签

双标签

其他双标签（了解）

1.8块标记和行内标记

元素模式分类及模式转化

块级元素

行内元素

行内块元素

元素的转换方式（模式转换）

１.9 图片标签（重点）

１.10 路径（重点）

１.11 超链接a（掌握）

１.14 多媒体标签（h5）

１.2 Meta

１.9 表单控件（了解）

☞输入框：

１.11 新增的表单元素

1.12 iframe

p标签

href 和src 区别

１.1 特殊标记（了解）

１.2 标签语义化（了解）

１.10 伪元素

１.3 语义标签（h5中的标签）（理解）

１.4 列表

１.6 Link标签介绍

１.7 表格标签

１.8 表格的基础结构（了解）

１.9 表格中单元格合并

１.10 表单

１.11 表单控件（重点）

VScode 快捷键：

公告

1.7标签（单标签双标签）