Specifies where in the text it is appropriate to add line breaks. |
|
(1) Define the navigation link
It is also a meaningful label, it does not mean just adding this label somewhere With the navigation style, this is all meaningful. Add the menu tag
html Code:
<header>
<p>这是一个header部分</p>
<nav> <!--导航链接标签-->
<ul> <!--配合ul使用-->
<li>首页</li>
<li>关于</li>
<li>产品</li>
<li>联系</li>
</ul>
</nav>
</header>css code:
/*定义nav的高和颜色*/
nav{
height:30px;
background-color:#F33;
margin-top:100px;}
/*正常设置li的样式*/
li{
list-style:none;
float:left;
width:100px;
height:30px;
} In this way, the menu layout that was previously done only with p
(2) Define the article tag
You can use the article block tag to write articles, so use this tag to write articles in the section part, which can be used with
Common use
html code:
<article><!--文章块p-->
<h2 id="文章标题">文章标题</h2><!--标题-->
<p>文章内容文章内容文章内容文章内容文章内容文章内容
<br>
文章内容文章内容文章内容文章内容文章内容文章内容<br>
文章内容文章内容文章内容</p>
</article>
css style:
article{
background-color:#F33;
width:500px;
text-align:center; /*水平居中*/
margin:0px auto;
}This way you can write an article
(3) Define the grouping of media content and their titles
A. This tag can be used in conjunction with its matching tag , but the title
<figure>
<figcaption>标题</figcaption><!--配套-->
<p>标题内容</p>
</figure>
B must be written in the middle of . It can also be used in combination with
, where
is used to write the title, while is used to write the content. The display effect is also different from the effect of matching use<figure>
<dt>标题1</dt>
<dd>标题内容</dd>
</figure> (4) Define a dialog box or window
You can also use the dd and dt tags in this tag, the title and content of the dialog box, the dialog box has The first attribute is open, and the compatibility of this tag is not very good
<dialog open>
<dt>1问题</dt>
<dd>1答案</dd>
<dt>2问题</dt>
<dd>2答案</dd>
</dialog>
(5) Define a list or menu of commands
A. This tag can be used together with li
<menu>
<li>定义列表</li>
<li>定义列表</li>
<li>定义列表</li>
</menu>
B. You can add your own content to the right-click (only compatible with Firefox)
Union (define commands/menu items that the user can call from the popup menu) tag using
<menu type="context" id="cai">
<!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码-->
<menuitem label="菜单一" onclick="alert('这是菜单一')" icon="右键单击显示的图片"></menuitem>
</menu><span contextmenu="cai">单击我试试</span>
The desired menu item appears after right-clicking
Click the menu item and the content will pop up
(6) Title group
You can write some combinations of titles
for common use<hgroup><!--标题组-->
<h3 id="标题">标题</h3>
<h3 id="标题">标题1</h3>
<h3 id="标题">标题2</h3>
<h3 id="标题">标题3</h3>
</hgroup>
# #(7) Define small text
This tag is actually similar to other bold tags<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>
(8) Define the details of the element
The content inside can be used with the title and content tags<details>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
</details> Click on the details to see the title And the content is
(9) Define ruby comment
If you encounter a word you don’t recognize, you can use this Annotate Pinyin, but some compatibility is not very good, you can modify it at that time<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<!--<rp>是能够兼容的时候让括号不可见，不能兼容的时候让括号可见，rt是进行这是的内容-->
(10) Define the measurement within the predefined range
There are several attribute values, min="" max="" value="" low="" high="", where low and high are ranges. When the value range exceeds, different effects will be displayed
<meter min="0" max="10" value="4" low="2" high="7">
After the value value exceeds the range<meter min="0" max="10" value="8" low="2" high="7">
(11) The label of the progress bar
The maximum value is the length of the progress bar, and the value value is the displayed progress. Use it to create a dynamic progress bar<progress id="jindu" max="100" value="0"></progress>进度条
<script>
var pro = document.getElementById("jindu");
setInterval(function(){ pro.value+=1;},1000); //间隔1秒它的值加1
</script>The progress bar can be completed in this way, right? It is much better than writing only in js. Different browsers have different expressions
Related recommendations: "html video tutorial"