HTML5基础

最新推荐文章于 2024-04-24 18:49:11 发布

mdbai

最新推荐文章于 2024-04-24 18:49:11 发布

阅读量195

点赞数

本文链接：https://blog.csdn.net/mdbai/article/details/101556552

版权

HTML5基础

一、HTML文件的基本结构和W3C标准

1.1、HTML简介

HTML是什么？HTML是用来描述网页的一种语言，它是一种超文本标记语言。特别注意，HTML不是一种编程语言

1.2、HTML5的优势

世界知名浏览器厂商对HTML5的支持
市场的需求
跨平台

1.3、W3C标准

为制定维护统一的国际化Web开发标准，确保多个浏览器的兼容，所以万维网联盟诞生了，Web开发标准，也称W3C原则。W3C标准不是某一个标准，而是一系类的标准集合，一个网页主要由三个部分组成，即结构（Structrue），表现(Presentation)和行为（Behavior）。

1.4、HTML5文件的基本结构

HTML是一种超文本标记语言，最基本的语法为：<标记>内容<标记>

基本架构：

在这里插入图片描述

2、网页的基本标签

基本标签包含标题标签、段落标签、换行标签、水平线标签。

2.1、标题标签

HTML共提供六级标题<h1>~<h6>,并赋予了标题一定的外观，所有标题字体加粗，<h1>字号最大，<h6>字号最小

2.2、段落标签和换行标签

1）段落标签<P>…</p>表示一段文字内容

2）换行标签<br/>强制换行

2.3、水平线

水平线标签表示一条水平线<hr/>,注意该标签与<br/>标签一样特殊，没有结束标签。

2.4、字体样式标签

1）<strong>…</strong>可以使字体变粗

2）<em>…</em>可以使文字倾斜

2.5、注释与特殊符号

1）注释的语法：<!–注释内容–>

2）常用特殊符号

HTML中常用的特殊符号及对应的字符实体

特殊符号	字符实体(注意，字符都以“&”开头，“;”结尾)
空格	nbsp
大于号（>）	gt
小于号（<）	lt
引号（“）	quot
版权符号（）	copy

2.2、图像标签

基本语法：

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

src属性表示图片路径，alt属性指定的替代文本，title属性可以提供额外的提供或帮助信息

width和height属性表图片的宽度和高度。

路径：
相对路径：从当前目录出发
绝对路径：从盘符出发找文件
找上一层：…/

2.3、超链接标签

1.超链接的基本语法：

<a href="链接地址" target="目标窗口位置">连接文本或图像</a>

target：指定链接在哪个窗口打开，常用取值有-self（自身窗口）-blank（新窗口）

注意：当超链接href链接路径为”#“时，表示空链接，如

<a href="#">首页</a>

超链接的应用场合

2.3.1、页面链接

页面链接就是从一个页面连接到另一个页面。

2.3.2、锚链接

锚链接常用于目标内内容很多，需定位到目标页内容中的某个具体位置时，语法：

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

设置位置链接路径属性值为#标记名的语法如下：

<a name="#marker">当前位置</a>

2.3.3、功能性链接

单击该链接时不是打开某个网页，而是启动本机自带的某个应用程序。如QQ、邮箱和微信等等

2.4、行内元素和块元素

块元素：p元素h1元素不管内容多少都是独占一行，这样的元素称为块元素。
行内元素：如strong元素，a元素这些宽度由自己决定，这样的元素称为行内元素。

二.列表，表格与媒体元素

1、列表

列表就是信息资源的一种展示形式，使信息结构化和条理化，列表分为三种：无序列表，有序列表，自定义列表；

1.1无序列表

无序列表是由<ul>标签和<li>标签组成的，使用<ul>标签作为无序列表的声明，使用<li>标签作为每个列表的起始。语法如下：

<ul>
    <li>第1项</li>
    <li>第2项</li>
</ul>

遵循W3C标准，<ul>标签里面只能嵌套<li>标签，不能嵌套其他标签。

无序列表的特性如下：

（1）没有顺序，每个<li>标签独占一行（块元素）

（2）默认<li>标签项前面有个实心小圆点

（3）一般应用于导航，侧边栏新闻，有规律的图文组合等。

1.2、有序列表

有序列表的语法结构：

<ol>
    <li>第1项</li>
    <li>第2项</li>
</ol>

有序列表的特性如下：

（1）有顺序，每个<li>标签独占一行（块元素）

（2）默认<li>标签前面有顺序标记

（3）一般应用于试卷，问卷等。

1.3、自定义列表

它是标题及列表项的集合，使用<dl>作为列表的开始，使用<dt>作为每个列表项的起始，使用<dd>来定义，语法如下：

<dl>
	<dt>标题一</dt>
	<dd>第1项</dd>
	<dd>第2项</dd>
</dl>

定义列表的特性如下：

（1）没有顺序，每个<dt>标签，<dd>标签独占一行（块元素）

（2）默认没有标记

2、表格

2.1、表格的优势

简单通用
结构稳定

2.2表格的基本用法

<table>
	<tr>
		<th>第一个单元格内容</th>
		<th>第二个单元格内容</th>
	</tr>
	<tr>
		<td>第一个单元格内容</th>
		<td>第二个单元格内容</th>
	</tr>
	.....
</table>

创建表格标签<table></table>
在表格标签<table>里创建行标签<tr></tr>可以有多行
在<tr>里创建单元格标签<th></th>创建标题
在行标签<tr>里创建单元格<td>…</td>可以有多个单元格
显示表格轮廓，需要设置<table>标签得border属性，指定边框的宽度。

2.3、跨行和跨列

<table>
    <tr>
    	<td colspan="所跨的列数">单元格内容</td>
    <tr>
</table>

<table>
    <tr>
    	<td rowspan="所跨的行数">单元格内容</td>
    <tr>
</table>

以上是跨行和跨列的语法使用。

3、媒体元素

1.视频元素

video元素是现在插放视频的一种标准方法，video元素的基本语法：

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

src属性用于指定播放的视频文件的路径，controls属性用于提供播放，暂停和音量控件。

<body>
<video controls>
	<source src="video/video.webm"/>
	<source src="video/video.mp4"/>
</video>
</body>

使用source元素来链接到不同类型的视频文件，浏览器会自动选择第一个可以识别的格式。提供多种类型，防止浏览器不支持该格式。

设置autoplay属性后，可以让视频文件加载完后自动播放。

使用loop属性来实现视频的循环播放。

当属性名与属性值相同时，可只使用其属性名就可发挥作用。

2.音频元素

audio元素的基本语法：

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

audio元素的应用：

<body>
<audio controls>
	<source src="music/music.ogg"/>
	<source src="music/music.mp3"/>
</audio>
</body>

4、HTML的结构元素

1.页面布局分析

页面的大体结构分为页面头部，页面主体，页面底部。

2.HTML5的结构元素

元素名	描述
header	标题头部区域的内容
footer	标记脚部的内容
section	Web页面中的独立区域
article	独立的文章内容
aside	相关内容或应用
nav	导航类辅助内容

5、iframe框架

常用的属性包括name,width,height,其中name属性可以和锚链接结合起来实现页面间的相互跳转。

语法：

<iframe src="引用页面地址" name="框架标识名"..><iframe>

<a fref = "引用页面地址" target = "框架标识名" ></a>

三.表单

2.表单标签及表属性

使用<form>标签来实现表单的创建，该标签用于在网页中创建表单区域，其他标签需要在它的范围内才有效，<input>便是其中一个。

属性	说明
action	指示服务器处理表单输出的程序
method	指定向服务器发送数据的方法（get/post）

下图为一个基本的表单格式：

<form method="post" action="#">
	<p> 名字:<input type="text" name="names"/></p>
	<P> 密码:<input type="password" name="name1"/></p>
	<p> <input type="submit" value="提交"/></p>
</form>

3.post方法和get方法的区别：

（1）post方法提交方式不会改变地址状态，表单数据不会被显示。

（2）使用get方法提交方式，地址状态会发生改变，表单数据会在URL信息中显示。

以上两点区别：post提交方法的数据安全性明显高于get方法提交的数据。

2.表单元素及其格式

<input>元素的常用属性

属性	说明
type	此属性可用类型有text，password，checked，radio,submit,reset,file,email,number,url,hidder,image,button等
name	指定表单元素的名称。
value	指定表单元素的初始值。
size	指定表单元素的初始宽度。
maxlength	在text或password类型，表单元素大小以字符为单位。
checked	指定按钮是否被选中。

1.文本框

最常见的表单输入元素就是文本框（text），用于输入单行文本信息。

maxlength属性用来指定输入的数据长度。size属性用来指定文本框的长度，这就是二者之间的不同。

2.密码框

password

密码框与文本框不同，区别在于需要设置文本框控件的type属性为password以黑色实心圆点来表示。

3.单选按钮

radio 单选按钮有一个默认键，可以使用checked属性来实现默认功能。

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

4.复选框

复选框的类型是checkbox，即将表单元素的type属性设为checkbox就可以创建一个复选框。

5.列表框

列表框的目的主要是使用户快速，方便，正确的选择一些选项，节省页面空间，<select>标签和<option>标签来实现，<select>标签用来显示用户选择的列表框，一个<option>标签表示，<select>标签必须至少包含一个<option>标签。

<select>
	<option>....</option>
	<option>....</option>
</select>

6.按钮

分为普通按钮（button），提交按钮（submit），重置按钮（reset）

<input type="reset" name="names" value="重置"/>

value用来设置在按钮上的文字，name给按钮命名。

reset按钮：重置最初状态，数据被清空。

submit按钮：表单将会提交到action属性所指定的URL，传递数据。

button：与事件关联使用。

7.多行文本域

标签为<textarea>，它的语法如下：

<textarea name="textarea" cols="显示的列数" rows="显示的行数">
文本内容
</textarea>

8.邮箱

email类型的input元素是一种专门用于输入email地址的文本框。

9.滑块

range类型的input元素提供用于输入包含一定范围内的数字值的文本框。

10.搜索框

search类型的input元素提供用于输入搜索关键词的文本框。

3.表单的高级应用

1、设置表单的隐藏域

将type设置为hidder隐藏类型可创建一个隐藏域，用于网页工作者使用，客户不能看见

2、表单的只读与禁用设置

只读：readonly （只对信息进行读取作用，不改变框颜色）

禁用：disabled（按钮呈灰色显示，表示无法使用）

3、表单元素的标注

进行标注要使用<label>标签，语法如下：

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

<form>
请选择性别：
	<label for="mal">男</label>
	<input type="radio" name="gen" id="mal"/>
</form>

其中name和id是必不可少的。

4、表单初级验证的方法：

placeholder：用于为input类型的文本框提供一种提示，可以描述为期待用户输入何种内容，在输入时消失
required：规定文本框填写内容不能为空，否则不允许用户提交表单
pattern：验证input类型文本框中用户输入的内容是否与自定义的正则表达式匹配。

mdbai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础

HTML5基础一、HTML文件的基本结构和W3C标准1.1、HTML简介HTML是什么？HTML是用来描述网页的一种语言，它是一种超文本标记语言。特别注意，HTML不是一种编程语言1.2、HTML5的优势世界知名浏览器厂商对HTML5的支持市场的需求跨平台1.3、W3C标准为制定维护统一的国际化Web开发标准，确保多个浏览器的兼容，所以万维网联盟诞生了，Web开发标准，也称W...
复制链接

扫一扫