网页的基本信息
1.DOCTYPE声明
文档类型的声明,约束HTML文档结构,检验是否符合相关Web标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档第一行
<!DOCTYPE html>
2.title标签
<title>搜狐-中国最大的门户网站</title>
3.meta标签
描述网页的摘要信息,文档内容类型、搜索关键字网站提供的功能和服务的详细描述。
属性:charset表示字符集编码
常用的编码有以几种:
- gb2312:简体中文,一般用于包含英文和中文的页面。
- ISO-885901:纯英文,一般用于只包含英文的页面。
- big5:繁体,一般用于带有繁体字的页面。
- UTF-8:国际性通用的字符编码,同样适用于中文和英文的页面。和gb2312相比,国际通用性更好。
注意:标签里有个属性lang=“en”,它的意思是表示页面是英文的。
网页的基本标签
1.标题标签
HTML共提供了六级标题h1~h6
<h1> 字号最大,<h6> 字号最小
2.段落标签
<p>…</p>段落标签
3.换行标签*
<br/>强制换行
4.水平线标签**
<hr/>表示一条水平线
5.字体样式标签**
<strong>加粗</strong>
<em>倾斜</em>
注释和特殊符号
1.注释
<!-- 注释内容 -->
当页面的HTML结构复杂或内容较多时,需要添加必要的注释方便代码阅读或维护。
2.特殊符号*
 ;空格 |
---|
>;大于号(>) |
<;小于号(<) |
";引号(") |
©;版权符号@ |
图像标签
常见的图像格式:
(1)JPG格式
(2)GIF格式
(3)BMP格式
(4)PNG格式
图像标签的基本语法:
<img src="图片地址" alt="图像显示不出来的代替文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度"/>
超链接标签
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
- href:表示链接地址的路径
- target:指定链接在哪个窗口打开,常用的取值有_self(自身窗口)、_blank(新建窗口)。
- 超链接可以是文本链接,也可以是图像超链接。
- 当超链接href链接路径为“#”时,表示空链接
超链接的应用场合
- 页面间链接:从一个页面链接到另一个页面
- 锚链接:常用于目标页内容很多,需定位到目标页内容的某个具体位置时
(1)name为a标签的属性,marker为标记名。
<a name="marker">目标位置乙</a>
(2)设置甲位置链接路径href属性值为"#标记名"
<a href="#marker">当前位置甲</a>
- 功能性链接:单击链接时启动本机自带的某个应用程序
行内元素和块元素
- 块元素的特征:无论内容多少,该元素独占一行
- 行内元素特征:内容撑开宽度,左右都是行内元素可以排在一行
列表
1.无序列表
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
无序列表的特性:
- 没有顺序,每个
- 标签独占一行(块元素)。
- 默认
- 标签项前面有个实心小圆心。
2.有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
有序列表的特性:
- 有顺序,每个
- 标签独占一行(块元素)
- 默认
- 标签项前面有顺序标记
3.定义列表
<dl>
<dt>标题一</dt>
<dd>第1项</dd>
<dd>第2项</dd>
<dd>第3项</dd>
<dt>标题二</dt>
<dd>第1项</dd>
<dd>第2项</dd>
<dd>第3项</dd>
</dl>
- 没有顺序,每个dt标签,dd标签独占一行(块元素)
- 默认没有标记
- 一般用于(一个标题下有一个或多个列表项)*n的情况
表格
1.基本表格
<!--这是一个三行两列的表格-->
<table border="边框宽度">
<tr>
<th>1行1列的标题</th>
<th>1行2列的标题</th>
</tr>
<tr>
<td>1行1列的单元格</td>
<td>1行2列的单元格</td>
</tr>
<tr>
<td>2行1列的单元格</td>
<td>2行2列的单元格</td>
</tr>
</table>
tr为行,td为列,th为标题
显示表格的轮廓,在
标签里设置border边框属性,指定边框的宽度。跨列
<table>
<tr>
<td colspan="所跨的列数">单元格内容</td>
</tr>
</table>
colspan的意思是跨列。
跨行
<!--
1.rowspan为行的意思。即跨行
2.跨行是指单元格在垂直方向上的合并
-->
<table>
<tr>
<td rowspan="所跨的行数">单元格内容</td>
</tr>
</table>
媒体元素
添加视频
- HTML5中video元素是用来播放视频文件的,支持Ogg、MPEG4、Webm、等视频格式。
<video src="视频路径" controls></video>。
- src指定要播放的视频文件的路径。
- controls提供播放、暂停、和音量控件。
- width和height设置视频的宽度和高度。
- autoplay自动播放。
- 如果浏览器不支持video元素,可以在video元素中间插入一段文字用于提示
添加音频
HTML5中audio元素是用来播放音频文件的,支持Ogg、MP3、WAV、等频格式。
<!--属性可以较上面添加视频为参考-->
<audio src="音频路径" controls></audio>
source元素(音频和视频都能用)
<!--
video标签很难让每种浏览器都支持这种格式
source元素嵌套在video里面,并且可以出现多次 ,每个source元素对应一种格式的视频。
-->
<video autoplay>
<source src="video/video.webm"/>
<source src="video/video.mp4"/>
你的浏览器不支持video标签
</video>
页面布局分析
header:标题头部区域的内容(用于页面或页面中的一块区域)。 |
---|
footer:标记脚部区域的内容(用于页面或页面中的一块区域)。 |
section:Web页面中的一块独立区域。 |
article:独立的文章内容。 |
aside:相关内容或应用(常用与侧边栏)。 |
nav:导航类辅助内容。 |
iframe框架
<!--<iframe> 框架的主要作用是使页面中的部分内容用框架实现,一般用与引用站外的页面内容。-->
<iframe src="引用页面地址" name="框架标记名"></iframe>
iframe的属性使用
常用属性name、width、height。
(1)在被打开的框架上加name属性:
<iframe name="窗口标记名" src="链接地址"/>
(2)在超链接上设置target目标窗口属性为希望显示的框架窗口名:
<a href="链接地址" target="窗口标记名">下边显示第二页</a>
表单
1.表单标签及表单属性:
<!--
action此属性指示服务器上处理表单输出的程序。
action="URL"
如果action的值为空,则默认表单提交到本页。
-->
<!--
method属性告诉浏览器如何将数据发送给服务器
method=(get || post)
(1)post方法提交方式不会改变地址栏状态,表单数据不会被显示
(2)get方法提交方式,地址栏状态会发生变化
-->
<fo action="../abc.html" method="post">
<input type="text" name="username" />
<input type="password" name="pwd" />
<input type="submit" />
</form>
input元素的常用属性:
type:指定表单元素类型。
-
文本框:type = “text”
-
密码框:type = “password”
-
单选按钮:type = “radio”
-
复选框:type = “checkbox”
-
按钮:
普通按钮:type = “button” | 属于普通按钮,需要和事件关联使用。 |
---|---|
提交按钮:type = “submit” | 点击表单将会提交到action属性所指定的URL,并传递数据. |
重置按钮:type = ”reset“ | 填写或输入的数据清空 |
-
图片按钮:type = “image”
-
邮箱文本框:type = “email”
如果输入的不是有效邮箱地址,则不允许提交
-
数字文本框:
number类型的属性 |
---|
value:规定的默认值 |
max:规定允许的最大值 |
min:规定允许的最小值 |
setp:规定合法的数字间隔(如果step=“2”,则合法的数字是-2、0、2、4等 |
- 网址框:type = “url”
- 滑块:type = “range”
- 搜索框:type = “search”
- 文件域:type = “file”
- 多行文本域
<textarea name="textarea" cols="显示的列数" rows="显示的行数">文本内容</textarea
<!--
添加checked属性默认选中此选项
-->
<form action="" method="post">
<!--单选按钮-->
<input type="radio" name="gen" value="男" checked/>男
<input type="radio" name="gen" value="女" />女
<!--复选框-->
<br/>爱好:
<input type="checkbox" name="interest" value="运动" checked/>运动
<input type="checkbox" name="interest" value="聊天" />聊天
<input type="checkbox" name="interest" value="玩游戏" />玩游戏
<!--普通按钮-->
<input type="button" value="点击" />
<!--提交按钮-->
<input type="submit" />
<!--重置按钮-->
<input type="reset" />
<!--图片提交按钮-->
<input type="image" src="../1.img" />
<!--邮箱文本框-->
<input type="email" />
<!--网址框-->
<input type="url" />
</form>
- name:指定表单元素的名称。
- value:指定表单元素的初始值。如果type为radio类型,则必须指定一个值
- size:此属性指定表单元素的初始宽度。如果type为text类型或password类型,则表格元素以字符为单位(框的长短)
- maxlength:此属性用于指定可在text或password元素中输入的最大字符数。默认值为无限大
- checked:此属性用于与指定按钮是否被选中。当输入类型为redio(单选按钮)或checkbox(复选框)时,使用此属性.
设置表单的隐藏域
- 将type属性设置为hidden隐藏类型即可创建一个隐藏域
- 例如,在登录页面中使用隐藏域保存用户的userid信息
表单的只读与禁用设置
只读:readonly(input属性)
禁用:disabled(input属性)
- W3C HTML5标准中,规定对于布尔类型的属性,属性值可以省略
表单元素的标注
对表单元素进行标注,目的是为了增强鼠标的可用性
<label for="表单元素的id">标注的文本</label>
对于表单元素而言,其name属性和id属性是必需的。
name属性由表单负责处理,而id属性是给标签和表单元素关联使用的。
表单的初级验证
-
placeholder提示
placeholder属性用于input类型的文本框提供一种提示,这种提示可以描述文本框期待用户输入何种内容
在输入为空时显示,当在文本框写入内容时消失。 -
required必填项
required属性用于规定文本框填写内容不能为空,否则不允许用户提交。
-
pattern验证输入格式
pattern属性用于验证input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配。