1 .基本结构
<!DOCTYPE html> <html> <head>标题文本... </head> <body>内容文本... </body> </html>
基本解释
-
<!DOCTYPE html>为标识符,它指出了网页遵循的HTML标准,有时还指出了定义规范的文档类型定义(DTD) -
<html>包含了组成网页的所有标签 -
<head>包含了所有提供网页信息的标签,且不包含现在在页面中的信息 -
<body>包含了所有的文本和其他内容(链接、图片等) -
<html>``<head>``</head>``<body>``</body>``</html>都称为标签
<html></html>称为根标签
<html>``<head>``<body>称为开始标签
</head>``</body>``</html>称为结束标签
- 一般来说,标签都是成对出现的
- 标签和标签之间可以相互嵌套,但顺序必须一致
- 标签不区分大小写,但建议使用小写
2.基本标签及其用法
head部分
<title>标签
<title>标题内容<title>
将标题内容显示在浏览器的标题栏中,一般简短,易懂
<meta>标签元数据(metadata)
<meta name="**" content="**"/>
name 和content的作用为描述页面的内容
<style>标签
<style type="**">
规定HTMLL元素在浏览器中呈现的样式
body部分
- 段落类
<p>标签
<p>段落文本</p>
将文本分段后输出
<br />标签用于分行,相当于回车换行
用在句子的末端
标签文本
文本
将文本分割输出,相当于空格
<hr>标签用于创建一条水平的线(分割线)
用在段落的首端
- 字体类
<hx>标签(x=1~6)
<hx>标题</hx>
将文本以标题形式输出
其中<h1>字体最大,<h6>相对最小
<strong>标签
<strong>强调部分</strong>
将文本以粗体输出
<em>标签
<em>强调部分</em>
将文本以斜体输出
<span>标签
<span>强调部分</span>
将文本以特殊形式输出
<font>标签
<font>要输出的文本</font>将文本自定义大小输出
<font size= "1">要输出的文本</font>
size可取1~7,其中7最大,1最小
将文本自定义颜色输出
<font color ="#000000"></font>
其中color后可以接RGB值,也可以用颜色的单词来表示
- 引用
<q>标签
<q>引言</q>
自动给引言加上""
<blockquote>标签
<blockquote>引文</blockquote>
自动在页面左右两侧进行缩进处理
<code>标签
<code>代码</code>
将代码完整输出,不改变任何符号
只能对一行代码进行输出
<pre>标签
<pre>代码段</pre>
将代码段完整输出,保留空格和换行符
不受分行的影响
- 表格类
<ul>标签
<li>一条内容</li>
<li>一条内容</li>
...
</ul>将信息分条排序
通常由"·"起行
<ol>标签
<li>第一条内容<li>
<li>第二条内容<li>
...
</ol>将信息分条排序
每一行都有固定的编号
- 特殊类
<address>标签
<address>地址信息</address>
在网页中提供联系信息,通常自动显示为斜体
<div>标签
<div>...</div>
将标签放入div中,可以更清晰的看懂标签的逻辑
``
注释部分只会在源代码页面显示,从而方便管理员理解代码,而不会在页面中输出
<input type>"..."<placeho.der>
3.表格
表格的组成部分
- 表题:指出表格包含什么内容.(表题是可选的)
- 表头:标识行、列或两者,通常使用突出的字体.(可选)
- 单元格:表格中的各个方框,包含的可能是表格数据,也可能使表头.
- 表格数据:表格中的值
<table>元素
<table>表格</table>
表格摘要
- 提供解释性的信息,从而对表格作简要的介绍
在表格前面的段落中进行描述
在表题中进行描述
在表题的<details>元素中进行描述
在表格后面的示意图或者图题中进行描述
单元格
- 表格是逐行定义的,每一行定义都应该包含该行的所有单元格
<tr>表格行..</tr>可包括表头单元格或数据单元格
<th>表头单元格..</th>通常为粗体,且在水平和垂直方向上都居中
<td>数据单元格..</td>使用常规字体显示,在水平方向上左对齐,在竖直方向上居中
空单元格
在单元格中包含一行换行符
如:<td><br><td>
表题
元素<caption>位于<table>之内,但位于第一行<tr >之前
<table> <caption>表题名称...</caption> <tr >若信息过多,也可以将详细信息隐藏起来
在<caption>中嵌入<derails>元素,可完成对内容的单击隐藏<caption> <details>详细内容...</details> </caption>
设置表格
- 设置宽度
<table border="1" style="width: 100%">
设置为与浏览器窗口等宽
- 设置边框
<table border="10" style="width: 100%">
边框设置为10像素
- 单元格内边距(单元边缘与内容的距离)
<table cellpadding= "10" border= "1">
内边距设置为10像素
- 单元格间距(单元格与单元格的距离)
<table cellspacing= "8">
单元格间距为8像素
4.图像
图像
图像格式
大多数浏览器都支持的格式:GIF.JPEG.PNG,而HTML5中增加了SVG格式图像的支持
- GIF
图像交换格式(Graphics Interchange Format)
支持简单的动画
- GPEG
联合图像专家组(Jointment Photographic Experts Group)
多用于储存摄影图像
- SVG
可缩放的矢量图像
可随意改变大小而不会对图像质量有任何影响
- PNG
便携式网络图形(Portable Network Graphics)
将图像转化为PNG格式,不会丢失任何数据
添加图像
<img>标签
<img>标签有两个属性:src和altsrc:指定图像的URL
alt:简单的图像文本描述可将图片放在
<body>标签中的任意位置指向本地目录
指向服务器
图像替代文本
当图像无法显示或加载时会显示"对图片的文字描述"
图像与文本
将图像标签放置在文本标签中,就可以将图片显示在文本内
图像的缩放
<img>标签的两个属性height和width指定了图像的高度和宽度
<img mrc="****.png" height="高度" width="宽度">
!!宽度调用
目的
- 调整浏览器现实的图像尺寸,使其更适合页面
- 让浏览器预先知道图像有多大,有助于浏览器在加载图片完成前,排版正确
5.链接
创建链接
- 要有链接到的文件名(或URL)
- 要有可单击的链接文本
链接标签<a>
基本组成部分,href、表示链接的文本、结束标签
链接标签<a>必须包含一些属性
- 本地文件
文本<a href="点击链接时将加载的文件">**可被点击的文本**</a>
文本<a href="点击链接时将加载的文件">可被点击的文本</a>
- web文档
文本<a href="网站">**注释**</a>
文本<a href="网站">注释</a>
文件的路径
路径分为两种
相对路径:http:\****.****
绝对路径:本地目录<br
锚(anchor)
用name属性创建一个文档内的标签
<a name="label">锚(显示的文本)</a>
<a href= "#tips">锚</a>
6.表单
表单
收集信息并处理
form标签
标签
<form>的两个常用属性action和method
action: 提交表单的地址(另一个网页的链接或moilto链接)
method: 提交表单的使用方法,一般分get和post两种
<label>标签
<label>描述表单字段的文本</label>
<input>标签
- input元素由起始标签和结束标签组成,其中其实标签中包含属性.
- 其实标签和结束标签之间没有任何其他内容.
文本
文本框只有一行,无法回车换行<label for= "usuername">姓名:</label> <input type="text" id= usuername><label for= "usuername">姓名:</label>
<input type="text" id= usuername>密码
密码框中输入的信息会做掩码处理<label for= "password">密码:</label> <input type="password" id="password"><label for= "password">密码:</label>
<input type="password" id="password">单选框
同一组选项,name属性必须相同<label>性别:</label> <input type="radio" name= "sex" value="male">男 <input type="radio" name= "sex" value="female">女 <input type="radio" name= "sex" value="futa">扶他<label>性别:</label>
<input type="radio" name= "sex" value="male">男
<input type="radio" name= "sex" value="female">女
<input type="radio" name= "sex" value="futa">扶他复选框
<label>爱好</label> <input type="checkbox" name= "sex" value="male">男 <input type="checkbox" name= "sex" value="female">女 <input type="checkbox" name= "sex" value="futa">扶他<label>爱好:</label>
<input type="checkbox" name= "sex" value="male">男
<input type="checkbox" name= "sex" value="female">女
<input type="checkbox" name= "sex" value="futa">扶他下拉列表
<label for= "sex">我的性别</label> <select id= "sex" name= "sex"> <option value= "男">男</option> <option value= "女">女</option> <option value= "扶她">扶她</option> </select><label for= "sex">我的性别:</label>
<select id= "sex" name= "sex">
<option value= "男">男</option>
<option value= "女">女</option>
<option value= "扶她">扶她</option>
</select>提交按钮
<input type= "submit" value= "提交"><input type= "submit" value= "提交">
重置按钮
重置按钮可以清空表单中已经填写了的信息
<input type= "reset" />
<input type= "reset" />隐藏文本
<input type= "hidden" name="country" value="Norway" /><input type= "hidden" name="country" value="Norway" />
打开文件
<input type= "file" name= "pic" accept= "image/gif" />
textarea标签
多行文本
<textarea name= "article">文本内容</textarea>
7. 多媒体
<video>标签
用法
<video src= "***.mp4">作用
播放视频
属性
src
要播放视频的地址<embed src="地址.mp3"> <br>
height
元素的高度<height=200>width
元素的宽度<width=200>
autoplay
一个布尔属性,制定是否在网页加载完毕后立即播放视频<embed src="**" autostart=true>(自动播放) <embed src="**" autostart=false>(手动播放)loop
一个布尔属性,如果包含它,将循环播放视频(到达末尾后重新播放,直至手动暂停)<loop="ture">(自动循环)preload
一个布尔属性,如果包含它,浏览器将在页面加载完毕后开始下载视频,为播放所好准备(指定了属性autoplay时,将忽略此属性的设置)
controls
一个布尔属性,告诉浏览器是否提供视频播放控件poster
开始播放视频前显示的图像(封面)muted
一个布尔属性,如果包含它,视频将没有声音
