HTML基础

HTML5的基本标签

名称	标签	示例
标题标签	<h1>~<h6>	<h1>静夜思</h1>
段落和换行标签	<p>…</p>、<br/>	<p>床前明月光<br/>疑是地上霜</p>
水平线标签	<hr/>	<hr/>
斜体	<em>…</em>	<em>举头望明月</em>
字体加粗	<strong></strong>	<strong>低头思故乡</strong>

字体样式标签

加粗：<strong>…</strong>

斜体：<em>…</em>

特殊符号

特殊符号	字符实体	示例
空格	&nbsp;	<a href="#">百度</a>&nbsp;|&nbsp; <a href="#">新浪</a>
大于号(>)	&gt;	如果时间&gt;晚上6点，就坐车回家
小于号(<)	&lt;	如果时间&lt;早上7点，就走路去上学
引号(")	&quot;	W3C规范中，HTML的属性值必须用成对的&quot;引起来
版权符号©	&copy;	&copy; 2018 课工场 版权所有

图像标签

语法：<img src="path" alt="text" title="text" width="x" height="y" />

示例：<img src="images/hetao.jpg" width="160" height="160"

alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>

链接标签

语法：<a href="path" target="目标窗口位置">链接文本或图像</a>

target 常用值：_self、_blank

超链接的应用

1、页面间链接：A页到B页，网上常见链接

2、锚链接：跳至自身固定位置，或A页跳到B页固定位置，需锚标记

3、功能性链接：电子邮件、QQ、MSN等链接

锚链接

创建步骤

1、创建跳转标记：<a name="marker">乙位置</a>

2、创建跳转链接：<a href="#marker">甲位置</a>

功能性链接

示例：<a href="mailto:ke@kgc.cn">联系我们</a>

行内元素和块元素

块元素

无论内容多少，该元素独占一行（p、h1-h6…）

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)

列表的应用

无序列表

示例：

<ul>

<li>范冰冰演藏族女孩</li>

<li>撞死两个人后自拍</li>

<li>诗隆甜蜜出游</li>

<li>一线城市楼市退烧</li>

</ul>

有序列表

示例：

<ol>

<li>范冰冰演藏族女孩</li>

<li>撞死两个人后自拍</li>

<li>诗隆甜蜜出游</li>

<li>一线城市楼市退烧</li>

</ol>

定义列表

<dl>

<dt>水果</dt>

<dd>苹果</dd>

<dd>桃子</dd>

<dd>李子</dd>

</dl>

表格的基本语法

语法：

<table>

<tr>

<td>第1个单元格的内容</td>

<td>第2个单元格的内容</td>

……

</tr>

<tr>

<td>第1个单元格的内容</td>

<td>第2个单元格的内容</td>

……

</tr>

</table>

表格的跨行和跨列

表格的跨列：使用colspan属性

<table>

<tr>

<td colspan="n">单元格内容</td> //n表示跨列的行数

</tr>

<tr>

<td>单元格内容</td>

……

</tr>

......

</table>

表格的跨行：使用rowspan属性

示例：

<table>

<tr>

<td rowpan="n">单元格内容</td> //n表示跨行的行数

<td>&nbsp;</td>

</tr>

<tr>

<td>单元格内容</td>

</tr>

</table>

HTML5中的媒体元素

视频元素

video

音频元素

audio

视频元素

语法：

<video src="视频路径" controls></video>

自动播放属性：autoplay

音频元素

语法：

<audio src="音频路径" controls></audio>

HTML5的结构元素

元素名	描 述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

表单的基本结构

语法：

<form method="post" action="result.html">

<p> 名字：<input name="name" type="text" > </p>

<p> 密码：<input name="pass" type="password" > </p>

<p><input type="submit" name="button" value="提交"/></p>

<p><input type="submit" name="button" value="提交"/></p>

</form>

经验：在实际网页开发中通常采用post方式提交表单数据

表单的元素

语法：<input type="text" name="fname" value="text"/>

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

文本框

语法：<input type="text" name="userName" value="用户名" size="30" maxlength="20" />

密码框

语法：<input type="password" name="pass" size="30" maxlength="20" />

单选按钮

语法：

<input name="gen" type="radio" value="男" checked />男

<input name="gen" type="radio" value="女" />女

（radio-单选按钮框 checked --单选按钮的选中状态)

复选框

语法：

<input type="checkbox" name="interest" value="sports"/>运动

<input type="checkbox" name="interest" value="talk" checked />聊天

<input type="checkbox" name="interest" value="play"/>玩游戏

文件域

语法：

<form action="" method="post" enctype="multipart/form-data">

<p><input type="file" name="files" />

<input type="submit" name="upload" value="上传" /></p>

</form>

按钮

语法：

<input type="button" name="butButton" value="button按钮"/> button--普通按钮

<input type="submit" name="butSubmit" value="submit按钮"> submit--提交按钮

<input type="reset" name="butReset" value="reset按钮"> reset--重置按钮

<input type="image" src="images/login.gif" /> image--图片按钮

邮箱：HTML5新增

<p>邮箱:<input type="email" name="email"/></p>

<input type="submit"/>

注意：提交表单时会自动验证Email地址格式是否正确

网址：HTML5新增

<p>请输入你的网址:<input type="url" name="userURL"/></p>

<input type="submit"/>

注意：提交表单时会自动验证URL地址格式是否正确

数字：HTML5新增

<p>请输入数字:<input type="number" min="0" max="100" step="10“ name=“num”/></p>

<input type="submit"/>

注意：提交表单时会自动验证是否在合理的范围内

滑块：HTML5新增

<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p>

<input type="submit"/>

搜索框：HTML5新增

<p>请输入搜索的关键词:<input type="search" name="sousuo"/></p>

<input type="submit"/>

下拉列表框

语法：

<select name="列表名称" size="行数"> select--列表框标签

<option value="选项的值" selected="selected">…</option > selected="selected-选项的选中状态

<option value="选项的值">…</option > option--列表框中的选项

</select>

多行文本域

语法：<textarea name="showText" cols="x" rows="y">文本内容 </textarea>

cols-显示行数

rows-显示列数

表单的高级应用

隐藏域

<input type="hidden" value="666" name="userid"

只读属性：readonly

<input name="name" type="text" value="张三" readonly>

禁用属性：disabled

<input type="submit " disabled value="保存" >

表单元素的标注

标注的作用：

增强鼠标的可用性

自动将焦点转移到与该标注相关的表单元素上

<label for="id">标注的文本</label> for="id"-- 表单元素的id

<input type="radio" name="gender" id="male"/> id="male"--表单元素id

表单初级验证的方法

通过添加表单的属性，实现表单的初级验证

placeholder

required

pattern

placeholder

input类型的文本框提供一种提示（hint）

可以描述文本框期待用户输入何种内容

提示语默认显示，当文本框中输入内容时提示语消失

适合于input标签：text、search、url、email和password等类型

<input type="search" placeholder="请输入要搜索的关键字"/>

required

规定文本框填写内容不能为空，否则不允许用户提交表单

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

<input type="text" name="username" required/>

pattern

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<input type="text" name="tel" required pattern="^1[358]\d{9}" />