HTML5基础（二）
<h1 style="text-align: center">1.HTML5中的一些标记</h1><h2>1.水平线标记</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><hr属性="属性值" />属于一个单标记,在网页输入一个<hr/>，就添加了一条默认样式的水平线。
作用：将段落与段落隔开，使文档结构清晰，层次分明
</pre>
</div>
<p> 可以对其做以下属性的改变</p>
<p>1.align 设置水平线的对齐方式 left right center三种</p>
<p>2.size 设置水平线的粗细 以像素为单位，默认为2px</p>
<p>3.color 设置水平线的颜色 可用颜色名称、#RGB、rgb(r,g,b)三种方式</p>
<p>4.width 设置水平线的宽度 可以是确定的像素值，也可以是浏览器窗口的百分比</p>
<h2>2.换行标记</h2>
<p><span class="bjh-p"><br>或者<br/></span></p>
<div class="_1T4GB1ESohOqTGNmwCAcuf ">
<p><span class="bjh-p">作用就是在该处插入换行符，该标签后的内容将从下一行开始</span></p>
<p><span class="bjh-p"><img src="https://img2020.cnblogs.com/blog/2615564/202111/2615564-20211108193322736-1900633910.png"></span></p>
<p> </p>
<h2>3.文本格式标记</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><b> <b/> 和 <strong> <strong/> 文字以粗体方式显示（b定义文字粗体，strong定义强调文本）
<i> <i/> 和 <em> <em/> 文字以斜体方式显示（i定义斜体字，em定义强调文本）
<s> <s/> 和 <del> <del/> 文字以加删除线方式显示（HTML5不建议使用s）
<u> <u/> 和 <ins> <ins/> 文字以加下划线方式显示（HTML5不建议使用u）</pre>
<img src="https://img2020.cnblogs.com/blog/2615564/202111/2615564-20211108194509055-1412582949.png"></div>
<h2> 4.图像标记</h2>
<h3>4.1常用图像格式</h3>
<p>目前网页上常用的图像格式主要有GIF、JPG、PNG三种</p>
<h3>4.2图像标记<img/></h3>
<div class="cnblogs_code">
<pre><img src=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">图像url</span><span style="color: rgba(128, 0, 0, 1)">"</span> /> <br>src 加入图像的路径<br>alt 图像不能显示时的替换文本<br>title 鼠标悬停时显示的内容</pre>
<img src="https://img2020.cnblogs.com/blog/2615564/202111/2615564-20211108205430328-1464142193.png">
<p id="1636376067670">width 设置图像的宽度</p>
<p>height 设置图像的高度</p>
<p>border 设置图像边框的宽度</p>
<p>vspace 设置图像顶部和底部的空白（垂直边距）</p>
<p>hspace 设置图像左侧和右侧的空白（水平边距）</p>
<p>align left 将图像对齐到左边</p>
<p>right 将图像对齐到右边</p>
<p>top 将图像的顶端和文本的第一行文字对齐，其他文字居图像下方</p>
<p>middle 将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方</p>
<p>bottom 将图像的底部和文本的第一行文字对齐，其他文字居图像下方</p>
</div>
<h1 style="text-align: center">2.HTML5中常见的一些元素与属性</h1>
<h3>1.header元素</h3>
<p>具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容，通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或其他相关内容。</p>
<p>语法格式为：</p>
<p><img src="https://img2020.cnblogs.com/blog/2615564/202111/2615564-20211108213337073-1197954256.png"></p>
<h3 id="1636378414365"> 2.nav元素</h3>
<p>该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。</p>
<p>示例：</p>
<p><img src="https://img2020.cnblogs.com/blog/2615564/202111/2615564-20211108214003225-604222541.png"></p>
<p id="1636378800596"> 在上列这段代码中，通过在nav元素内部嵌套无序列表ul来搭建导航结构。</p>
<h3>3.article元素</h3>
<p>代表文档，页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志，一条新闻或用户评论等。article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。</p>
<p>用法示例：</p>
<p><img src="https://img2020.cnblogs.com/blog/2615564/202111/2615564-20211108220227752-333288107.png"></p>
<h3>4.details元素和summary元素</h3>
<p>details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用，作为details元素的第一个子元素用于为details定义标题。标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。</p>
<p>点开前后的效果：</p>
<p><img src="https://img2020.cnblogs.com/blog/2615564/202111/2615564-20211108222521783-642603436.png"></p>
<h3>5.progress元素</h3>
<p>用于表示一个任务的完成进度。</p>
<p>progress元素常用的属性有两个</p>
<p>1.value：已经完成的工作量</p>
<p>2.max：总共有多少工作量</p>
<p>要注意的是value和max的属性值要大于0，而且value的值要小于max的值</p>
<p>示例：<img src="https://img2020.cnblogs.com/blog/2615564/202111/2615564-20211108223356470-2096224748.png"></p>
<p>示例中的value的值为50，max的值为100，所以进度显示到50%</p>
<h3> 6.mark元素</h3>
<p>主要作用是在文本中高亮显示某些字符，以引起用户的注意</p>
<p>示例：</p>
<p><img src="https://img2020.cnblogs.com/blog/2615564/202111/2615564-20211109150824710-795762822.png"></p>
</div><br><br>
来源：https://www.cnblogs.com/wenwenfff/p/15526735.html
頁:
[1]