目录

1、什么是HTML？

2、W3C

3、HTML标准结构

4、常用的HTML标签

4.1 HTML标签的组成

4.2 HTML标签的属性

4.3 HTML基本标签

4.3.1 标题标签

4.3.2 段落标签

4.3.3 换行标签

4.3.4 水平线标签

4.3.5 字体样式标签

4.3.6 注释和特殊符号

4.4 图像标签

4.5 超链接标签及应用

4.6 媒体标签

4.7 列表标签

4.7.1 什么是列表？

4.7.2 列表的分类

4.8 表格标签

4.9 IFrame内联框架

4.10 表单的应用

4.10.1 表单语法

4.10.2 表单的作用

4.10.3 表单的构成

4.10.4 表单域

4.10.4 表单控件

5、 表单初级验证

6、路径的使用

1、什么是HTML？

HTML：Hyper Text Markup Language（超文本 标记 语言）

1. 它是一种语言；

2. 标记 ：使用标签的形式来标识页面中的不同组成部分 说明了这个语言的组成部分是标签；

3. 超文本：包括文字、图片、音频、视频、动画等；

2、W3C

W3C：World Wide Web Consortium（万维网联盟）成立于1994年，是web技术领域最权威和具影响力的国际中立性技术标准机构。

W3C标准包括：

• 结构化标准语言（HTML、XML）：控制页面元素和内容

• 表现标准语言（CSS）：控制网页元素的外观和位置等页面样式（如：颜色、大小等）

• 行为标准语言（JavaScript）：网页模型的定义与页面交互

Web标准要求页面实现：结构、表现、行为三层分离。

3、HTML标准结构

网页类似于一篇文章，每一页文章内容是有固定的结构的，如：开头、正文、落款等……

网页中也是存在固定的结构的，如：整体、头部、标题、主体

网页中的固定结构是要通过特定的 HTML 标签 进行描述

• html标签：网页的整体

• head标签：网页的头部

• body标签：网页的身体

• title标签：网页的标题

 

4、常用的HTML标签

4.1 HTML标签的组成

结构说明：

1. 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名。

1. 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。

1. 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。

4.2 HTML标签的属性

属性注意点：

1. 标签的属性写在开始标签内部

1. 标签上可以同时存在多个属性

1. 属性之间以空格隔开

1. 标签名与属性之间必须以空格隔开

1. 属性之间没有顺序之分

4.3 HTML基本标签

4.3.1 标题标签

特点：1、标签的文字都有加粗。

           2、标签的文字都有变大，从h1~h6文字逐渐减小。

           3、每一个标题独占一行。

h1标签最为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分。

4.3.2 段落标签

特点：1、段落之间存在间隙。

2、每个段落是独占一行。

4.3.3 换行标签

换行标签：br 单标签

作用：强制换行

4.3.4 水平线标签

水平线标签：hr标签 单标签

作用：分割不同主题的水平线

4.3.5 字体样式标签

字体样式标签：让文本有加粗、下划线、倾斜、删除线文本的格式效果

4.3.6 注释和特殊符号

1、注释

html中的注释以“<--”开头，以"-->"结束,不会显示在页面中，可以更好的解释代码。

<!--注释 -- > 快捷键: ctrl + /

2、特殊符号

4.4 图像标签

图片标签：img 单标签

作用：在网页中展示一张图片

属性：1、src：告诉浏览器要显示哪一张图片属性值：路径（如果图片和当前页面在同级目录下，此时直接写图片的名字即可）

2、alt：替换文本，当图片加载失败时（如：路径写错了），才显示的文字

3、title：提示文本，当鼠标悬停在图片上时，才显示的文字

4、width：图片的宽度

5、height：图片的高度

注意点：1、如果只设置图片的宽度或者高度，此时另一个会自动等比例缩放

2、如果同时设置了两个，若设置不当此时图片可能会变形

4.5 超链接标签及应用

超链接：a标签 双标签

作用：点击之后跳转网页

属性：1、href：告诉浏览器点击之后跳转去哪一个网页

取值：路径

1.1、外部链接：互联网上的绝对路径

1.2、内部链接：推荐使用相对路径

2、target：目标网页的打开方式

取值：

2.1、_self：(默认值) 在当前窗口中进行跳转，原网页会被覆盖

2.2、_blank：在新窗口中进行跳转，原网页保留

4.6 媒体标签

1、视频标签：video

2、音频标签：audio

属性：

1、src：路径

2、controls：播放的控件

3、autoplay：自动播放（部分浏览器不支持）

4、loop：循环播放

4.7 列表标签

4.7.1 什么是列表？

列表就是信息资源的一种展现形式，它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获取相应信息。

4.7.2 列表的分类

1、无序标签

场景：在网页中表示一组无顺序之分的列表，如：新闻联播。

2、有序标签

场景：在网页中表示一组有顺序之分的列表，如：排行榜、试卷、问答。

3、自定义列表

场景：自定义列表不仅仅是一列项目，而是项目及其注释的组合。如：官网下方栏。

4.8 表格标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

注意点：标签的嵌套关系：table > tr > td

行：tr
列：td
边框宽度：border
表格宽度：width
表格高度：height
跨行：rowspan 
跨列：colspan

4.9 IFrame内联框架

iframe元素会创建包含另外一个文档的内联框架（即行内框架）。iframe是属于内联框架，它是body的子级，和body是父子关系。iframe作为一个普通元素放在body里。

属性

• width 可设置内联框架的宽

• height 可设置内联框架的高

• name 设置框架名称

• src 设置页面的路径

• scrolling规定是否在 iframe 中显示滚动条（yes，no，auto）

• frameborder规定是否显示框架周围的边框（1默认有边框,0）

  

4.10 表单的应用

4.10.1 表单语法

4.10.2 表单的作用

• 信息的收集

• 数据的验证

• 在线考试

• 调查问卷

4.10.3 表单的构成

• 提示性文字：提示用户如何操作（一般由placeholder属性完成）

• 表单域：相当于一个容器，包含若干表单控件

• 表单控件：具体的功能项（按钮，下拉列表，输入框等）

4.10.4 表单域

<form action="远程服务器的URL(存放地址)" method="信息的提交方式" name="表单名">
​
表单内容
​
</form>

4.10.4 表单控件

（1）input：输入框。都有value属性，通过用户输入信息将value属性的值提交给远程服务器并保存。

单行文本框：<input type="text" id=" " value=" " placeholder="提示信息" > 密码框：<input type="password" placeholder="提示信息"> 数字输入框：<input type="number> （input后面的属性如上） 日期输入框：<input type="date"> 颜色输入框：<input type="color"> 文件选择框（通常用于上传文件）：<input type="file" > 单选按钮：<input type="radio" name="按钮名称" checked> 文本 （check是让表单进入后先默认选择此选项 name值相同则是让此文本选项为单选，不可同时选择相同name值的选项） 复选按钮：<input type="checkbox" value="按钮显示出来的内容" id=" "> （此处的value表示的事按钮显示出来的文本内容） 提交按钮：<input type="submit" value="按钮上显示出来的内容"> （必须放在<form></form>中有效 ） 重置按钮：<input type="reset" value="按钮上显示出来的内容"> （必须放在<form></form>中有效 ） 普通按钮：<input type="button" value="按钮上显示出来的内容">

（2）select：下拉列表

                  <select>
                                <option value="值1">选项1</option>
​
                                <option value="值2">选项2</option>
​
                                <option value="值3">选项3</option>
                 </select>

 

（3）textarea：文本框（多行文本输入框，用户可以调节放大缩小）

                     <textarea rows="行数" cols="列数"/>

（4）邮箱验证：

（5）滑块验证和搜索框：

5、 表单初级验证

我们平时在网页上填写表单的时候，往往都会发现填写表单内容时有一定的要求，这就是所谓的表单验证。

使用表单验证的好处：

• 减轻服务器的压力

• 保证数据的可行性和安全性

实际开发中，表单验证基本使用js完成的，但是html中的input表单也提供一些初级的验证方法，主要有以下3种：

• placeholder属性

• required属性

• pattern属性

1.placeholder属性

placeholder属性 是input 类型的文本框提供的一种提示，可以描述文本框期待用户输入的内容，提示语默认显示，当文本框中输入内容。时提示语消失。

2.required属性属性

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

3.pattern属性

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

6、路径的使用

1、相对路径

相对路径：以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。

同级目录：直接写：目标文件名字！

下级目录：直接写：文件夹名/目标文件名字！

上级目录：直接下：../目标文件名字！

2、绝对路径

绝对路径：以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

盘符开头：D:\day01\images\1.jpg

完整的网络地址：https://www.baidu.com/2018czgw/images/logo.gif