免费AI编程助手
HTML结构
2018-06-20 10:40 更新
HTML的结构一般包括<html><head><body>，一般包括html文档、head头部、body身体，很多个html文档页面就是网站。
<!DOCTYPE html> <!--文档类型 html-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>我是页面标题</title>
</head>
<body>
正文
</body>
</html>文本
#段落
正文标题 <h1></h1> 到 <h6></h6>
段落 <p>直接写</p>
换行 <br>
#特殊符号
时间 <time>9:00</time>
时间 <time datetime="2016-02-14">情人节</time>
下划线 <u> </u>
删除线 <del> </del>
上标 <sup> </sup>
下标 <sub> </sub>
联系地址 <address> </address>
水平线 <hr>
注释 <!-- 这是注释 -->
版权号 ©
注册商标 ®
& "；
<
> >
宽度、随着值变化 Width
像素绝对值、越大线越粗 Size
被CSS了的
空格
左对齐 <p align=“Left”>…</p>
居中 <p align=“Center”>…</p>
右对齐 <p align=“Right”>…</p>
加粗 <b> </b>
加语气 <strong> </strong>
倾斜 <i> </i>
缩小 <small> </small>
单句引用 <q> </q>
多句引用 <blockquote> </blockquote>
#列表
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
#代码标签
防止浏览器误认为是要执行代码
单行<code></code>
多行<pre></pre>
#跳转标签
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>表格
#table标签、tbody标签
table标签表示表格，tbody标签用它来将表格分段，可以一部分一部分的显示
tr表示一行
th表示行内表头
td表示行内表数据
border="1" 表格边框大小
<table>
<tbody>
<tr> <th>表格标题</th> <th>表格标题</th> </tr>
<tr> <td>表格数据</td> <td>表格数据</td> </tr>
</tbody>
</table>
#摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
<table summary="表格简介文本">
#标题
用以描述表格内容，标题的显示位置：表格上方。
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
</table>
#表格边框
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>超链接
#<a></a>标签
使用a标签可实现超链接
<a href="http://zhimiyun.com" rel="external nofollow" target="_blank" >外部链接</a>
<a href="/html">本地链接</a>
<a href="/html" target="_blank">新窗口打开</a>
导航链接
<nav>
<a href="/html/">HTML</a>|<a href="/css/">CSS</a>|
</nav>
图片链接
相当于将图片标记语言放在了超链接下面
<a href="https://www.w3cschool.cn"> <img src="images\xxgk.jpg" alt="loge" width="258" height="39" /></a>
<mailto>标签
使用mailto能让访问者便捷向网站管理者发送电子邮件
用mailto做许多其它事情。下面一一进行讲解，请看详细图示：
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
<a herf="mailto:yy@imooc.com?subject=我是邮件主题。&body=我是邮件内容。">对此影评有何感想，发送邮件给我</a>
<a href="mailto:425389019@qq.com">邮件链接</a>图片
#<img>标签
用来插入图片
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
静态图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
<img src="images\xxgk.jpg" alt="loge" width="258" height="39" />
背景图片
<body background=images\bg.jpg>音乐视频
音乐
定义了mp3与ogg两个格式
<audio controls loop>
<source src="music/大王叫我来巡山.MP3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
</audio>
视频
<video width="320" height="240" controls>
<source src="video/鹬.mp4" type="video/mp4">
</video>
<embed src='http://player.youku.com/player.php/sid/XMjg2NjYzNzc1Mg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>表单
<form></form>标签
使用表单标签，与用户交互，网站怎样与用户进行交互？答案是使用HTML表单(form)表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
method：数据传送的方式（get/post),post/get的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的wiki，里面有详细介绍。
action：服务器文件，浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
type: 表单样式，文本框text 密码框password 单选框radio 复选框checkbox 多行文本框comment
name：为文本框命名，以备后台程序ASP 、PHP使用。
value：为文本输入框设置默认值。(一般起到提示作用)
placeholder：框内的提示符
文本框：
<input type="text/password" name="名称" value="文本" />
<form action="save.php" method="post" >
账户:
<input type="text" name="myName" value="zhangzexiang" placeholder='请输入账号'>
密码:
<input type="password" name="pass">
<input type="submit" value="提交" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
多行文本框：
<textarea rows="行数" cols="列数">文本</textarea>
<form action="save.php" method="post" >
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>
单选框：
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
复选框：
1、type:当 type="radio" 时，控件为单选框,当 type="checkbox" 时控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
<form action="save.php" method="post" >
<label>性别:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" />
</form>
下拉框
selected="selected"：
设置selected="selected"属性，则该选项就被默认选中。
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
multiple="multiple"让下拉框多选
<form action="save.php" method="post" >
<label>爱好:</label>
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
<form>
<select>
<option>房子</option>
<option>车子</option>
<option selected>永久生命</option> <!-- selected>Fiat 是预选按钮 -->
<option value="钱">金钱</option>
<input type="reset" value="重置">
</select>
</form>
form表单中的label标签
小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--label，这一小节就来揭晓它的作用。
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
<form action="save.php" method="post">
<label>你对什么运动感兴趣:</label><br />
<label for="mal">慢跑</label>
<input type="checkbox" name="慢跑" id="mal"/><br />
<label for="mal">登山</label>
<input type="checkbox" name="登山" id="mal"/><br />
<label for="mal">篮球</label>
<input type="checkbox" name="篮球" id="mal"/><br />
</form>以上内容是否对您有帮助：
← HTML介绍
更多建议：