HTML 基础知识

时间 2019-12-11

标签 html 基础知识栏目 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 经常使用于对网页增长动态功能。

1、 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>

2、HTML 头部标签

1. meta 标签 - 元信息

meta标签：页面元信息，位于<head></head>中javascript
meta标签属性：键值对css

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	规定页面全部连接的默认打开方式

3、HTML 标签

1. HTML标签分类

按标签类型分类：html

标签类型	标签
单标签	`<br/>`，`<img/>`，`<input/>`...
双标签	`<p></p>`，`<div></div>`...

按标签显示模式分类：java

标签显示模式	标签
块级元素	`<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只设置一个值；ide

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>

空单元格边框未显示问题：在空单元格中添加一个空格占位符 oop

<table>属性：

border-spacing：单元格之间边框间距
- border-spacing:10px 30px; 10px的水平间距，30px的垂直间距（IE6不兼容）
Border-collapse ：折叠两个边框为一个
- 给 table 加 border-collapse:collapse;
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）	描述
email	邮箱格式
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	视频的宽&高

HTML 基础知识

meta 标签

link 标签

base 标签

input 标签

label 标签

select 标签-下拉列表

textarea 标签-文本域

fieldset 标签-元素分组

datalist 标签 - input 可能值（H5）

embed 标签 - 嵌入内容

audio 标签 - 音频

video 标签 - 视频

HTML（Hyper Text Mark-up Language，超文本标记语言），一种使用标记标签 (tag) 描述网页的语言，其中的“超文本“是指页面内除文本以外还能够包含图片、连接、程序、音频、视频等非文字元素。

HTML 经常使用于编写页面主体结构，CSS 经常使用于对页面进行静态修饰，JavaScript 经常使用于对网页增长动态功能。

1、 HTML 基本结构

2、HTML 头部标签

1. meta 标签 - 元信息

2. link标签 - 连接外部资源

3. base标签 - 基准连接

3、HTML 标签

1. HTML标签分类

2. HTML标签属性

3. 排版标签

4. 文本格式化标签

5. 图片标签 - img

6. 连接标签 - a

(1) 锚点定位：<a href="#id/name"></a>

(2) 路径

7. 列表标签

(1) 无序列表 - ul

(2) 有序列表 - ol

(3) 自定义列表 - dl

8. 表格标签 - table

9. 表单标签 - form

HTTP 方法：

(1) input 标签

H5新增input属性：

H5新增input type值：

(2) label 标签

(3) select 标签-下拉列表

(4) textarea 标签-文本域

(5) fieldset 标签-元素分组

(6) datalist 标签 - input 可能值（H5）

10. 多媒体标签

(1) embed 标签 - 嵌入内容

(2) audio 标签 - 音频

(3) video 标签 - 视频

(1) 锚点定位：`<a href="#id/name"></a>`