2. 技术
    3. HTML5基础

    HTML5基础

    技术2022-07-10  108

    HTML基础

    HTML5新建文件代码HTML基本标签强调标签特殊字符标签图像及超链接标签列表元素结构元素分组元素页面交互元素progress元素time元素cite元素全局属性

    HTML5新建文件代码

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>新建</title> </head> <body> </body> </html>

    这就是html新建是的基础代码。在body标签内写内容，在head标签内写入css样式。在html里标签基本都是成对出现的但也有些是单个的具体看下面介绍。

    HTML基本标签

    HTML标签包括标题标签，段落标签，图片标签超链接等很多标签以下将详细介绍各种标签及其用法。

    首先介绍的是标题和段落标记h标签和p标签 ，h标签有h1-h6这六种标题大小设置其标题大小依次递减，下面是其运行后的效果；

    强调标签

    强调标签；em，strong，mark标签等，em标签表示斜体，strong标签表示加粗，mark标签实在文本中高亮显示某些符号；

    特殊字符标签

    html中方一些特殊字符标记如 空格符，大于号，小于号等 下面通过一个表格对常用的一些特殊字符标签进行说明； 特殊字符字符代码空格 小于号<大于号>平方²立方³

    图像及超链接标签

    图像标记和超链接标记及锚点链接 图像标记: <img src="图片路径" alt="当图片不能显示时显示的文本"/ >

    超链接标记：

    <a href="链接到的路径" > 链接显示的名字</a>；

    锚点链接：当一个网页的页面内容过多，页面过长时浏览网页将需要不断拖动动条。锚点链接可以快速定位到目标内容，提高检索效率。当点击网页标题2会立即跳转到网页标题2的内容地方无需自己滑动滚动条。

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>锚点链接</title> </head> <body> 课程介绍： <ul> <li><a href="#1">网页标题</a></li> <li><a href="#2">网页标题2</a></li> </ul> <h id="1">网页标题</h> <p>省略</p></br></br></br></br></br></br></br> <h id="2">网页标题2</h> <p>省略</p></br></br></br></br></br></br></br> </body> </html>

    列表元素

    列表元素； 列表元素代码无序列表ul,li有序列表ol,li定义列表dl,dt,dd

    结构元素

    结构元素； header元素：一种具有引导和导航作用的元素，该元素可以包括所有通常放在页面头部的内容； nav元素：用于定义导航栏链接； article元素：代表文档或页面与上下文不相关独立部分，article元素通常使用多个section元素进行划分，一个页面article元素可以出现多次； section元素：对页面上的内容进行分块； footer元素：用于定义一个页面 或者区域的底部，它可以包括所有通常放在页面底部的内容； aside元素：用来定义当前页面或者文章的附属内容；

    分组元素

    分组元素；figure元素和figcaption元素，figure元素用于定义独立的流内容（图像，图表，照片，代码等），figcaption元素用于为figure元素组添加标题，一个figure内最多允许使用一个figcaption元素；hgroup元素用于将多个标题组成一个标题组，通常放在header元素中，figcaption也与hgroup结合使用；

    页面交互元素

    8.页面交互元素；details元素，summary元素（用于定义第一个子元素时details的标题），当用户点击标题时会显示或隐藏details中的内容，具体用法如下：

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>details，summary使用</title> </head> <body> <details> <summary>显示列表</summary> <ul> <li>列表1</li> <li>列表2</li> </ul> </details> </body> </html>

    代码效果图如下：

    progress元素

    progress元素：（进度条），progress元素有两个属性值： 属性值 | 含义 -------- | ----- value | 已经完成的工作量 max | 总共有多少工作量 以下代码运行后将会显示进度条 <h1>我的工作进展1</h1> <p><progress value="50" max="100"></progress></p>

    time元素

    10.time元素；time元素有两个属性

    属性值含义datetime定义相对于的时间或日期pubdate用于定义time元素中的日期/时间是文档的发布日期

    cite元素

    11.cite元素可以创建一个引用标记，用于文档参考文献的引用说明；

    全局属性

    12.全局属性；draggable属性用来定义元素是否可以被拖动有true和false两个值为true时可以被拖动。hidden属性用来定义元素是否被隐藏同样也有ture和false两个值为ture时表示隐藏该元素。spellcheack属性有ture和false两个值，主要针对input元素和textarea文本输入框，对用户输入的内容进行检查，为ture时进行检查（默认值）。contenteditable属性规定是否可编辑元素内容。

    Processed: 0.069, SQL: 9