目录
基础元素
标签之标题
标题(Heading)是通过<h1>-<h6>标签进行定义的。
<h1>定义最大的标题 <h6>定义最小的标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
生成h1~h6快捷键:h$*6
标题标签位置摆放
在标签中添加属性: align="left | center | right" 默认居左
标签之段落、换行、水平线
标签之段落
段落是通过<p>标签定义的
<p>这是一个段落 </p>
<p>这是另一个段落</p>
换行
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br>
<br>元素是一个空的 HTML 元素。
<p>这个<br>段落<br>演示了分行的效果</p>
水平线
<hr/>标签在 HTML 页面中创建水平线
<hr color="" width="" size="" align=""/>
属性:
1 color:设置水平线的颜色
2 width:设置水平线的长度
3 size:设置水平线的高度
4 align:设置水平线的对齐方式(默认居中),可取值left|right
标签之图片
网站中最多的元素毋庸置疑,一定是图片
<img>标签定义 HTML 页面中的图像
<img src="" alt="" title="" width=""
height="">
注意事项: <img>是单标签,不需要进行闭合操作
属性:
1 src:路径(图片地址与名字)
2 alt:规定图像的替代文本
3 width:规定图像的宽度
4 height:规定图像的高度
5 title:鼠标悬停在图片上给予提示
路径详解
绝对路径
绝对路径是电脑的盘符存储与访问的具体地址
比如:E:\itbaizhanCode\1.jpg
<img src="E:\itbaizhanCode\1.jpg">
相对路径
两者相对关系,两者在同⼀路径下可以直接访问
1 ⼦级关系: /
2 ⽗级关系: ../
3 同级关系: ./
网络路径
具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png
标签之超文本链接
超链接描述
HTML使用标签<a>来设置超文本连接
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像, 您可以点击这些内容来跳转到新的文档或者当前文档中的某个部 分。
超链接属性
在标签<a>中使用了 href 属性来描述链接的地址 默认情况下,链接将以,以下形式出现在浏览器中: 1 一个未访问过的链接显示为蓝色字体并带有下划线。 2 访问过的链接显示为紫色并带有下划线。 3 点击链接时,链接显示为红色并带有下划线。
<a href="url">链接文本</a>
超链接之锚点
超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个 部分。 跳转到当前文档的某个部分的形式就是“锚点”
锚点实现方式
<a href="#hello">跳转到当前页</a>
<p id="hello">文本信息</p>
标签之文本
常用文本标签
特别提示
常用文本标签和段落是不同的,段落代表一段文本,而文本标 签一般表示文本词汇
列表标签之有序列表
有序列表是一列项目,列表项目使用数字进行标记。 有序列表始于<ol>标签。每个列表项始于<li>标签。
<ol>
<li>学习</li>
<li>打游戏</li>
</ol>
type属性
<ol>的属性type 拥有的选项
1 表示列表项目用数字标号(1,2,3...)
2 a 表示列表项目用小写字母标号(a,b,c...)
3 A 表示列表项目用大写字母标号(A,B,C...)
4 i 表示列表项目用小写罗马数字标号(i,ii,iii...)
5 I 表示列表项目用大写罗马数字标号(I,II,III...)
有序列表嵌套
列表是可以进行嵌套的
<ol>
<li>购物</li>
<li>
<ol>
<li>阿里</li>
<li>京东</li>
</ol>
</li>
<li>外卖</li>
</ol>
列表标签之无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑 圆圈)进行标记 无序列表始于
<ul>标签。每个列表项始于<li>标签。
<ul>
<li>学习</li>
<li>打游戏</li>
</ul>
type属性
<ul>的属性type 拥有的选项
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示
无序列表嵌套
列表是可以进行嵌套的
<ul>
<li>购物</li>
<li>
<ul>
<li>阿里</li>
<li>京东</li>
</ul>
</li>
<li>外卖</li>
</ul>
常见应用场景
1 无序的列表效果
2 导航效果
导航效果
<ul>
<li>Xiaomi手机</li>
<li>Redmi 红米</li>
<li>电视</li>
<li>笔记本</li>
</ul>
快捷键
快速生成ul+li的布局:ul>li*3(数字根据自己的需要的li数量修 改)
列表标签之自定义列表
自定义列表实现 自定义列表不仅仅是一列项目,而是项目及其注释的组合。 自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每 个自定义列表项的定义以<dd>开始。
<dl>
<dt>淘宝</dt>
<dd>唯品会</dd>
<dt>京东</dt>
<dd>阿里</dd>
</dl>
标签之表格
表格组成与特点
行、列、单元格
单元格特点:同行等高、同列等宽。
表格标签
表格:<table>
行:<tr>
单元格:<td>
<table>
<tr>
<td>购物</td>
<td>外卖</td>
</tr>
<tr>
<td>阿里</td>
<td>京东</td>
</tr>
</table>
表格属性详解
<table>表格属性 border:设置表格的边框 width:设置表格的宽度 height:设置表格的高度 align:设置表格的水平对齐方式 cellpadding:设置内容距离边框的距离 cellspacing:设置单元格之间的距离 bgcolor:设置表格背景颜色 b ordercolor:设置边框颜色 background:设置背景图片 |
<tr>的属性
height:设置一行的高度
bgcolor:设置一行的背景颜色
background:设置一行的背景图片
align:设置行里内容水平对齐方式,取值:left、center、right
valign:设置行里内容垂直对齐方式,取值:top、middle、bottom
<td>的属性
width:设置单元格的宽度,同列等宽
height:设置单元格的高度,同行等高
align:设置单元格内容水平对齐方式
valign:设置单元格内容垂直对齐方式
bgcolor:设置单元格背景颜色
background:设置单元格背景图片
表格单元格合并
单元格合并属性
水平合并:colspan
垂直合并:rowspan
<table align="center" border=""
width="500px" height="200px"
cellspacing="0">
<tr>
<td colspan="3">单元格1单元格2单元格
3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td rowspan="2">单元格6-11</td>
<td>单元格7</td>
<td rowspan="3">单元格81318</td>
<td colspan="2" rowspan="2">单元格
9101415</td>
</tr>
<tr>
<td>单元格12</td>
</tr>
<tr>
<td>单元格16</td>
<td>单元格17</td>
<td>单元格19</td>
<td>单元格20</td>
</tr>
</table>
Form表单
表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的 输入框,提交按钮等,这些输入框,按钮叫做控件,表单就是容器,它能 够容纳各种各样的控件
<form action="url" method="get|post"
name="myform"></form>
属性说明
action服务器地址
name表单名称
method中Get和Post的区别
1 数据提交方式,get把提交的数据url可以看到,post看不到
2 get一般用于提交少量数据,post用来提交大量数据
表单元素
一个完整的表单包含三个基本组成部分:表单标签、表单域、表单 按钮
1 表单标签
2 表单域
3 表单按钮
<form>
<input type="text">
<input type="submit">
</form>
文本框
文本域通过<input type="text">标签来设定,当用户要在表单中键入字 母、数字等内容时,就会用到文本域
<form>
First name: <input type="text"
name="firstname">
<br>
Last name: <input type="text"
name="lastname">
</form>
密码框
密码字段通过标签<input type="password">来定义
<form>
Password: <input type="password"
name="pwd">
</form>
温馨提示
密码字段字符不会明文显示,而是以星号或圆点替代
单选按钮
<input type="radio">标签定义了表单单选框选项
<form>
<input type="radio" name="sex"
value="male">Male
<br>
<input type="radio" name="sex"
value="female">Female
</form>
复选框
<input type="checkbox">定义了复选框. 用户需要从若干给定的选择中选取 一个或若干选项
<form>
<input type="checkbox" name="vehicle"
value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle"
value="Car">I have a car
</form>
文件
定义文件选择字段和 "浏览..." 按钮,供文件上传
<form>
<input type="file" name="img">
</form>
提交按钮
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单 的动作属性定义了目的文件的文件名。由动作属性定义的这个文件 通常会对接收到的输入数据进行相关的处理
<form name="input" action="url" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
重置按钮
定义重置按钮(重置所有表单值为默认值)
<form name="input" action="url" method="get">
Username: <input type="text" name="user">
<input type="reset">
</form>
按钮
没有任何功能的按钮
<form name="input" action="url" method="get">
<input type="button" value="点我"/>
<button>点我</button>
</form>
图像图片按钮
定义图像作为提交按钮
<form name="input" action="url" method="get">
<input type="image" src="close.jpg" />
</form>
下拉列表
<select>元素用来创建下拉列表。
<option>标签定义下拉列表中的一个选项(一个条目)
<form name="input" action="url" method="get">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option
value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</form>
多行文本框
<textarea>标签定义一个多行的文本输入控件。文本区域中可容纳无限 数量的文本。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的 办法是使用 CSS 的 height 和 width 属性
<form name="input" action="url" method="get">
<textarea rows="10" cols="30">我是一个文本
框</textarea>
</form>
label
<label>标签为 input 元素定义标注(标记)。 label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进 了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是 说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关 的表单控件上。
<label>标签的 for 属性应当与相关元素的 id 属性相同
HTML5新增type类型
定义用于 e-mail 地址的字段(当提交表单时会自动对 email 字段的 值进行验证)
<form>
E-mail: <input type="email"
name="usremail">
<input type="submit">
</form>
url
定义用于输入 URL 的字段
<form>
<input type="url" name="homepage">
<input type="submit">
</form>
search
定义搜索字段(比如站内搜索或谷歌搜索等)
<form>
Search Google: <input type="search"
name="googlesearch">
<input type="submit">
</form>
tel
定义用于输入电话号码的字段
<form>
电话号码: <input type="tel" name="usrtel">
<input type="submit">
</form>
color
从拾色器中选取颜色
<form>
选择你喜欢的颜色: <input type="color"
name="favcolor">
<input type="submit">
</form>
number
定义用于输入数字的字段(您可以设置可接受数字的限制)
<form>
数量 ( 1 到 5 之间): <input type="number"
name="quantity" min="1" max="5">
<input type="submit">
</form>
range
定义用于精确值不重要的输入数字的控件(比如 slider 控件)。您 也可以设置可接受数字的限制
<form>
<input type="range" name="points" min="1"
max="10">
<input type="submit">
</form>
date
定义 date 控件
<form>
生日: <input type="date" name="bday">
<input type="submit">
</form>
month
定义 month 和 year 控件(不带时区)
<form>
生日 ( 月和年 ): <input type="month"
name="bdaymonth">
<input type="submit">
</form>
week
定义 week 和 year 控件(不带时区)
<form>
选择周: <input type="week"
name="week_year">
<input type="submit">
</form>
HTML5新增属性
autofocus 属性
autofocus 属性规定在页面加载时,域自动地获得焦点。
<form>
User name: <input type="text"
name="user_name" autofocus />
<input type="submit">
</form>
placeholder 属性
placeholder 属性提供一种提示(hint),描述输入域所期待的值
<form>
<input type="search" name="user_search"
placeholder="Search itbaizhan" />
<input type="submit">
</form>
required 属性
required 属性规定必须在提交之前填写输入域(不能为空)
<form>
Name: <input type="text" name="usr_name"
required />
<input type="submit">
</form>
实体字符
我们考虑⼀个问题,如果我们要在页面上显示⼀个 < 的时候,应该 如何来写,如果直接写符号显然是不合理的,毕竟,它是属于标签 的关键字,那我们应该如何来实现呢? 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字 符实体
<p>¥</p>
<p>®</p>
温馨提示
实体名称对大小写敏感!
块元素与行内元素(内联元素)
HTML5出现之前,经常把元素按照块级元素和内联元素来区分。在 HTML5中,元素不再按照这种⽅式来区分, 而是按照内容模型来区 分,分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语 句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别,被称为穿透的, 元素可能属于不止⼀个类别,称为混合的
常见块级元素 div、form、h1~h6、hr、p、table、ul、等
常见内联元素 a、b、em、i、span、strong等
行内块级元素(特点:不换行、能够识别宽高) button、img、input等
HTML新增元素
容器元素(div)
<div>可定义文档中的分区或节(division/section)
<div>标签可以把文档分割为独立的、不同的部分
<div>是一个块级元素。这意味着它的内容自动地开始一个新行
<div>主要应用在布局上,作为布局的每个区域的容器
<body>
<div class="container">
<div class="header">网站头部</div>
<div class="nav">网站导航</div>
<div class="main">
<div class="left">网站主要内容
</div>
<div class="right">网站右侧模块
</div>
</div>
<div class="footer">网站底部</div>
</div>
</body>
HTML5新增布局标签
HTML5 是 HTML 最新的修订版本,2014年10月由万维网联盟 (W3C) 完 成标准制定 在 HTML5 出现之前,我们一般采用 DIV+CSS 布局我们的页面。但是这样 的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎 爬虫对我们页面的爬取。为了解决上述缺点, HTML5 新增了很多新的 语义化标签
视频和音频
HTML5未出来之前,在线的音频和视频都是借助Flash或者第三方 工具实现的,现在HTML5也支持了这方面的功能。在一个支持 HTML5的浏览器中,不需要安装任何插件就能播放音频和视频。
视频
Video标签定义视频,比如电影片段或其他视频流
<video src="movie.mp4" controls>
您的浏览器不支持 video 标签。
</video>
音频
Audio 标签定义声音,比如音乐或其他音频流
<audio src="someaudio.mp3">
您的浏览器不支持 audio 标签。
</audio>
source
<source>标签为媒介元素(比如<video>和<audio>)定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒 体类型或者编解码器的支持进行选择
<audio controls>
<source src="horse.ogg" >
<source src="horse.mp3" >
Your browser does not support the audio
element.
</audio>
HTML5新增标签
figure
用于对元素进行组合。多用于图片与图片描述组合
<figure>
<img src="img.gif" alt="figure标签"
title="figure标签" />
<figcaption>figure的标题</figcaption>
</figure>
details
用于描述文档或文档的某个部分的细节,类似于下拉列表
<details>
<summary>指定的标题,用户点击标题时展示下面
的所有内容,内容可以是任何形式的内容</summary>
<div>
<p>内容描述</p>
</div>
</details>
<!-- 当增设open属性时,描述内容默认展示 -->
<details open>
<summary>指定的标题,用户点击标题时展示下面的
所有内容,内容可以是任何形式的内容</summary>
<div>
<p>内容描述</p>
</div>
</details>
mark
主要用来在视觉上向用户呈现那些需要突出的文字。 标签的 一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词
<p>你是<mark>大长腿</mark>吗?</p>
meter
定义度量衡。仅用于已知最大和最小值的度量
<meter min="0" max="100" value="81" low="20"
high="80"></meter>
progress
运行中的进程。可以使用<progress>标签来显示 JavaScript 中耗费时间的 函数的进程
<progress max="100" value="20"></progress>
datalist
定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值 的下拉列表。 datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。 请使用 input 元素的 list 属性来绑定 datalist
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
canvas
定义图形,比如图表和其他图像