Tips on html5 that are easily overlooked

This time I will bring you some little knowledge about html5 that is easily overlooked. What are the little things about html5 that are easily overlooked? The following is a practical case. Let’s take a look.

Set webstorm to wrap the input content after it exceeds the screen

##

---

dividing line

line wrap

2 .base tag: specifically used to uniformly specify how all

hyperlinks(a tags) in the current web page need to be opened

Note: The base tag must be written between the start tag and the end tag of the head tag

3. Fake connection: it will not jump after clicking, we call it a fake link!

1) <a href="#">百度一下,你就知道</a>  #的假链接会自动回到网页的顶部
2) <a href="javascript">百度一下,你就知道</a>  而Javascript的假链接不会自动跳转到网页顶部

The difference between the two: #’s fake link will automatically return to the top of the web page, while Javascript’s fake link will not automatically jump to the top of the web page.

4. Anchor point:

If you want to jump to the specified location through the a tag, you must tell the a tag a unique ID number, so that the a tag can find the target location to jump to in the current interface.

1). Add an id attribute to the label of the target location, and then specify a unique value;

2). Tell the a label that the unique province certificate number corresponding to the target label you need to jump to is How much.

a tag href="#center"Set id="center"

3). Jump to the specified position in the new interface href="13-anchor.html#bottom" target="_blank"Open in the new interface

In the original interfaceJump to the specified position in the new interfaceWrite this in the target interface< h1 id="bottom">I am the anchor test interface 333333

5. List tag:

Unordered list>>> Application scenario : a). News list b). Product list c). Navigation bar

Shortcut:

ul>li*3<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li></ul>

Ordered list >>> Application scenario: Ranking

<ol>
    <li>演员</li>
    <li>小丑</li>
    <li>龙卷风</li>
    <li>青花瓷</li></ol>

Definition list>>> Application scenarios: a) . Create relevant information at the end of the website b) . Mix images and text

dt dd can also nest other tags

Shortcut: dl>(dt+dd)*2

  <dt>北京</dt>  //definition title 定义标题    <dd>中国的首都</dd>  //definition description 定义描述    <dt>上海</dt>
    <dd>富人的集中地</dd></dl>

6. Table label

<!--默认情况下,边框宽度为0--><table border="1">
    <!--tr:代表整个表格中的一行数据-->
    <tr>
        <!--td:代表一行中的一个单元格-->
        <td>姓名</td>
        <td>年龄</td>
        <td>籍贯</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>重庆</td>
    </tr></table>

Thin line table

< !--Thin-line table: It is unreliable to realize a thin-line table by specifying

margin as 0 on the table. In fact, it merges two lines into one line,so It looks very uncomfortable, so set it in the following ways-->