HTML基础知识

第一章 HTML主体结构

1.1 HTML主体结构

<!DOCTYPE html>    <!-- 声明这是一个html文件 -->
<html>    <!-- html开始的标签 -->
    <head>
        <title>网页的标题</title>
        <meta charset="utf-8" />
    </head>
    <body>网页的内容</body>
</html>    <!-- html结束标签 -->

1.2 HTML头部语法

1.2.1 title标签

<title></title>    定义网页的标题

1.2.2 meta标签

属性	取值	作用
name	keywords	定义了网站的关键字信息，便于搜索引擎抓取
	description	定义页面的描述信息
charset	utf-8	定义页面的字符集
http-equiv	content-type	用于接收content中的信息
	refresh	定义页面的自动刷新属性

meta标签--使用实例

<!DOCTYPE html>
<html>
    <head>
        <title>meta标签</title>
        <!-- <meta charset="utf-8">定义页面的字符集 -->
        <!-- 定义页面的字符集 -->
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        
        <!-- 网页每隔5秒刷新一次 -->
        <meta http-equiv="refresh" content="5">
        
        <!-- 定义关键字，便于搜索引擎抓取 -->
        <meta name="keywords" content="HTML,CSS,JavaScript">
        
        <!-- 定义网页的详细描述信息 -->
        <meta name="description" content="PHP培训过程中的一切知识点总结">
    </head>
    <body>

    </body>
</html>

1.2.3 link标签

属性	取值	作用
rel (必填)	icon	定义当前文档与被连接文档间的关系 (图标)
	stylesheet (常用)	样式表
type	image/x-icon	链接网站图标的类型设置
	text/css	链接样式表的类型设置
href		被连接文档的地址

link标签--使用实例

链接网站图标：

<link rel="icon" type="image/x-icon" href="图标所在地址">

链接样式表：

<link rel="stylesheet" type="text/css" href="CSS文件所在地址">

1.3 HTML实体符

实体符名称	写法一	写法二
左尖括号<	<	<
右尖括号>	>	>
空格

写法一：

&lt;    <!-- 左尖括号 -->
&gt;    <!-- 右尖括号 -->
&nbsp;  <!-- 空格 -->

第二章文本标签

2.1 文本标签

2.1.1 标题标签

hn(n为1-6)，字体加粗，独立一行

标题标签--使用实例

<body>
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>
</body>

2.1.2 文本格式标签

标签名称	代码	效果
换行	<br/>	简单的换行效果
段落	<p>...</p>	上下都间距两行
加粗	<b>...</b>	仅仅加粗显示
	<strong>...</strong>	加粗并强调
斜体	<i>...</i>	仅有斜体效果
	<em>...</em>	斜体并强调
下划线	<u>...</u>	在文字下方显示一条线
删除线	<del>...</del>	在文字中间显示一条线
引用	<q>...</q>	短引用，并在文字两侧出现双引号
	<cite>...</cite>	长引用，文字显示为斜体
上标	<sup>...</sup>	包含的内容显示在文字的右上角
下标	<sub>...</sub>	包含的内容显示在文字的右下角
块状组合	<div>...</div>
行内组合	<span>...</span>
格式化标签	<pre>...</pre>	以代码原格式化输出文本

文本格式标签--使用实例

<!DOCTYPE html>
<html>
    <head>
        <title>文本格式标签</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>文本格式标签</h3>
        <!-- 换行 -->
        换行标签<br />
        <!-- 段落 -->
        <p>这是一段内容</p>
        <!-- 加粗 -->
        <b>加粗内容</b>
        <strong>加粗并强调内容</strong><br />
        <!-- 斜体 -->
        
        <i>斜体内容</i>
        <em>斜体并强调内容</em><br />
        <!-- 下划线、删除线 -->
        <u>文本内容下划线</u>
        <del>文本内容贯穿线</del><br />
        <!-- 上下标、格式化 -->
        x<sup>2</sup>
        H<sub>2</sub>O
        <pre>
            原格式输出文本，保留代码中的空格，enter键换行效果，
            及代码的原形输出。
        </pre>
        
        <!-- 块状组合、行内组合 -->
        <div>块状组合，支持CSS去设置宽高，自带换行效果</div>
        <span>行内组合，不支持设置宽高等，无换行效果</span>
    </body>
</html>

2.2 列表标签

标签名称	代码	type属性取值	效果
有序列表	<ol><li>...</li></ol>	A,I(大写的i),i,1,a	以一种规则有序排列
无序列表	<ul><li>...</li></ul>	circle(空心圆圈)、square(实心方块)	无规则的进行排列
列表项	<li>...</li>
自定义列表	<dl>...</dl>
自定义列表头	<dt>...</dt>
自定义列表项	<dd>...</dd>

列表标签--使用实例

<!DOCTYPE html>
<html>
    <head>
        <title>列表标签</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>列表标签</h3>
        <!-- 无序列表 -->
        <ul type="square">
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
        </ul>
        
        <!-- 有序列表 -->
        <ol type="I">
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
        
        <!-- 自定义列表--会显示成一种聊天的排版 -->
        <dl>
            <dt>小明说：</dt>
            <dd>小红，你吃过了吗？</dd>
            <dt>小红说：</dt>
            <dd>嗯嗯，我吃过了啊。</dd>
        </dl>
    </body>
</html>

2.3 文本特殊标签

标签名称	代码	属性	取值
文字滚动	<marquee>...</marquee>	direction (文字滚动的方向)	up,down,left,right
		loop (重复次数)	数字1.2.3……
文字转向	<bdo>...</bdo>	dir	ltr (文字默认转向)
			rtl (文字从右向左转动)
下拉分组	<details>...</details>
	<summary>...</summary>	设置下拉分组的名称	文本
文字缩写	<abbr>...</abbr>	title	text

文本特殊标签--使用实例

<!DOCTYPE html>
<html>
    <head>
        <title>文本特殊标签</title>
        <meta charset="utf-8">
        <style type="text/css">
            ul,li{
                margin:0;
                padding:0;
            }
            ul{
                list-style:none;
            }
            #marquee{
                color:red;
                font-size:18px;
            }
            details{
                width:200px;
                border:1px dashed #ddd;
            }
        </style>
    </head>
    <body>
        <h3>文本特殊标签</h3>
        <!-- 滚动标签marquee -->
        <marquee direction="right" width="500" loop="2" id="marquee">滚动起来吧，皮卡丘</marquee><br />
        <!-- width--设置宽度，后期都用CSS进行修饰 loop--循环次数 -->
        <!-- 文字转向标签bdo -->
        <bdo dir="rtl">文字的转向</bdo><br />
        <!-- 文字缩写标签abbr -->
        <abbr title="Linux Apache MySQL PHP">LAMP是一个优秀的架构</abbr>
        <!-- 下拉分组details -->
        <details>
            <!-- 设置下拉分组的名称 -->
            <summary>下拉分组</summary>
            <ul>
                <li>分组一</li>
                <li>分组二</li>
                <li>分组三</li>
            </ul>
        </details>
    </body>
</html>

第三章链接标签

链接标签，用于定义一个超链接a，连接到另一个页面

属性	取值	作用
href (必须)	url (#表示空链接)	链接的文件或页面地址
title	text	鼠标悬浮超链接上时显示的信息
target	_self	在本窗口打开
	_blank	在新窗口打开
	_top	在顶级窗口打开
	_parent
	framename	在相应的窗口名打开
id (以前用的是name)		定义一个锚点

链接标签--使用实例

<!DOCTYPE html>
<html>
    <head>
        <title>链接标签</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width:200px;
                height:1000px;
            }
            div.one{
                background-color:red;
            }
            div.two{
                background-color:cyan;
            }
        </style>
    </head>
    <body>
        <h3>链接标签</h3>
        <a href="http://www.baidu.com/" title="文字提示信息" target="_self">百度</a><br />
        <a href="http://www.baidu.com/" title="文字提示信息" target="_blank">百度</a><br />
        <!-- 锚点 -->
        <a href="#maodian">跳到版块二</a>
        <!-- <a href="http://www.baidu.com/" title="文字提示信息" target="_top">百度</a><br />
        <a href="http://www.baidu.com/" title="文字提示信息" target="_parent">百度</a><br /> -->
        <div class="one">版块一</div>
        <div class="two"><a id="maodian">版块二</a></div>
    </body>
</html>

锚点使用步骤：

定义一个锚点 <a id="maodian"></a>
使用锚点 <a href="#maodian">使用锚点</a>

第四章多媒体标签

4.1 音视频标签

音频标签audio与视频标签vedio都具有以下特征：

属性	取值	描述
src	url	音视频文件的地址
autoplay	true \| false \| 只写autoplay	文件自动播放 (谷歌浏览器不支持)
controls	true \| false \| 只写controls	控制器
poster (视频标签)	url	视频播放前的预览画面

4.2 资源标签

source

属性	取值	描述
src	url	资源地址
type	audio/mpeg,video/mp4, embed/	资源的类型

4.3 插件标签

embed

多媒体标签--使用实例

<!DOCTYPE html>
<html>
    <head>
        <title>多媒体标签</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>多媒体标签</h3>
        <!-- 音频标签 -->
        <!-- 写法一 -->
        <audio src="./fei.mp3" controls="true"></audio>
        <!-- 写法二 -->
        <audio controls autoplay>
            <source src="./fei.mp3" type="audio/mpeg">
             <!-- 上边资源失效时，启用下面音频资源 -->
            <source src="./1.mp4" type="audio/mp4">
        </audio><br />
        
        <!-- 视频标签 -->
        <video controls autoplay poster="./2.png" width="480" height="260">
            <source src="./movie.webm" type="video/webm">
        </video><br />
        
        <!-- 插件标签 -->
        <embed src="./haowan.swf">
    </body>
</html>

第五章图片标签

img

5.1 图片标签

属性	取值	描述
src (必须)	url	图片所在地址
alt	text	图片加载失败时的提示信息
title	text	鼠标悬浮图片上显示的信息
usemap	url	使用图片映射功能

图片标签--使用实例

<!DOCTYPE html>
    <html>
    <head>
        <title>图片标签</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>图片标签</h3>
        <img src="./2.png" alt="图片加载失败时提示的信息" title="图片信息">
    </body>
</html>

5.2 图像映射标签

标签	属性	取值	作用
<map>...</map>	name	text	定义图像映射的名称，用于与img标签相关联
<area> (永远嵌套在map中使用)	shape	rect(矩形) circle(圆形)	定义可选区域的形状
	coords	坐标值	可选区域的坐标 (矩形四个值，圆形三个值，值中间用英文逗号隔开)

图像映射--使用实例

area标签定义一块可选区域，map中定义一个name名称，img标签使用usemap属性取值为map的name名称进行相关联。

<!DOCTYPE html>
<html>
    <head>
        <title>图片映像标签</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>图片映像标签</h3>
        <img src="./2.png" usemap="photo">
        <!-- map定义一块可选区域，usemap属性将img与map进行关联，area标签永远嵌套在map中使用 -->
        <map name="photo" >
            <area shape="rect" coords="130,90,250,160">
        </map>
    </body>
</html>

第六章表格标签

在H5中，table内标签的多数属性都不再使用，全都用CSS去修饰。

thead,tbody,tfoot三个标签要使用一个时，其余两个必须使用，且标签中必须包含tr标签。使用顺序为，thead->tfoot->tbody。

标签	属性	取值	描述
table	border	数值	设置边框的粗细
	cellspacing	数值	单元格之间的距离(外边距)
	cellpadding	数值	内容与单元格的距离(内填充)
	align	left \| center \| right	定义表格整体的位置
caption			表格的标题
th	与td拥有属性一致		列头标签
tr	不支持合并		行标签
td	align	left \| center \| right	定义文字的水平方向
	valign	top \| middle \| bottom	定义文字的垂直方向
	bgcolor	颜色选择	设置背景颜色
	rowspan	数值	跨行合并
	colspan	数值	跨列合并
thead			定义表头
tbody			定义标题
tfoot			定义表尾

表格标签--使用实例

<!DOCTYPE html>
<html>
    <head>
        <title>表格标签</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>表格标签</h3>
        <table border="1" cellspacing="0" width="500" height="200">
            <caption>表格标题</cpation>
            <!-- 定义表头 -->
            <thead>
                <tr bgcolor="red">
                    <th bgcolor="green">行标题1</th>
                    <th>行标题2</th>
                    <th>行标题3</th>
                </tr>
            </thead>
            
            <!-- 定义表尾 -->
            <tfoot>
                <tr align="center">
                    <td bgcolor="cyan">单元格1</td>
                    <td align="left" valign="bottom">单元格2</td>
                    <td valign="top" rowspan="2">单元格3</td>
                </tr>
            </tfoot>
            
            <!-- 定义表体 -->
            <tbody>
                <tr valign="bottom">
                    <td colspan="2">单元格4</td>
                    <!-- <td>单元格5</td> -->
                    <!-- <td>单元格6</td> -->
                </tr>
            </tbody>
        </table>
    </body>
</html>

第七章表单标签

7.1 表单标签

7.1.1 表单form

属性	取值	描述
action (必须)	url	定义一个url，提交时向这个链接发送数据
method (发送数据的方式)	get	地址栏可见，不安全
	post	地址栏不可见，较安全
enctype	multipart/form-data	提交类型 (只有当表单有文件上传，即type="file",才是用)

7.1.2 表单项input

属性	取值	描述
type	text	定义文本框
	password	定义密码框
	radio	单选
	checkbox	多选
	submit	提交按钮
	reset	重置按钮
	button	普通按钮
	hidden	定义隐藏域
	file (muiltiple)	定义文件上传
	image	图片
	range	定义范围
	time	时间
	week	周
	month	月
	date	日期
	color	颜色选择器
	url	路径
	number	数字
	email	邮箱
	search	定义搜索
name	text	表单项名称
value	text	表单项的值
size	数值	定义输入框的大小
readonly		为输入框设置只读属性
disabled		为输入框设置禁用属性
checked		为输入框设置默认选中项
accesskey	字母	为输入框设置快捷键 (Alt+所设置字母)
tabindex		通过数字定义tab切换顺序
maxlength		定义输入框输入内容的最大长度
min	数值	定义最小值
max	数值	定义最大值
placeholder	text	给输入框预设一段文字

value属性的注意事项：

不能与type="file"一起使用；与type属性为radio、checkbox使用时，必须加上value值；
对于文本框、密码框、隐藏域，value值定义的是文本框中的默认内容；
对于按钮、提交按钮、重置按钮，value值定义的是按钮上的文字；
对于单选框、复选框，value值定义的是input元素被点击的结果。

input表单项--使用实例

<!DOCTYPE html>
<html>
    <head>
        <title>input表单</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>input表单</h3>
        <form action="#">
            姓名:<input type="text" name="usename" value="seabert" readonly><br />
            密码:<input type="password" name="passwd" size="10" disabled><br />
            性别:<input type="radio" name="sex" value="0">男
            
            <!-- checked默认选中项 -->
                <input type="radio" name="sex" value="1" checked>女<br />
            爱好:
            <input type="checkbox" name="hobby[]" value="0">跑步
            <input type="checkbox" name="hobby[]" value="1">读书
            <input type="checkbox" name="hobby[]" value="2">做饭
            <input type="checkbox" name="hobby[]" value="3">旅游<br />
            
            <!-- maxlength定义文本框内容的最大输入长度 -->
            邮箱:<input type="email" name="eamil" maxlength="10"><br/>
            数字:<input type="number" name="num"><br />
            颜色:<input type="color" name="color"><br />
            
            <!-- accesskey设置跳转快捷键 Alt+所设置的字母 -->
            网址:<input type="url" name="url" accesskey="s"><br />
            日期:<input type="date" name="date"><br />
            时间:<input type="time" name="rime"><br />
            周:<input type="week" name="week"><br />
            月:<input type="month" name="month"><br />
            范围:0<input type="range" min="0" max="20" name="range">20<br />
            隐藏:<input type="hidden" name="hidden"><br />
            
            <!-- multiple定义多个文件上传 -->
            文件上传:<input type="file" multiple><br />
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </form>
    </body>
</html>

7.1.3 下拉框select

属性	取值	描述
name	text	定义下拉框的表示名称
size	数值	定义下拉框的可见数量
multiple		设置多选，默认数量为4个 (默认为单选)

下拉框的子标签option

属性	描述
value	定义传送向服务器的值
selected	设置下拉框的默认选中项

下拉框--使用实例

<!DOCTYPE html>
<html>
    <head>
        <title>下拉框select</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>下拉框select</h3>
        <form action="#" method="get">
            <select name="xlk" multiple size="5">
                <option value="0">下拉框一</option>
                <option value="1">下拉框二</option>
                <option value="2" selected>下拉框三</option>
                <option value="3">下拉框四</option>
                <option value="4">下拉框五</option>
                <option value="5">下拉框六</option>
            </select>
        </form>
    </body>
</html>

7.1.4 文本域textarea

textarea没有value值，默认内容写在标签中间，不要留有空格。

属性	描述
name	定义文本域的名称
rows	定义文本域的行数
cols	定义文本域的列数

文本域--使用实例

<!DOCTYPE html>
<html>
    <head>
        <title>文本域textarea</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>文本域textarea</h3>
        <!-- textarea的内容要在开始于结束标签中顶格写，否则会输出空格等效果 -->
        <textarea name="text" rows="10" cols="50">文本域内容</textarea>
    </body>
</html>

7.2 H5新增表单标签

7.2.1 fieldset标签

将表单内的相关元素分组，用legend标签定义标题

7.2.2 datalist标签

定义可选的数据列表，与input搭配使用

使用步骤：

datalist标签定义一个id名称
input标签使用list属性进行相关联

7.2.3 optgroup标签

定义选项组，可用于下拉列表，用label属性定义分组名称

HTML5新增表单标签--使用实例

<!DOCTYPE html>
<html>
    <head>
        <title>H5新增表单标签</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>H5新增表单标签</h3>
        <form action="#">
            <!-- fieldset将表单内的相关元素进行分组 -->
            <fieldset>
                <legend>HTML5新增表单</legend>
                搜索:<input type="search" list="db" name="search" placeholder="请选择你喜欢的人物">
                <!-- datalist定义可选数据的列表 -->
                <datalist id="db">
                    <option value="张艺谋">导演</option>
                    <option value="吴磊">演员</option>
                    <option value="林志玲">模特</option>
                    <option value="沈腾">喜剧人</option>
                </datalist>
            </fieldset><br />
            
            <!-- optgroup定义下拉列表分组 -->
            <select name="xlfz">
                <optgroup label="分组一">
                    <option>列表一</option>
                    <option>列表一</option>
                    <option>列表一</option>
                </optgroup>
                <optgroup label="分组二">
                    <option>列表二</option>
                    <option>列表二</option>
                    <option>列表二</option>
                </optgroup>
                <optgroup label="分组三">
                    <option>列表三</option>
                    <option>列表三</option>
                    <option>列表三</option>
                </optgroup>
            </select>
        </form>
    </body>
</html>

posted @ 2018-10-05 18:19 宋小羽阅读(245) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

荆白

因为菜，所以更要努力学习！

HTML基础知识

第一章 HTML主体结构

1.1 HTML主体结构

1.2 HTML头部语法

1.2.1 title标签

1.2.2 meta标签

1.2.3 link标签

1.3 HTML实体符

第二章文本标签

2.1 文本标签

2.1.1 标题标签

2.1.2 文本格式标签

2.2 列表标签

2.3 文本特殊标签

第三章链接标签

第四章多媒体标签

4.1 音视频标签

4.2 资源标签

4.3 插件标签

第五章图片标签

5.1 图片标签

5.2 图像映射标签

第六章表格标签

第七章表单标签

7.1 表单标签

7.1.1 表单form

7.1.2 表单项input

7.1.3 下拉框select

7.1.4 文本域textarea

7.2 H5新增表单标签

7.2.1 fieldset标签

7.2.2 datalist标签

7.2.3 optgroup标签

公告

荆白

因为菜，所以更要努力学习！

HTML基础知识

第一章 HTML主体结构

1.1 HTML主体结构

1.2 HTML头部语法

1.2.1 title标签

1.2.2 meta标签

1.2.3 link标签

1.3 HTML实体符

第二章 文本标签

2.1 文本标签

2.1.1 标题标签

2.1.2 文本格式标签

2.2 列表标签

2.3 文本特殊标签

第三章 链接标签

第四章 多媒体标签

4.1 音视频标签

4.2 资源标签

4.3 插件标签

第五章 图片标签

5.1 图片标签

5.2 图像映射标签

第六章 表格标签

第七章 表单标签

7.1 表单标签

7.1.1 表单form

7.1.2 表单项input

7.1.3 下拉框select

7.1.4 文本域textarea

7.2 H5新增表单标签

7.2.1 fieldset标签

7.2.2 datalist标签

7.2.3 optgroup标签

公告

第二章文本标签

第三章链接标签

第四章多媒体标签

第五章图片标签

第六章表格标签

第七章表单标签