HTML5

原创已于 2025-02-28 21:13:48 修改 · 657 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#html5

于 2024-10-27 12:31:53 首次发布

一.排版标签

标签名：h1--h6（标题，双标签，加粗）

p（段落，双标签，不加粗，块级元素，独占一行）
div（没有任何含义，用于整体布局，双标签）
1.h1最好写一个，h2-6能适当多写
2.h1-h6不能相互嵌套
3.p标签很特殊，里面不能有h1-h6，p，div

二.文本标签

常用文本标签
标签名：em（着重强调内容，具有斜体效果，双标签）
strong（十分重要的内容，强调，具有加粗的效果，用于文本，双标签）
span（没有语义，用于包裹短语的容器，双标签）
（文本标签通常都是行内元素）

三.不常用文本标签

cite（作品标题，双标签）
del（删除的文本，表达为文本中间画一条横线，表示删去，双标签）
ins（插入的文本，双标签）
sup和sub（上标文本与下标文本，双标签）
b（起强调作用，加粗，双标签）
small（附属细则，双标签）
code（一段代码，双）
var（标记变量，与code一起用，双）
samp（从正常的上下文中将某些内容提取出来，双）
kbd（表示文本都是从键盘输入的，常用于计算机相关的手册中，双）
bdo（可以更改文本方向，ltr从左到右，rtl从右到左，双）
abbr（缩写，最好配上title属性）
<abbr title＝“英雄联盟”>LOL</abbr>
将鼠标放在LOL的图标上会显示”英雄联盟“几个字
q（短引用，双）
blockquote（长引用，双，块级元素）
address（地址信息，双，块级元素）

除了address和blockquote是块级元素，其他文本标签是行内元素

四.块级元素与行内元素

块级元素:独占一行（排版标签都是块级元素）
行内元素:不独占一行（文本标签大多数是行内元素）
1.块级元素中能写行内元素和块级元素
2.行内元素中能写行内元素，但不可以写块级元素

五.图片标签

标签名:img（行内元素）
常用属性:src（图片路径，又称图片地址，图片的具体位置）
alt（描述图片）
width（图片宽度）
height（图片高度）
单位是px（像素）
<img src＝“奥特曼.jpg”,alt ＝“奥特曼你相信光吗？”>

六.路径的分类

相对路径（以当前的位置为参考，去建立路径）
符号 ./含义是同级
<img src＝”./怪兽.jpg“>
/含义是下一级
<img src＝“./下一级文件名/喜羊羊.jpg”>

../含义是上一级
<img src=”../怪兽.jpg“>
(相对路径依赖的是当前位置，后期若是调整了文件位置，那么文件的路径也要修改)
绝对路径(以根位置为参考点去建立路径)
1.本地绝对路径:E:/a/b/c/奥特曼.jpg
网络绝对路径:http://www.baidu.com
<img src=“http://www.baidu.com”，alt=” “>

七.常见图片格式

1.JPG
2.png
3.bmp
4.webp
5.base64

6.GIF(支持透明背景，支持动态图）

八.超链接

作用:从当前页面进行转换
标签名:a(双标签，表示超链接）
常用属性:href(要跳转的具体位置)
target(跳转时如何打开页面)
常用值:_self(在本页面中打开)和_blank(在新页面处打开)，self和blank都不写时默认self
<a href=“https://www.jd.com/”target=”_blank“>去京东</a>
<a href=”./10_HTML排版标签.html“target=”_blank“>去看排版标签</a>

九.跳转到文件

1.若浏览器不能打开文件，则会触发自动下载
2.若想强制触发下载，则需download属性
<a href=“./resource/小电影.mp4”download=”电影片段.mp4“>下载电影</a>

十.跳转到锚点

作用:网页中的标记点，具有跳转的作用
第一种<a href=”#htl“>看灰太狼</a>
<a name=”htl“></a>
第二种其他标签配合ID属性
<p id=“atm”>我是一只狼</p>
<a href=“#atm”>看灰太狼</a>
标红处一定要一致且对应，跳转锚点一定不能漏掉#

<a href=”#“>回到顶部(具有刷新页面的功能)

十一.列表

1.有序列表
<ol>
<li> </li>
<ol>

表示为

可以嵌套，li标签最好写在ol和ul中，不要单独使用
2.无序列表
<ul>
<li> </li>
</ul>

表示为

3.自定义列表
<dl>
<dt></dt> <dd></dd>
</dl>
dd是术语描述，dt是术语名称，dl是自定义列表

涉及标签:table(表格)

caption(表格标题)

thead(表格头部)
tbody(表格主体)
tfoot(表格注脚)
tr(每一行)
th，td都是单元格(th用于表格头部，td用于表格主题表格注脚)

table可用属性：
cellspacing(更改单元格与单元格之间的间距)
cellpadding(单元格内容与单元格边界的间距)
<table border=“1px”>(有了border表格就有边框，数字越大最外层边框越粗)
bgcolor(单元格，行以及表格的背景色)
background(表格的背景图片)
bordercolor(表格边框的颜色)
align(水平对齐方式)
height(表格的高度)
width(表格的宽度)

td，th可用属性:
width(设置单元格的宽度，同列所有单元格全部受影响)
height(设置单元格的高度，同行所有单元格全部都受影响)
align(设置单元格的水平对齐方式)
align=“right”或”left“(居左或居右)
align=“center”居中
valign(设置单元格的垂直对齐方式）

valign=”top“或”bottom“(上部或下部)
valign=”middle“(垂直)
middle➕center＝水平居中

rowspan(要跨的行数)
rowspan=”5“
colspan(要跨的列数)
colspan=“5”
bgcolor(单元格与行的颜色)