HTML主要标签/H5新属性

HTML

主要格式

1 <html>
2 <head>
3 </head>
4 <body>
5 </body>
6 </html>

标签语义化

推荐使用双引号

a标签

1 <a href="#空 #top跳转 http:// xxx.zip">点此跳转</a>

img标签

1 <img src="./xx" alt="" title="">

table表格标签

1 <table cellpadding="20" cellspacing="20">
2 <tr>
3 <td>姓名</td>
4 <td>年龄</td>
5 <td>班级</td>
6 </tr>
7
8 <tr>
9 <td>王五</td>
10 <td> 18 </td>
11 <td> 3 班</td>
12 </tr>
13 </table>

特殊符号

1 空格&nbsp;
2 小于号<:&lt;

3 大于号>:&gt;

列表

有序列表（理解）

1 <ol>
2 <!‐‐ 这里面只允许放<li>标签不允许放其他的标签和文字 ‐‐>
3 <li>列表中第一个元素</li>
4 <li>列表中第二个元素</li>
5 <li>
6 <ol>
7 <li>第一个</li>
8 <li>第二个</li>
9 <li>第三个</li>
10 </ol>
11 </li>
12 <li><a href="#" target="_self"> 甚至可以加入链接哦</a></li>
13 </ol>
14

无序列表（主要）

1 <ul>
2 <!‐‐ 这里面只允许放<li>标签不允许放其他的标签和文字 ‐‐>
3 <li>列表中第一个元素</li>
4 <li>列表中第二个元素</li>
5 <li>
6 <ul>
7 <li> 1 </li>
8 <li> 2 </li>
9 <li> 3 </li>
10 </ul>
11 </li>
12 <li><a href="#" target="_self"> 甚至可以加入链接哦</a></li>
13 </ul>
14

自定义表

1 <dl>
2 <dt> 带头大哥 </dt>
3 <dd>小弟 1 </dd>
4 <dd>小弟 2 </dd>
5 <dd>小弟 3 </dd>

6 <dd>小弟 4 </dd>
7 </dl>

表单

1 <form action="xx.php" method="GET">
2 <input type="text" value id="id">
3 <input type="passord" value id="id">
4 <input type="" value id="id">
5 <select name="nian" id="">
6 <option value="未选择">‐‐请选择年</option>
7 <option value="2000"> 2000 </option>
8 </select>
9 </form>
type属性：
文本text；
密码password；
单选radio；
多选checbox；
重置reset；
按钮button......

块元素

例如

  • 独占一行

    宽 高 内外边距 可控

    宽度默认继承

    主要作为容器

    行内元素

    例如a strong b em

    一行可以是多个

    宽高无法设定

    默认宽度为自身宽度

    很内元素只能容纳文本或其他行内元素

    注：连接标签里不能放链接

    注：链接里可放块级元素，但最好把a转换成块级元素安全

    行内块元素

    例如 img input td 都是行内块元素

    可以一行多个（有缝隙）

    可以设置宽高

    宽度为默认

    HTML5新增

    <head>头部
<nav>导航栏
<article>内容
<section>部分区域
<aside>侧边
<footer>尾部
<audio>音频
<video>视频

    video常见属性

    autoplay="auto"  自动播放

muted="muted"  静音

controls="controls"  展示播放控件

height/width  宽高

loop="loop"  循环

src="./"  音频地址

poster=""  加载封面

    audio常见属性

    autoplay="auto"  自动播放

muted="muted"  静音

controls="controls"  展示播放控件

height/width  宽高

loop="loop"  循环

src="./"  音频地址

poster=""  加载封面


input表单新属性

type=”serch number email url...“

required="required"  内容不为空

placeholder="提示词"  提示文本

autofocus="autofocus"  自动获得焦点

autocomplete=”off“  关闭自动显示

multiple="multiple"  可提交多个文件

本文作者：朝颜浅语

本文链接：https://www.cnblogs.com/ommggg/p/15974081.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   朝颜浅语  阅读(27)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
➖
收起