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 to the header. The nav tag can be used together with the
html Code:
<header>
<p>这是一个header部分</p>
<nav> <!--导航链接标签-->
<ul> <!--配合ul使用-->
<li>首页</li>
<li>关于</li>
<li>产品</li>
<li>联系</li>
</ul>
</nav>
</header> Copy after login
css code:
/*定义nav的高和颜色*/
nav{
height:30px;
background-color:#F33;
margin-top:100px;}
/*正常设置li的样式*/
li{
list-style:none;
float:left;
width:100px;
height:30px;
} Copy after login
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>文章标题</h2><!--标题-->
<p>文章内容文章内容文章内容文章内容文章内容文章内容
<br>
文章内容文章内容文章内容文章内容文章内容文章内容<br>
文章内容文章内容文章内容</p>
</article> Copy after login
css style:
article{
background-color:#F33;
width:500px;
text-align:center; /*水平居中*/
margin:0px auto;
} Copy after login
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> Copy after login
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> Copy after login
(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> Copy after login
(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> Copy after login
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> Copy after login
<span contextmenu="cai">单击我试试</span> Copy after login
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>标题</h3>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
</hgroup> Copy after login
# #(7) Define small text
This tag is actually similar to other bold tags
<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small> Copy after login
(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> Copy after login
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是进行这是的内容--> Copy after login
(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"> Copy after login
After the value value exceeds the range
<meter min="0" max="10" value="8" low="2" high="7"> Copy after login
(11) The label of the progress bar<progress id="jindu" max="100" value="0"></progress>进度条 Copy after login
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> Copy after login
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"