Home >Web Front-end >H5 Tutorial >Tips on html5 that are easily overlooked

Tips on html5 that are easily overlooked

php中世界最好的语言
php中世界最好的语言Original
2018-03-13 09:38:582034browse

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

Tips on html5 that are easily overlooked

##
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 interfaceI 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

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-->

The above is the detailed content of Tips on html5 that are easily overlooked. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn