HTML基础(持续更新)
ctrl+/:添加注释语句;
aling=“center“:居中对齐;
<hr/>:水平线;
<hr size="2" :粗细;
corlor=”#ccccc":颜色;
<strong>:加粗标记;
<em>:倾斜;
<img src="图片路径”>:插入图片标记;
<body bgcolor="bisque">:更改背景颜色,在body标签中;
<body style="background-image:url(图片/页面背景.jpg);
background-repeat:no-repeat">:设置背景页面;
1<meta name="ketwords" content="网页关键字"; :在搜索时增加网页关键字;
2<meat name="description" contet="网页描述"; :设置网页描述怎加搜索量;
3<meat name="author" contet="网页作者"; :设置网页作者描述;
在头部<head>123</head>里面设置
align="center";:居中对齐代码;
align="left";;左对齐代码;
<br/>;换行标记;
<header>
<h1>sdsfs<h1>
</header>:这是页面头部内容的部分;
<nav>这是导航部分<nav>
<article></article>:页面左边主体内容
<section></section>:页面主体内容
<meta name="author" content="作者
标签分为单标签和双标签,<html></html>为双标签;
<br/>为单标签;
1标签的属性写在开始标签的内部;
2标签上可以存在多个属性;
3属性之间用空格隔开;
4标签名与属性之间必须以空格隔开,
5属性之间,没有顺序之分;、、
6绝对路径:指目录下的绝对位置,可以直达目标位置,
通常从盘符开始的路径,:
列如:盘符开头:D\zay01\images\1.ipg;
以及图片的网络地址:https//www.indd.cn/2018dad/adad/tp.gif;
相对路径:
)同级
直接编写, 例如:girl.png
加上./ 编写, 例如./girl.png
./代表当前目录,./girl.png代表在当前目录下查找
(2)下级
直接编写, 例如abc/girl.png
加上./ 编写, 例如./abc/girl.png
相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
(3)上级
../代表访问上级目录
假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png
注意:
1.路径中不要出现中文, 否则可能出现未知问题
音频标签:<audio src="./music.mp3" controls></audio>
1,src:音频的路径;
2,controls:显示播放的控件;
3,autoplay:自动播放;
3,loop:循环播放;
视频标签<video src="./video.mp4" controls></video>
1,src:视频的路径;
2,controls:显示播放的控件;
3,autoplay:自动播放(谷歌浏览器需要配合muted实现静音播放);
3,loop:循环播放;
超链接:<a href="网址" target="_blank">名字或者你要链接上的文字或图片</a>
属性名:target;
属性值:目标网页的打开形式;
_self:默认值,在当前窗口跳转(覆盖原网页);
_blank:在新窗口中跳转(保留原网页);
无序列表:
标签名 uI:表示无序列表的整体,用于包裹li标签;
标签名li:表示无序列表的每一项,用于包含每一行的内容;
. 列标的每一项前默认显示圆点标识;
注意点:uI标签中只允许包含li标签
li标签可以包含任意内容;
有序列表:
标签名ol:
表示无序列表的整体,用于包裹li标签;
标签名li:表示无序列表的每一项,用于包含每一行的内容;
列标的每一项前默认显示序号标识;
注意点:oI标签中只允许包含li标签
li标签可以包含任意内容;
自定义列表:
标签名:
dl:表示自定义列表的整体,用于包裹dt/dd标签;
dt:表示自定义列表的主题;
dd:表示自定义列表的针对主题的每一项内容;
dd前会默认显示缩进效果;
dl标签中允许包含dt/dd标签;
dt/dd标签可以包含任意内容;
表格的基本标签;
table :表格整体,可以用于包裹多个tr;
tr:表格每行,可用于包裹td;
td:表格单元格,可用于包裹内容;
注意点:标签的嵌套关系:table>tr>td
表格的相关属性:
border: 表格宽度;
width: 表格宽度;
height: 表格高度;
属性值都为数字;
表格标题和表头单元格标签
场景:在表格中表示整体大标题和一系列小标题;
其他 标签:
caption:表格大标题:表示表格整体大标题,
默认在表格整体的顶部居中位置显示;
th:表头单元格:表示一系列小标题,通常用于表格
第一行,默认内部文字加粗并居中显示;
注意点 :
caption 标签写在table标签内部
th标签书写在tr标签内部(用于替换td)标签;
表格的结构标签:
thead:表格头部;
tbody:表格主体;
tfoot: 表格底部;
注意点:
表格结构标签内部用于包裹tr标签;
表格的结构标签可以省略;
合并单元格:将垂直或者水平的单元格合并成一个
合并单元格步骤;
1,明确合并那几个单元格
2,通过左上原则,确定保留谁删除谁
上下合并—只保留最上面的,删除其他;
左右合并—只保留最左面的,删除其他;
给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
属性名 rospan 属性值:合并的单元格的个数:跨行垂直合并;
属性名 colspan 属性值:合并的单元格的个数:跨列水平合并;
注意点:
只有同一个结构标签中的单元格才能合并,不能
跨结构标签合并(不能跨:thead,tbody,tfoot)
浙公网安备 33010602011771号