html5基本标签

2017-07-16 本文已影响0人永恒星空_5da1

首先来说下基本结构。

<!DOCTYPE html>:这个申明，必须位于 HTML5 文档中的第一行，也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。

<html>与</html>：告诉你浏览器其自身是一个 HTML 文档

<head>与</head>: 文档的头部

<body>与</body>:文档的主题内容部分

接下来介绍下基本标签。

标题标签:
h1 一级标题
h2 二级标题
h3 三级标题
h4 四级标题
h5 五级标题
h6 六级标题

div：没有意义，一般用来结合CSS进行布局使用
<div>你们是一个div</div>

段落标签p
<p>呵呵哒，我是一个段落</p>

a:标签 href是标签属性，每一个标签都有其属性
<a href="##">我是一个网址</a>

br：换行标签
<a href="##">我是一个网址</a>

span:行内标签
<span>我是一个span标签</span>
<span>我也是</span>
<span>我还是</span

select:选项卡
selected ：默认在哪个选项中
<select>
<option>选项卡</option>
<option>星期一</option>
<option>星期二</option>
<option>星期三</option>
<option>星期四</option>
<option selected>星期五</option>
<option>星期六</option>
<option>星期天</option>
</select>

input:输入，单选，多选，按钮
姓名：<input type="text" placeholder="请输入" />

年龄：<input type="text" />

性别: 男<input type="radio" name="sex" />
女:<input type="radio" name="sex" />

    爱好:<input type="checkbox" name="h" /> 篮球
    <input type="checkbox" name="h" /> 羽毛球
    <input type="checkbox" name="h" />足球<br/>

    <input type="submit" />
    <input type="button" value="戳我有奖" />
    <br/>

ul li/ol li :无序列表和有序列表
<ul >
<li>呵呵</li>
<li>嘻嘻</li>
<li>嘿嘿嘿</li>
</ul>

    <ol>
        <li>嗯嗯</li>
        <li>哈哈</li>
        <li>啊啊</li>
    </ol>

hr: 分割线
<span>123</span><hr />

table:表格
border:边框
cellspacing：单元格之间间隙
cellpadding:单元格边框距离内容间距

        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>

        </tr>
        <tr>
            <!-- rowspan将第二行第一列和第三行第一列合并，导致第三行少一列 -->
            <td rowspan="2">一</td>
            <!-- colspan将第二行的第二列和第三列合并 -->
            <td colspan="2">2</td>

            <tr>
                <td>A</td>
                <td>B</td>

            </tr>
        </tr>
    </table>

最后说下表单提交
form:表单提交。例如注册，登录界面需要用到form表单
<form>

        姓名<input type="text"><br/>
           <input type="submit">

    </form>

html5基本标签

猜你喜欢

热点阅读