第一章HTML5基础

最新推荐文章于 2022-11-14 21:10:46 发布

wangboluo

最新推荐文章于 2022-11-14 21:10:46 发布

阅读量221

点赞数

本文链接：https://blog.csdn.net/wangboluo/article/details/101551900

版权

第一章HTML5基础

1.什么是HTML

HTML是一种用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言（Markup Language）。

HTML5的优势：

1.世界知名浏览器厂商对HTML5的支持

2.市场的需求

3.跨平台

2.HTML5文件的基本结构

HTML5的最基本语法就是<标记>内容<标记>标记在有的地方也称为标签或者元素，他们指的都是同一种东西，标签都是成对出现的，有一个开头标记就对应一个结束标记。

3.网页的基本信息

1.DOCTYPE声明必须位于HTML文档第一行。

<!DOCTYPE html>

2.标签。

HTML中常用的特殊符号

特殊符号	字符实体
空格
大于号(>)	>
小于号(<)	<
引号("")	"
版权符号()	copy

4.网页的基本标签

标题标签：

标题标签表示一段文字或者主题，并且支持多层次的内容结构，HTML提供了六级标题

最大标签依次到

最小标签。

<h1>一级标题</h1>
依次到六级标题
<h6>六级标题</h6>

段落标签和换行标签：

段落标签<p>…</p>表示一段文字内容换行标签
<br>表示这一个段落的换行。

水平线标签：

<hr/>表示一条水平线

字体样式标签：

<strong>可以让字体变粗，<em>标签让文字倾斜。

注释和特殊符号：

<!--注释内容-->表示注释

5.图像标签

1.1JPG格式

1.2GIF格式

1.3BMP格式

1.4PNG格式

基本语法：

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

src属性表示图片路径，alt属性指定的替代文本，width和height两个属性分别表示图片的宽度和高度。

6.超链接标签

超链接的基本用法，一是链接地址，即链接的目标，可以是某个网址或文件的路径。

绝对路径：指向目标地址的完整描述，一般指向本站点外的文件。

相对路径：相对于当前页面的路径，一般指向本站点外的文件，所以不需要一个完整的URL形式。

页面间链接语法：

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

href表示链接地址的路径

锚链接语法：

<a name="marker">目标位置乙</a>
<a href="#marker">当前位置甲</a>

第二章列表、表格与媒体元素

列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显示出来。HTML5中的列表可以分为三种类型：无序列表，有序列表，定义列表。

1.无序列表及其应用

无序列表由

标签和
标签组成，使用
- 标签作为无序列表的声明，使用
- 标签为每个列表项的起始。

<ul>
  <li></li>
  <li></li>
</ul> 
无序列表中的每项都是评级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容.有序列表会依据列表项的顺序进行显示.

遵循W3C标准，

标签里面只能嵌套
标签，不能嵌套其他标签。

2.有序列表及其应用

有序列表由

标签和
标签组成。

<ol>
  <li></li>
  <li></li>
</ol> 
在实际网页应用中,无序列表比有序列表应用得更加广泛,有序列表ol-li一般用于显示带有顺序编号的特定场合.

3.定义列表及其应用

<dl>
    <dt></dt>
    <dt></dt>
    <dt></dt>
</dl>
定义列表一般适用于带有标题和标题解释性内容的场合.

定义列表是一种很特殊的列表形式,它是标题及列表项的结合.定义列表的语法相对于无序和有序列表不太一样.它使用

标签作为列表的开始,使用标签作为每个列表项的起始.

4.表格

1.表格的使用很广泛简单,结构稳定每行的列数一致,同行单元格高度一致且水平对齐.

2.表格的基本结构:

1.1单元格

单元格是表格的最小单位,一个或多个单元格纵横排列组成了表格.

1.2行

一个或多个单元格横向堆叠形成了行.

1.3列

由于表格单元格的宽度必须一致,因此单元格纵向排列形成了列.

5.表格的基本语法

<table>
    <tr>
        <th>第1个单元格的内容</th>
        <th>第2个单元格的内容</th>
    </tr>
    <tr>
        <td>第1个单元格的内容</td>
        <td>第2个单元格的内容</td>
    </tr>
   </table>

为了显示表格的轮廓,一般还需要设置

标签的border边框属性,指定边框的宽度.

<body>
    <table border="2">
        <tr>
             <th>1行1列的标题</th>
             <th>1行2列的标题</th>
             <th>1行3列的标题</th>
        </tr>
        <tr>
             <td>1行1列的单元格</td>
             <td>1行2列的单元格</td>
             <td>1行3列的单元格</td>
         </tr>
    </table>
</body>

6.表格的跨列与跨行

1.表格的跨列

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

2.表单的跨行

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

3.表格跨立与跨行的综合应用

<body>
    <table border="1">
        <tr>
            <td colspan="3">学生成绩</td>
        </tr>
        <tr>
            <td rowspan="2">张三</td>
            <td>语文</td>
            <td>98</td>
        </tr>
        <tr>
            <td rowsspan="2">李四</td>
        	<td>语文</td>
            <td>98</td>
        </tr>
        </table>
</body>

7.HTML5的媒体元素

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属性后，可以让视频文件加载完后自动播放。

2.音频元素

audio元素基本语法:

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

引用:

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

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

8.HTML的结构元素

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

9.iframe框架

<iframe> 框架的主要作用是使页面中的部分内容用框架实现。

语法:

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

2.属性的使用

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

第三章表单

1.表单概述

1.表单的内容

不同的表单控件有不同的用途

表单的格式:

<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>

2.post方法和get方法的区别:

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

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

(3) post提交方法的数据安全性明显高于get方法提交的数据。

2.表单的元素及其格式

属性	说明
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>....</option>
	<option>....</option>
</select>

6.按钮

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

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

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

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

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

button：与事件关联使用。

7.多行文本域

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

8.邮箱

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

9.滑块

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

10.搜索框

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

3.表单的高级应用

1.设置表单的隐藏域

将type属性设置为hidden隐藏类型即可创建一个隐藏域.

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

只读场景:网站服务器方不希望用户修改的数据,这些数据在表单中显示.

禁用场景:只有满足某个条件后,才能选用某项功能.

只读和禁用效果分别通过设置readonly属性和disabled属性来实现.

4.表单元素的标注

对表单元素进行标注,这样做的目的就是为了增强鼠标的可用性.

语法:

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

5.表单初级验证的方法

1.placeholder

placeholder属性用于为input类型的文本框提供一种提示.

2.required

required属性用于规定文本框填写内容不能为空.

3.pattern

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

wangboluo

关注

0
点赞
踩
1

收藏

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

第一章HTML5基础1.什么是HTMLHTML是一种用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言（Markup Language）。HTML5的优势：1.世界知名浏览器厂商对HTML5的支持2.市场的需求3.跨平台2.HTML5文件的基本结构HTML5的最基本语法就是<标记>内容<标记>标记在有的地方也...
复制链接

扫一扫