HTML5
字体样式
-
< h1>< h1>
-
< hgroup>< /hgroup>: 当有多个h标签试试,用此标签把多个标题标签放进去
-
< b>< /b>:加粗字体
-
< i>< /i>:斜体
-
< small>< /small>:让字体变小一点
-
< p>< /p>:段落标签
-
< del>< /del>:以加下划线的形式删除
-
< ins>< /ins>:新增文字或内容,会有下划线或其他形式作为标记
-
< s>< /s>:这些内容是不被提倡使用,但不是被删除的
-
< sup>< /sup>:上标 例:a的平方
-
< sub>< /sub>:下标
-
< mark>< /mark>:高亮特别强调显示
短语格式
-
< em>em强调< /em>
-
< strong>strong着重< /strong>
-
< dfn>definition定义< / dfn>
-
< code>code代码< /code> 字体是一种代码的字体
-
< samp>samp例子代码< /samp>
-
< kbd>bdb用户输入< /kbd>
-
< var>variable变量< /var>
-
< cite>cite引用< /cite>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VWXADNCd-1639127448201)(HTML5.assets/Snipaste_2021-12-05_13-23-44.png)]
特殊格式
address
blockquote
- < address>
< blockquote>
Rm 401 CKP West Wing < br>
< q>
玉泉 Camps < br>
浙江 U
< /q>
< /blockquote>
< /address>
< address>地址标签里面可以放多行,显示为斜体,但是如果不加< br>就会显示在同一行里面。
< blockquote>用作缩进效果 大缩进
< q>是一种小引用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HEg9yVEX-1639127448203)(HTML5.assets/Snipaste_2021-12-05_13-50-36.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yi4SJEIX-1639127448204)(HTML5.assets/Snipaste_2021-12-05_13-51-57.png)]
code
pre
< code>
- < pre>
int main(){
printf(“helloworld”)
return 0;
}
< /pre>
< /code>
< pre>:不做内容多大格式化,在HTML5文档里面是什么样子,就显示成什么样子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fQPUaqjp-1639127448205)(HTML5.assets/Snipaste_2021-12-05_13-53-37.png)]
属性
hr
- < hr> 分割线没有对应的结束标记
< hr width=50%>宽度为浏览器宽度的50%, < hr width=50>表示宽度为50px
< hr width=50% align=left size=1> 宽度为浏览器宽度的50%,左对齐,高度为1px的线
addr
- < addr title=“中华人民共和国”>PRC< /addr>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8IvIh6Zl-1639127448206)(HTML5.assets/Snipaste_2021-12-05_14-02-01.png)]
bdo
-
< bdo dir=rtl>舞厅被装饰成南方庄园的风格< /bdo>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VGuTccDo-1639127448207)(HTML5.assets/Snipaste_2021-12-05_14-07-11.png)]
< bdo dir=rtl>舞厅被装饰成< bdi>南方庄园< /bdi>的风格< /bdo>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qVG94bCX-1639127448208)(HTML5.assets/Snipaste_2021-12-05_14-09-14.png)]
< bdo>< /bdo>将文字的顺序颠倒
bdi
其他
< bdi>< /bdi>将被颠倒的文字顺序颠倒回来
小于号 < lessthan
大于号 >
and本身 &
空格  
三个空格   ;  ; 
Lü ;
LÜ ;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NtuKPgB9-1639127448209)(HTML5.assets/Snipaste_2021-12-05_14-16-59.png)]
带圆圈的c(版权符号) ©right
列表
< ul>
< li>红茶< /li>
< li>咖啡< /li>
< li>可乐< /li>
< /ul>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKoY4gJA-1639127448210)(HTML5.assets/Snipaste_2021-12-05_14-22-45-16386854219161.png)]
< ol>
< li>红茶< /li>
< li>咖啡< /li>
< li>可乐< /li>
< /ol>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zPPSfpdt-1639127448212)(HTML5.assets/Snipaste_2021-12-05_14-28-14.png)]
< ol start=2> start若从-1开始,则为-1 0 1
< li>红茶< /li>
< li>咖啡< /li>
< li>可乐< /li>
< /ol>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IeUNdl4r-1639127448213)(HTML5.assets/Snipaste_2021-12-05_14-30-43.png)]
无序列表和有序列表可以嵌套使用
图片
图片在HTML5里面实际上是一个字符,占据一个字符的位置
- < img src="(图片文件名.格式(也可以直接写上图片的url))" alt="(没有加载出来时显示的内容)" width=50%(width=200px) heigth=200px />
- < iframe src=“https://www.baidu.com/” heiht=400 >< /iframe>
在本地开一个小窗口,来显示其他网站的页面
链接
< a herf=“https://www.baidu.com/” target=_black>百度一下< /a>
如果不加协议名称,浏览器则会认为时在当前目录下的。
在HTML5里面,herf标签的超链接文字会有其特殊的颜色,并且有下划线,在学习CSS以后能更改。
若给< p>标签起一个id,如< p id=here>< /p>,若要直接跳转到here的内容,则可以< a herf="#here"> here< /a>
_black 是指以一个新窗口打开
<body>
<img src="C:\Users\asus\IdeaProjects\HTML" width="300" height="900"
usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,300,900" herf="https://www.baidu.com"
alt="news">
<area shape="circle" coords="50,50,300" herf="https://www.163.com"
alt="home">
</body>
在第一个area区域里面点击,转到https://www.baidu.com
在第二个area区域里面点击,转到https://www.163.com
在计算机坐标系里面,(0,0)是在左上角
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>biaoge</title>
</head>
<body>
<p>
<table border="1"> <!-- order="1"才会有格子线-->
<caption>表格</caption>
<thead> <!--thead的作用是,当表格特别长时,无论怎样翻,表头都会留出来-->
<tr> <!--tr表示一行-->
<th>OS</th> <!--th(tablehead)表示表头-->
<th>Chinese</th>
<th>French</th>
</tr>
</thead>
<tbody>
<tr>
<td>IOS15</td> <!--td表示行当中的一个格子,即内容-->
<td>YES</td>
<td>YES</td>
</tr>
<tr>
<td>Windows</td>
<td></td>
<td></td> <!--若不加后面这两行代码,那么第三行就只有一个单元格-->
</tr>
<!--为了解决上面不自动补充空单元格的问题,可以用一下代码,将有内容位置的单元格大小设置为3个单元格的大小-->
<tr>
<td colspan="3">Windows</td>
</tr>
</tbody>
<tfoot>
</tfoot>
<!--通过thead,tbody,tfoot将表格的内容分为三段:表头,中间的内容和脚注
当表格特别长时翻转,表头和脚注会保持在页面上-->
</table>
</p>
</body>
</html>
< th>的字要粗一点,内容居中
< td>的字要正常一点,靠近左侧
下代码,将有内容位置的单元格大小设置为3个单元格的大小–>
Windows
< th>的字要粗一点,内容居中
< td>的字要正常一点,靠近左侧