Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html文档的基本结构及常用标签的使用-2019年7月3日9点47分
Blogger Information
Blog 22
fans 3
comment 3
visits 16326
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html文档的基本结构及常用标签的使用-2019年7月3日9点47分
辰晨的博客
Original
1041 people have browsed it

一、HTML文档的基本结构

    1.<!DOCTYPE html>声明文档的类型为html

    2.<html lang="en">，html文档开始，lang可以不写，lang="en"浏览器支持则对网页内容进行中文翻译

    3.<head>网页头部，内容用户不可见，供浏览器和搜索引擎解读，主要信息为网页内容的描述及文档声明。组成部分：【1】<title>网页标题</title>，描述网页的主要内容。【2】meta标签用来设置页面的元数据（描述），属性值有<meta  charset="utf-8">（设置网页的编码格式），<meta name="description" content="网页内容描述">，<meta name="keywords" content="网页关键字">

    4.<body>浏览器渲染呈现给用户的可见内容部分

<!DOCTYPE html>
	<html>
		<head>
			<title>html文档的基本结构及常用标签的使用</title>
			<meta charset="utf-8">
			<meta name="keyword" content="关键字">
			<meta name="description" content="网页内容描述">
		</head>
		<body>
		  	<h1>html文档的基本结构</h1>	
		</body>
	</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二、常用标签

    1.p段落标签

    2.h1~h6标题标签

    3.图片<img src="图片地址" alt="描述文本" title="图片名称">

    4.<a href="链接地址">超链接</a>

    5.列表：无序列表ul>li,有序列表ol>li，定义列表dl>dt>dd

    6.table,thead+tr>th,tbody+tr>td,tfoot

    7.form>p>label+input

    8.div（本意划分），区域标签

    9.span无意义标签

<h3>常用标签</h3>
<p>段落标签</p>
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
<img src="http://www.php.cn/static/images/index_banner3.gif" alt="描述文本" title="图片名称">
<a href="http://www.php.cn/">超链接</a>

<ul>
    <li>无序列表</li>
</ul>
<ol>
    <li>有序列表</li>
</ol>
<dl>
    <dt>
	<dd>定义列表</dd>
    </dt>
</dl>

<table>
	<thead>
		<tr>
		  <th>表头</th>
		</tr>
	</thead>
        <tbody>
		<tr>
		  <td>表格</td>
		</tr>
	</tbody>
</table>
		  		
<form action="get/post">
	<p>
	    <label for=""></label>
	    <input type="text">
	</p>
</form>
<div>盒子模型</div>
<span>文本</span>

运行实例 »

点击 "运行实例" 按钮查看在线实例

三、列表

    1.有序列表，ol>li

<h3>有序列表</h3>
<ol>
   <li>html</li>
   <li>css</li>
   <li>javascript</li>
   <li>mysql</li>
   <li>php</li>
</ol>

运行实例 »

点击 "运行实例" 按钮查看在线实例

    2.无序列表，ul>li

<h3>无序列表</h3>
<ul>
   <li>列表1</li>
   <li>列表2</li>
   <li>列表3</li>
   <li>列表4</li>
   <li>列表5</li>
</ul>

运行实例 »

点击 "运行实例" 按钮查看在线实例

    3.无序列表（习惯，常用于导航列表），ul>li>a

<h3>有序列表</h3>
<ol>
    <li><a href="#">html</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">javascript</a></li>
    <li><a href="#">mysql</a></li>
    <li><a href="#">php</a></li>
</ol>

运行实例 »

点击 "运行实例" 按钮查看在线实例

    4.定义列表（常用于名词解释），dl>dt>dd

<h3>定义列表</h3>
<dl>
    <dt>html</dt>
    <dd>html是超文本标记语言</dd>
</dl>

<dl>
    <dt>php</dt>
    <dd>php是全球主流后端语言之一</dd>
</dl>

运行实例 »

点击 "运行实例" 按钮查看在线实例

四、表格

    1.table,表格最外层结构，cellpadding="5"（表格元素内边距），cellspacing="0"（边框合并），border="1"（边框线为1）,align="center"（内容剧中），bgcolor="#4ea2d6"（背景色），rowspan（跨列合并），colspan（跨行合并）

    2.caption，表格标题

    3.thead表格表头，结构为thead>tr>th,表头内容默认字体加粗，居中

    4.tbody表格主体内容，结构为tbody>tr>td，width="宽"（只需第一行设置即可）

    5.tfoot,结束部分

<h3>表格</h3>
<table cellpadding="5" cellspacing="0" border="1">
<caption><h3>栏目管理</h3></caption>

<thead>
    <tr bgcolor="#4ea2d6">
    <th width="40">ID</th>
    <th width="50">栏目名称</th>
    <th width="80">添加时间</th>
    <th width="40">排序</th>
    <th width="80">操作</th>
    </tr>
</thead>

<tbody>
    <tr align="center">
    <td>001</td>
    <td>HTML</td>
    <td>2019-7-1</td>
    <td>01</td>
    <td><a href="#">编辑</a> <a href="#">删除</a></td>
    </tr>

    <tr align="center">
    <td>002</td>
    <td>css</td>
    <td>2019-7-1</td>
    <td>02</td>
    <td><a href="#">编辑</a> <a href="#">删除</a></td>
    </tr>
    
    <tr align="center">
    <td>003</td>
    <td>javascript</td>
    <td>2019-7-1</td>
    <td>03</td>
    <td><a href="#">编辑</a> <a href="#">删除</a></td>
    </tr>
    
    <tr align="center">
    <td>004</td>
    <td>php</td>
    <td>2019-7-1</td>
    <td>04</td>
    <td><a href="#">编辑</a> <a href="#">删除</a></td>
    </tr>
</tbody>

<tfoot>
<tr align="center">
<td colspan="5">共1页，4条记录</td>
</tr>
</tfoot>		  				
</table>

运行实例 »

点击 "运行实例" 按钮查看在线实例

五、表单

    1.form标签用于包裹表单中的元素，并将信息通过get/post方法提交

    2.表单结构p>label>input，label中for的值用于绑定input中的id，type（类型）=“username/password/email/number/date”

<form>
    <p>
    <label for="username">用户名：</label>
    <input type="username" name="username" id="username" placeholder="用户名不超过8字符" autofocus>
    </p>
    
    <p>
    <label for="password">密   码：</label>
    <input type="password" name="password" id="password" placeholder="请输入6-12位由数字、字母组成的密码" autofocus>
    </p>
    
    <p>
    <label for="email">邮   箱：</label>
    <input type="email" name="email" id="email" placeholder="email@qq.com" requider>
    </p>
    
    <p>
    <label for="age">年   龄：</label>
    <input type="number" name="age" id="age" max="99">
    </p>
    
    <p>
    <label for="birthday">生   日：</label>
    <input type="date" name="birthday" id="birthday">
    </p>
</form>

运行实例 »

点击 "运行实例" 按钮查看在线实例

    3.select>option（选项）下拉选择框，size="1"下拉选项显示个数

<form>
    <p>
    <label for="address">地   址：</label>
    <select name="address" id="address" size="1">
	<option>北京</option>
	<option>上海</option>
	<option>广州</option>
	<option>深圳</option>
	<option>杭州</option>
    <option>西安</option>
    </select>
    </p>
</form>

运行实例 »

点击 "运行实例" 按钮查看在线实例

    4.复选框<input type="checkbox" name="sport" id="volleyball" value="volleyball" checked><label for="volleyball">排球</label>，type="checkbox"（文本框类型类型），checked默认选项

<form>
  <p>
	<label for="sport">球类运动：</label>
	<input type="checkbox" name="sport" id="volleyball" value="volleyball" checked><label for="volleyball">排球</label>
	<input type="checkbox" name="sport" id="Basketbal" value="Basketbal"><label for="Basketbal">蓝球</label>
	<input type="checkbox" name="sport" id="football" value="football"><label for="football">足球</label>
    </p>
</form>

运行实例 »

点击 "运行实例" 按钮查看在线实例

    5.单选框<input type="radio" name="sex" id="male" value="male"><label for="male">男</label>

<form>    
    <p>
	<label for="male">性   别：</label>
	<input type="radio" name="sex" id="male" value="male"><label for="male">男</label>
	<input type="radio" name="sex" id="female" value="female"><label for="female">女</label>
	<input type="radio" name="sex" id="secrecy" value="secrecy"><label for="secrecy">保密</label>
    </p>
</form>

运行实例 »

点击 "运行实例" 按钮查看在线实例

    6.文本域<textarea name="text" id="text" cols="20" rows="5" maxlength="100" placeholder="不超过100字"></textarea>，cols行宽度，rows列宽，maxlength最长文本，placeholder提示内容

<form>      			
    <p>
	<label for="text">个性签名：</label>
	<textarea name="text" id="text" cols="20" rows="5" maxlength="100" placeholder="不超过100字"></textarea>
    </p>
</form>

运行实例 »

点击 "运行实例" 按钮查看在线实例

    7.提交按钮<input type="submit" name="submit" value="提交">等价于<button type="submit">提交</button>

       重置按钮<input type="reset" name="reset" value="重置">

       普通按钮<input type="button" name="button" value="按钮">等价于 <button>按钮</button>

<h3>表单</h3>
<form>      			  			
    <p>
	<input type="submit" name="submit" value="提交">
	<button type="submit">提交</button>
	<input type="reset" name="reset" value="重置">
	<input type="button" name="button" value="按钮">
	<button>按钮</button>
    </p>
</form>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status：qualified

Teacher's comments：完成的不错，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
2 comments
MCPPY 2019-07-04 11:25:43
要学习了
2 floor
李木子 2019-07-04 11:10:34
向你学习！
1 floor
Author's latest blog post