一.head中的各种标签
1.
文档类型声明 声明当前文件是一个HTML5文件文档类型声明在一个html文件中必不可少 而且必须在网页第一行
2.键盘按键为Ctrl+? 注释
3.
head中用于设置网页的相关信息
4.声明当前网页所采用的字符编码格式
常见的中文编码格式 gb-2312 :国标码简体中文的编码格式
GBK:扩展的国标码 也是简体中文,但是比GB2312多了更多的编码格式
utf-8:unicode万国码 基本兼容各国语言编码。现在最常用
5.
name="keywords" 表示这一行meta语句是要设置网页的关键字,content=""设置当前网页的关键字内容,多个关键字用英文逗号分隔,name属性与content属性必须同时设置,name表示需要设置的项目 content表示设置的具体内容
设置网页的描述,网页描述在网页中非常重要,在搜索引擎中搜索网页时,网页标题下面显示的一段文字就是网页的描述
6.这是我的第一个网页title表示网页的标题 ,1也就是网页选项卡上的文字
7.形如这样的标签叫做自闭合标签 ,也叫空标签 ,这样的空标签只有一个标签 ,标签在最后用/表示结束,link 标签用于将网页和其他文件进行连接
rel ="icon",rel属性表示即将连接的文件与当前网页的关系 , 属性值选择icon表示即将连接的文件是当前网页的图标,rel是标签的属性,“icon”是标签的属性值 属性值必须用引号引起来href=""表示所要连接的图片地址
二.body中的各种标签
1.从写法上,HTML标签分为成对标签和自闭合标签(空标签)
①成对标签:标签成对出现有开始标签就有结束标签,内容包裹在两个标签之间
②自闭合标签(空标签),只有一个标签用/标识标签的自动闭合。
2.从功能上,HTML标签分为块级标签和行级标签
【块级标签和行级标签的区别】
1.块级标签会自动换行,前后隔一行 行级标签不会自动换行,从左向右依次排列
2.块级标签默认宽度都是100% 行级标签宽度由里面的文字撑开
3.块级标签可以设置宽度高度内外边距等属性 行级标签不能设置上述属性
基本块级标签
块级标签自动换行 前后隔一行
1.h标签:自动加粗 h1最大 h6最小
代码示例为
这是h1标签

这是h2标签

这是h3标签

这是h4标签
这是h5标签
这是h6标签
2.hr标签 表示水平线标签
代码示例为
3.p标签表示段落标签,没有特殊含义,仅仅表示当前文字是一个段落
代码示例为
这是一段文字这是一段文字
4.br 标签表示换行符号,代码中直接敲回车,并不能在网页中显示 表示空格但是网页开发中尽量不用
5.blockquote表示引用标签,表明当前文字引用自其他地方,浏览器会默认向右缩进显示但可以通过CSS进行调整 cite属性表示引用的来源,通常是一个网站的地址
代码示例为这句话是我引用的
6.pre标签表示预格式标签,会保留代码中的回车缩进空格等,并在网页中显示pre标签最常用于在网页中展示代码,保留代码格式
代码示例为
这是一段文字
这是一段文字
这是一段文字
这是一段文字
7.有序列表:ol (order list) 有序列表中的每一项用li表示type属性表示序号的类型:1表示数字, A/a表示字母,i/I表示罗马数字
代码示例为
www
www
www
8.无序列表:ul unorder list有序列表中的每一项用li表示type属性表示序号的类型:circle表示。disc表示.square表示正方形
代码示例为
第一项
1-1
1-2
1-3
第二项
第三项
9.定义描述列表dl 使用dt表示标题 使用dd表示描述项 标题一般只有一个,描述项可以有多个标题顶格显示,描述项相对于标题向右缩进显示
代码示例为
标题
描述项
描述项
描述项
10.图片组合标签figure 用于将图片与下方的标题进行包裹,图片用img表示,标题用figcaption表示
代码示例为
图片标题
11.分区标签div (px代表像素)是网页开发过程中最常用的标签,div标签可以包裹任何标签,通常配合css使用
代码示例为
分区
基本行级标签
1.span标签 用于包裹行内的文字,没有其他特殊的含义,可以配合CSS修改某一部分字体的样式
代码示例为文字
2. 倾斜加粗标签
em,strong,i,b的区别
①em和i都能倾斜 strong和b都能加粗,但是em和strong多了一层强调的含义。(强调的作用:可以让搜索引擎抓取网页的重点内容,实现代码的语义化)
②em和strong都是强调,但是em显示为倾斜,strong显示为加粗,而且strong的强调含义要比em更高
3.引用标签
常见的引用标签blockquote/q/cite的区别
①从显示效果上,blockquote是块级标签而且整段缩进,q为加引号,cite显示为倾斜
②从功能上,blockquote用于引用一整段内容,q标签用于引用一句话,cite通常用于书画名,作品名等标题引用
4. 图片标签 img
【路径的表示方法】
1.网络图片地址,但不建议使用
2.使用图片在本机的绝对路径,但是严禁使用。因为绝对路径使用file://协议引入图片 而网页使用的是 http://协议 ,所以无法访问file://协议引入的文件
3.使用相对路径,推荐使用的唯一方式
a.当图片在当前文件的下一层时,使用“文件夹名/图片名“表示
b.当图片在当前文件的同一层时,使用“图片名”表示
c.当图片在当前文件的上一层时,使用”../图片名“表示
注意:图片必须包含在项目目录里面,不能退出文件根目录
图片标签的各种属性
①src属性:表示图片的所在位置
②width/height 属性 图片的宽度高度
③title属性 当鼠标指上后显示的文字
④ait属性 图片无法加载时显示的文字,如果省略alt属性,则图片无法加载时显示title的文字
⑤align属性 图片两边文字的相对位置 top 文字居上 centenr文字居中 bottom 文字居下(默认)
5.超链接标签 a
①href属性 超链接即将要跳转的页面,可以是网络地址也可以是本地的HTML文件
②target属性 设置新页面打开的位置_self 当前页面打开(默认)_blank在新页面打开
③title 当鼠标指上后显示的文字
代码示例为这是一个超链接
[功能性链接]
youjianmailto 给指定邮箱发邮件
tenxunqqTencent 与指定QQ聊天
6.锚链接 点击超链接,跳转到指定位置(锚点)
①在页面指定位置定义一个锚点
② 将超链接的href属性,设置为#锚点名称点击我回顶部
③跳到其他其他页面位置的方式跳到其他其他页面位置
其他行级标签 (了解)
dfn标签 用于定义专业术语
abbr标签 用于定义缩写词,常配合dfn使用
code标签 声明当前为一段代码,配合pre标签使用。
var 标签 定义变量
代码示例为:x+y=z显示为 x+y=z
bdo标签 定义文字的显示方向使用dir属性控制文字显示:ltr从左往右显示 rtl从右往左显示
代码示例为:12345678显示为87654321
kbd标签 用于表示键盘输入的文字
sup标签 上标文本
sub 标签 下标文本
mark标签 显示为高亮文本
time标签 表示时间
表格标签
表格标签用 table表示,表格中的每一行用tr表示,一行中的每个单元格用td表示。