HTML5基础语法

最新推荐文章于 2024-06-18 21:14:33 发布

Ev-lein

最新推荐文章于 2024-06-18 21:14:33 发布

阅读量491

点赞数

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/weixin_46766062/article/details/121860822

版权

HTML5

字体样式

< h1>< h1>
< hgroup>< /hgroup>: 当有多个h标签试试，用此标签把多个标题标签放进去
:加粗字体
:斜体
:让字体变小一点
:段落标签
< del>< /del>:以加下划线的形式删除
< ins>< /ins>:新增文字或内容，会有下划线或其他形式作为标记
< s>< /s>:这些内容是不被提倡使用，但不是被删除的
:上标例：a的平方
:下标
:高亮特别强调显示

短语格式

em强调
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

< q>

玉泉 Camps

浙江 U

< /q>

< /blockquote>

< /address>

< address>地址标签里面可以放多行，显示为斜体，但是如果不加 就会显示在同一行里面。

< 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>将被颠倒的文字顺序颠倒回来

小于号 &lt lessthan

大于号 &gt

and本身 &amp

空格 &nbsp

三个空格 &nbsp ；&nbsp ；&nbsp

L&uuml ;

L&Uuml ;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NtuKPgB9-1639127448209)(HTML5.assets/Snipaste_2021-12-05_14-16-59.png)]

带圆圈的c（版权符号） &copyright

列表

无序列表： (Unordered List) (List Item)

< ul>

< li>红茶< /li>

< li>咖啡< /li>

< li>可乐< /li>

< /ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKoY4gJA-1639127448210)(HTML5.assets/Snipaste_2021-12-05_14-22-45-16386854219161.png)]

有序列表： (Ordered List) (List Item)

< 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以后能更改。

若给标签起一个id,如,若要直接跳转到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>的字要正常一点，靠近左侧

Ev-lein

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础语法

HTML5字体样式< h1>< h1>< hgroup>< /hgroup>: 当有多个h标签试试，用此标签把多个标题标签放进去:加粗字体:斜体:让字体变小一点:段落标签< del>< /del>:以加下划线的形
复制链接

扫一扫