HTML 基础知识
HTML基本结构
HTML头部标签
-
meta 标签
-
link 标签
-
base 标签
HTML标签
-
HTML 标签分类
-
HTML 标签属性
-
排版标签
-
文本格式化标签
-
图片标签 - img
-
链接标签 - a
-
列表标签
-
表格标签 - table
-
表单标签 - form
-
input 标签
-
label 标签
-
select 标签-下拉列表
-
textarea 标签-文本域
-
fieldset 标签-元素分组
-
datalist 标签 - input 可能值(H5)
-
-
多媒体标签
-
embed 标签 - 嵌入内容
-
audio 标签 - 音频
-
video 标签 - 视频
-
HTML(Hyper Text Mark-up Language,超文本标记语言),一种使用标记标签 (tag) 描述网页的语言,其中的“超文本“是指页面内除文本之外还可以包含图片、链接、程序、音频、视频等非文字元素。
HTML 常用于编写页面主体结构,CSS 常用于对页面进行静态修饰,JavaScript 常用于对网页增加动态功能。
一、 HTML 基本结构
<!-- HTML注释格式 -->
<!-- 标准HTML文档格式 -->
<!DOCTYPE html> <!-- H5文档类型=html -->
<html lang="en"> <!-- language=English -->
<head>
<meta charset="UTF-8"> <!-- 字符集 -->
<!-- 屏幕自适应大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文档标题</title>
</head>
<body>
文档主体内容
</body>
</html>
二、HTML 头部标签
1. meta 标签 - 元信息
-
meta标签:页面元信息,位于
<head></head>
中 -
meta标签属性:键值对
1 定义编码格式:<meta charset="UTF-8">
2 为搜索引擎定义关键词:<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
3 为网页定义描述内容:<meta name="description" content="HTML基础">
4 定义网页作者:<meta name="author" content="Mr mo">5 每30秒中刷新当前页面:<meta http-equiv="refresh" content="30">
6 常用的针对移动网页优化过 viewport 的 meta:<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
2. link标签 - 链接外部资源
<!--链接外部css文件-->
<link rel="stylesheet" type="text/css" href="文件url" />
<!--链接icon文件-->
<link rel="icon" href="favicon.ico" />
3. base标签 - 基准链接
- 为页面所有链接规定默认 url 或默认 target
<base href="" target="" />
<base/> 属性 |
值 | 描述 |
---|---|---|
herf | url | 规定页面所有链接的默认url |
target | _self _blank |
规定页面所有链接的默认打开方式 |
三、HTML 标签
1. HTML标签分类
按标签类型分类:
标签类型 | 标签 |
---|---|
单标签 | <br/> ,<img/> ,<input/> ... |
双标签 | <p></p> ,<div></div> ... |
按标签显示模式分类:
标签显示模式 | 标签 |
---|---|
块级元素 | <div></div> ,<ul></ul> ... |
行级元素 | <span></span> ,<a></a> ... |
行内块元素 | <img/> 、<td></td> ... |
2. HTML标签属性
HTML标签属性格式:name="value";
例如:
属性 | 值 | 描述 |
---|---|---|
id | id | 规定元素的唯一 id |
class | classname | 为 html 元素定义一个或多个类名(classname) |
style | style_definition | 规定元素的行内样式(inline style 内联样式) |
title | text | 描述了元素的额外信息 (作为工具条使用) |
详细参考 《HTML标准属性参考手册》
3. 排版标签
排版标签 | HTML标签 |
---|---|
标题标签 | <h1>一级标题</h1> ~ <h6>六级标题</h6> |
段落标签 | <p>这是一个段落</p> |
换行标签 | <br/> |
水平线标签 | <hr/> |
块标签 | <div></div> |
行标签 | <span></span> |
4. 文本格式化标签
文本格式 | HTML4 | HTML5 |
---|---|---|
加粗 | <b></b> |
<strong></strong> |
斜体 | <i></i> |
<em></em> |
下划线 | <u></u> 不推荐使用 |
<ins></ins> |
删除线 | <s></s> 不推荐使用 |
<del></del> |
5. 图片标签 - img
<img src="url" alt="替代文本" />
<img/> 属性 |
值 | 描述 |
---|---|---|
src | url | 本地图片路径 / 网络图片url |
alt | text | 图片非正常显示的替代文本 |
width&height | px,% | 设置图像宽&高 |
title | text | 鼠标悬停时的显示文本 |
border | px | 图像边框宽度 |
避免图片失真:推荐width&height只设置一个值;
6. 链接标签 - a
<a herf="url" target="_blank"></a>
<a> 属性 |
值 | 描述 |
---|---|---|
href | url | 超链接url / #id |
target | _self _blank |
本标签页打开(默认) 新标签页打开 |
name | text | 锚点名称 |
title | " " | 鼠标移到上面显示的文本描述 |
(1) 锚点定位:<a href="#id/name"></a>
- 给每个锚点添加ID,点击链接直接跳转到对应ID的位置
<a href="index.html#box1">锚点1</a>
<a href="http://www.baidu.com/#box2">锚点2</a>
....
<div id="box1">
<div id="box2">
(2) 路径
- 内部页面用相对路径,外部链接用URL
<a href="images/drinks.gif"></a>// images文件夹下的drinks.gif文件
<a href="../../book/index.html"></a> // .. 代表上行到父文件夹
7. 列表标签
(1) 无序列表 - ul
<ul>
<li>表项1</li>
<li>表项2</li>
</ul>
(2) 有序列表 - ol
<ol>
<li>表项1</li>
<li>表项2</li>
</ol>
(3) 自定义列表 - dl
<dl>
<dt>上级表项1</dt>
<dd>下级表项11</dd>
<dd>下级表项12</dd>
<dt>上级表项2</dt>
<dd>下级表项21</dd>
<dd>下级表项22</dd>
</dl>
列表项计数问题:从1开始计数,dl从dt开始计数
8. 表格标签 - table
<table border="1px">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>第1行第1格</td>
<td>第1行第2格</td>
</tr>
<tr>
<td>第2行第1格</td>
<td>第2行第2格</td>
</tr>
</tbody>
</table>
空单元格边框未显示问题:在空单元格中添加一个空格占位符
<table>
属性:
-
border-spacing
:单元格之间边框间距border-spacing:10px 30px;
10px的水平间距,30px的垂直间距(IE6不兼容)
-
Border-collapse
:折叠两个边框为一个- 给 table 加
border-collapse:collapse;
- 给 table 加
-
cellspaceing
:单元格间距; -
cellpadding
:单元格边距;
<td>
属性:
-
合并单元格:
rowspan=""
跨行,colspan=""
跨列;<td colspan="2"></td>
:两列合并为一个
-
水平对齐方式:
align="left/center/right"
;
9. 表单标签 - form
- 特性:inline-block
<form action="" method="GET">
表单域:表单元素;
</form>
<form> 属性 |
值 | 描述 |
---|---|---|
action | url | 规定提交表单的目的地址url |
method | GET POST |
规定提交表单使用的 HTTP 方法 |
target | _self _blank |
规定action的打开方式 |
HTTP 方法:
-
GET:表单数据在地址栏可见,明文;(默认)
-
POST:表单数据在地址栏不可见,密文;
(1) input 标签
-
<input type="" name="" value="" />
-
name是后端使用的,但是习惯是要写个空的值
<input/> 属性 |
值 | 描述 |
---|---|---|
type | text password radio checkbox button submit reset image file |
单行文本输入框 密码输入框 单选框 复选框 普通按钮 提交按钮 重置按钮 图片 文件 |
name | 用户自定义 | input控件名称 |
value | 用户自定义 | input控件初始文本值 |
checked | checked | 定义选框预选项 |
disabled | disabled | 禁用表单元素 |
size | number | 字段显示宽度 |
maxlength | number | 字段最大长度 |
-
<input type="checkbox" name="" checked/>运动
(checked就是默认选中,disabled 禁用) -
H5新增input属性:
<input/> 属性(H5) |
值 | 描述 |
---|---|---|
placeholder | text | 输入字段的提示 |
autofocus | autofocus | 规定在页面加载时是否获得焦点(不适用于 type="hidden") |
multiple | multiple | 多文件上传 |
autocomplete | on off |
是否使用字段的自动完成功能 |
required | required | 必填项,不能为空 |
-
H5新增input type值:
input type值(H5) | 描述 |
---|---|
邮箱格式 | |
tel | 手机号码 |
url | url格式 |
number | 数字格式 |
search | 搜索框 |
range | 自由拖动滑块 |
time | 时分 |
date | 年月日 |
datetime | 时间 |
month | 月年 |
week | 星期 年 |
(2) label 标签
- 为 input 元素定义标注
<input type="checkbox" name="" id="a"/>
<label for="a">……</label> //只有这样才能兼容IE6
<label> 属性 |
值 | 描述 |
---|---|---|
for | id | 规定 label 绑定到哪个表单元素。 |
form | form_id | 规定 label 字段所属的一个或多个表单。 |
(3) select 标签-下拉列表
<select name="" id="">
<option value="">下拉项1</option>
<option value="">下拉项2</option>
</select>
值 | 描述 | |
---|---|---|
selected | selected | 定义下拉列表默认项 |
disabled | disabled | 禁用表单元素 |
value | text | 定义送往服务器的选项值 |
- 对高度的支持不兼容,所以一般只给宽,高度不会控制
(4) textarea 标签-文本域
<textarea name="" id="" cols="30" rows="10">
文本域:多行文本
</textarea>
rows
&cols
:定义文本的可见行&列
(5) fieldset 标签-元素分组
<fieldset>
<legend>元素组标题</legend>
表单元素1: <input type="text" />
表单元素2: <input type="text" />
</fieldset>
(6) datalist 标签 - input 可能值(H5)
- datalist 标签:定义选项列表。与 input 连用,定义 input 可能的值。
<input list="datalist-id" />
<datalist id="datalist-id">
<option value="input可能值_01">
<option value="input可能值_02">
<option value="input可能值_03">
</datalist>
10. 多媒体标签
(1) embed 标签 - 嵌入内容
<embed src="" type=""/>
<embed/> 属性 |
值 | 描述 |
---|---|---|
src | url | 嵌入内容的url |
type | type | 嵌入内容的类型 |
width&height | px | 嵌入内容的宽&高 |
(2) audio 标签 - 音频
<audio src=""></audio>
<audio> 属性 |
值 | 描述 |
---|---|---|
src | url | 音频的url |
autoplay | autoplay | 自动播放 |
control | control | 显示音频控件 |
loop | loop | 循环播放 |
(3) video 标签 - 视频
<video src=""></video>
<video> 属性 |
值 | 描述 |
---|---|---|
src | url | 音频的url |
autoplay | autoplay | 自动播放 |
control | control | 显示视频控件 |
loop | loop | 循环播放 |
width&height | px | 视频的宽&高 |