常用标签:
标题标签:
h1---h6 默认样式 加粗、变大 h1最大,h6最小
作用:可以帮助浏览器检索页面,推广的重要性仅次于title标签
段落标签:
<p></p> 行与行之间有较大间距,独占一行,是块元素。只放文字或图片
图片标签:
< img src=” ” alt= “ ” width=” ”>
src引入图片的路径 ./(在同一目录下)或../(不在同目录下)
alt对图片的描述,当引入不成功时,显示文字
width 设置图片宽度、hight 设置图片高度
注意:一般情况不会同时设置宽高,防止出现变形
设置一个宽或高,另一个设置自适应
<hgroup>标签:
用来标题分组 从样式上看,加不加hgroup没有区别,但从语义上看,两者就有关系了
<em>标签:
表示语气加重 默认样式 有一点点倾斜,不独占一行,行内元素
<strong>标签:
表示强调 默认样式 有一点点加粗,不独占一行,行内元素
blockquote标签:
引用别人的话,长引用,会换行,块元素
q标签:
短引用
<hr>标签:
分隔线 自结束标签
<br>标签:
换行标签,强制换行,自结束标签
<del>标签:
表示一个删除的内容
<center>标签:
文本居中效果
<div>标签:
用来布局,没有意义的块元素,只表示一个区块
<span>标签:
没有语义,一般就用来包裹文字,行内元素
布局标签
header标签 网页的头部
main标签 网页的主体部分
footer标签 网页的底部
nav标签 网页的导航
aside标签 和主体相关的内容,侧边栏
article标签 文章之类的
section标签 独立的区块,上面的标签都不合适,就用这个,一般用来代替div
列表标签
列表标签分为三种,分别为:有序列表、无序列表和定义列表
一、有序列表:
ol创建,li表示列表项
二、无序列表
ul创建,li表示列表项
disc 默认值,实心的原点
square 实心的方块
circle 空心的圆
三、定义列表
Dl创建,dt下定义,dd解释定义
有序列表、无序列表默认样式:左边有间距,有项目符号
type属性改变项目符号
列表可以相互嵌套
图片标签
< img src=” ” alt= “ ” width=” ”>
src 是引入图片的路径 ./(在同一目录下)或../(不在同目录下)
alt 是对图片的描述,当引入不成功时,显示文字
width 是设置图片宽度
hight 是设置图片高度
注意:一般情况不会同时设置宽高,防止出现变形:
设置一个宽或高,另一个设置自适应
超链接标签
超链接: 可以是字、图片、一句话、表格等等
< a href=””> 行内元素
2个功能、2个属性、1个补充
功能:1.从一个页面跳到另一个页面
2.当前页面进行跳转
属性:
1.Href属性:设置超链接跳转的地址
填写超链接跳转地址:
相对地址:通过./进行跳转,./是默认的路径,可以省略
通过../跳出当前目录,如果没有,再跳
绝对地址:如京东、淘宝等
2.Target属性:控制超链接打开的方式
_self(锚点功能) 在当前页面打开 默认写法
_blank 在新网页打开超链接
补充:
锚点功能:
1.回到顶部:href属性设置为#即可
2.去任意位置:id=、href=#id
第一步:给要去的位置打个标记
第二步:在href属性的属性值,将标记写上 #id属性值
注意:id属性值:不能数字开头,不要是汉字,独一无二的
空链接: 1.加个# 2.JavaScript:;
行内与块元素
元素区分为:块元素、行内元素、行内块元素
块元素(block element):常用来布局、独占一行、从上到下顺序排列、宽度是父元素的100%、高度默认是被内容撑开的
什么都能放,块元素、行内元素、行内块元素
例如:div、h1—h6、p、header、footer、nav
行内元素(inline element):常用来包裹文字,不会独占一行,从左到右排列,宽高都是被内容撑开的,不可以自定义宽高
只能放行内元素如文字
例如:span、em、啊、
行内块元素:兼容块元素和行内元素的特点,不会独占一行、可自定义宽高
特殊的块元素p标签,一般放文字或图片
特殊的行内元素a标签,里面什么都能放
元素之间可以相互转换---display属性
Block 成块元素
Inline 转成行内元素
Inline-block 转成行内块元素
None 将元素隐藏
音视频标签
Audio标签:引入一个外部音频文件
Controls:控制是否允许用户点击播放
Loop:是否循环播放
Video标签:引入一个外部视频文件
Autoplay 自动播放 这个属性除了ie,大部分浏览器已经废弃
图片格式
Jpeg(支持颜色多)、gif(动图)、png(转为网页而生)、webp(兼容性不好)、base64(和网页一起加载的图片)
网站解析代码顺序:先解析结构、解析css、解析其他:js,图片