html5基础(网页基本标签、图像标签、超链接、列表、表格、媒体元素、iframe框架、表单)

网页的基本信息
1.DOCTYPE声明

文档类型的声明,约束HTML文档结构,检验是否符合相关Web标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档第一行

<!DOCTYPE html>
2.title标签
<title>搜狐-中国最大的门户网站</title>
3.meta标签

描述网页的摘要信息,文档内容类型、搜索关键字网站提供的功能和服务的详细描述。

属性:charset表示字符集编码

常用的编码有以几种:

  1. gb2312:简体中文,一般用于包含英文和中文的页面。
  2. ISO-885901:纯英文,一般用于只包含英文的页面。
  3. big5:繁体,一般用于带有繁体字的页面。
  4. 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.特殊符号*

&nbsp;空格
&gt;大于号(>)
&lt;小于号(<)
&quot;引号(")
&copy;版权符号@
图像标签

常见的图像格式:

(1)JPG格式
(2)GIF格式
(3)BMP格式
(4)PNG格式

图像标签的基本语法:

<img src="图片地址" alt="图像显示不出来的代替文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度"/>

超链接标签

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
  1. href:表示链接地址的路径
  2. target:指定链接在哪个窗口打开,常用的取值有_self(自身窗口)、_blank(新建窗口)。
  3. 超链接可以是文本链接,也可以是图像超链接。
  4. 当超链接href链接路径为“#”时,表示空链接
超链接的应用场合
  1. 页面间链接:从一个页面链接到另一个页面
  2. 锚链接:常用于目标页内容很多,需定位到目标页内容的某个具体位置时

(1)name为a标签的属性,marker为标记名。

<a name="marker">目标位置乙</a>

(2)设置甲位置链接路径href属性值为"#标记名"

<a href="#marker">当前位置甲</a>
  1. 功能性链接:单击链接时启动本机自带的某个应用程序
行内元素和块元素
  1. 块元素的特征:无论内容多少,该元素独占一行
  2. 行内元素特征:内容撑开宽度,左右都是行内元素可以排在一行

列表

1.无序列表
<ul>
	<li>第一项</li>
	<li>第二项</li>
</ul>	

无序列表的特性:

  1. 没有顺序,每个
  2. 标签独占一行(块元素)。
  3. 默认
  4. 标签项前面有个实心小圆心。
2.有序列表
<ol>
	<li>第一项</li>
	<li>第二项</li>
</ol>

有序列表的特性:

  1. 有顺序,每个
  2. 标签独占一行(块元素)
  3. 默认
  4. 标签项前面有顺序标记
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>
  1. 没有顺序,每个dt标签,dd标签独占一行(块元素)
  2. 默认没有标记
  3. 一般用于(一个标题下有一个或多个列表项)*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>。
  1. src指定要播放的视频文件的路径。
  2. controls提供播放、暂停、和音量控件。
  3. widthheight设置视频的宽度和高度。
  4. autoplay自动播放。
  5. 如果浏览器不支持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:指定表单元素类型。
  1. 文本框:type = “text”

  2. 密码框:type = “password”

  3. 单选按钮:type = “radio”

  4. 复选框:type = “checkbox”

  5. 按钮:

普通按钮:type = “button” 属于普通按钮,需要和事件关联使用。
提交按钮:type = “submit” 点击表单将会提交到action属性所指定的URL,并传递数据.
重置按钮:type = ”reset“ 填写或输入的数据清空
  1. 图片按钮:type = “image”

  2. 邮箱文本框:type = “email”

    如果输入的不是有效邮箱地址,则不允许提交

  3. 数字文本框:

number类型的属性
value:规定的默认值
max:规定允许的最大值
min:规定允许的最小值
setp:规定合法的数字间隔(如果step=“2”,则合法的数字是-2、0、2、4等
  1. 网址框:type = “url”
  2. 滑块:type = “range”
  3. 搜索框:type = “search”
  4. 文件域:type = “file”
  5. 多行文本域
<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属性是给标签和表单元素关联使用的。

表单的初级验证
  1. placeholder提示

    placeholder属性用于input类型的文本框提供一种提示,这种提示可以描述文本框期待用户输入何种内容
    在输入为空时显示,当在文本框写入内容时消失。

  2. required必填项

    required属性用于规定文本框填写内容不能为空,否则不允许用户提交。

  3. pattern验证输入格式

    pattern属性用于验证input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配。

猜你喜欢

转载自blog.csdn.net/weixin_45277249/article/details/111592931