码迷,mamicode.com
首页 > Web开发 > 详细

认识html标签

时间:2017-07-15 18:00:13      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:创建   标记   单选   结构   input   footer   controls   说明   字符   

1.!DOCTYPE 文档结构类型

2.<html>开始标记
</html>闭合标记

3.charset 字符编码集

常用字符集:UTF-8、GB2312、GBK等

4.<meta>单标记

5.<h1>h1到h6的标题

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>

6.<p>段落

7.<ul>无序列表

  • 不要独自驾车去山区
  • 不要跟别人的男朋友驾车去山区
  • 不要跟别人的老婆驾车去山区
  • 不要跟带别人的狗驾车去山区
    <ul>
        <li>不要独自驾车去山区</li>
        <li>不要跟别人的男朋友驾车去山区</li>
        <li>不要跟别人的老婆驾车去山区</li>
        <li>不要跟带别人的狗驾车去山区</li>
    </ul>

8.<ol>有序列表

  1. 不要独自驾车去山区
  2. 不要跟别人的男朋友驾车去山区
  3. 不要跟别人的老婆驾车去山区
  4. 不要跟带别人的狗驾车去山区
<ol>
    <li>不要独自驾车去山区</li>
    <li>不要跟别人的男朋友驾车去山区</li>
    <li>不要跟别人的老婆驾车去山区</li>
    <li>不要跟带别人的狗驾车去山区</li>
</ol>

9.<dl>定义列表

名字
是一个人的标识
<dl>
    <dt>名字</dt>
    <dd>是一个人的标识</dd>
</dl>

10.<pre>预格式

11.<blockquote>大引用

这是一个大引用
<blockquote>这是一个大引用</blockquote>

12.<q>小引用

这是一个小引用

<q>这是一个小引用</q>

13.<span>跨越多个字符

这是一个红色的词

<p>这是一个<span style="color:blue;">红色</span>的词</p>

14.<a>超链接

<a href="链接" target="_blank">

15.<img>图片

<img src="" alt="提示" />

16.<div>区块

17.<strong><b>加粗

加粗

<strong>加粗</strong>

18.<em><i>斜体

斜体

<em>斜体</em>

19.<sup>上标

22

2<sup>2</sup>

20.<sub>下标

log2

log<sub>2</sub>

21.<abbr>缩写

DOTA

<abbr title="Defend Of Ancient">DOTA</abbr>

22.<figure>定义说明

 

技术分享 图片

 

<figure>
    <img src="XXX" alt="图片">
    <figcaption>图片</figcaption>
</figure>

23.<audio>音频

<audio src="XXX" controls autoplay></audio>

controls使可控 autoplay自动播放

24.<video>视频 支持格式:MP4 webm ogg

<video src="" controls autoplay loop></video>

loop循环播放

25.<table>表格

1-1 1-2
2-1 2-2 2-3
3-2 3-3
<table border="1">
    <tr>
        <td colspan="2">1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

tr表示表格行,td表示表格数据,table-row,border设置边框线粗细,

colspan合并行,rowspan合并列

th表头,加粗 caption大表头

26.<style>样式控制 置于head标签中

table{
    border-collapse: collapse;
}

为表格添加上边框

27.<form>表单







  
班长 学委 纪委

<form action="XXX" method="get">
    <input type="text" placeholder="请输入账号" />
    <input type="password" maxlength="6" />
    <input type="button" value="点击我" />
    <input type="reset" value="清空" />
    <input type="submit" value="提交" />
    <button>新的提交按钮</button>

    <label for="male">男</label>
    <input type="radio" name="sex" id="male" />
    <label for="female">女</label>   
    <input type="radio" name="sex" id="female" />

    班长<input type="checkbox" />
    学委<input type="checkbox" checked />
    纪委<input type="checkbox" />

    <select name="" id="">
        <option value="">北京</option>
        <option value="">南京</option>
        <option value="">东京</option>
        <option value="">西京</option>
    </select>

    <textarea name="" id=""></textarea>
</form>

action提交外部链接 method提交方式:get post

input类型:文本框(text),密码框(password);点击按钮(button),重置按钮(reset),提交按钮(submit);单选(radio);多选(checkbox)

placeholder:预定义文本框内容;maxlength:最大输入限制;value:文字内容;name:命名,用于表单提交数据;for:ID选择;checked:默认选择

<lable>可以增强用户体验

<select>创建下拉栏,使用<option>编辑选项

<textarea>一个可以多行输入的文本框

28.<mark>高亮

<p>我是<mark>中国人</mark></p>

29.<nav>导航栏

 

科技 体育 军事

 

<nav>
    <a href="XX">科技</a>
    <a href="XX">体育</a>
    <a href="XX">军事</a>
</nav>

30.<header><footer><article><section><aside>等h5新语义标签

header页眉 footer页脚 article内容 section区块 aside侧边栏

31.行内元素,块级元素

行内:

块级:

inline-block行内块

认识html标签

标签:创建   标记   单选   结构   input   footer   controls   说明   字符   

原文地址:http://www.cnblogs.com/pq1234/p/7183300.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!