HTML基础知识详解与实例-优快云博客

本文链接：https://blog.youkuaiyun.com/CYL_2021/article/details/123559503

什么是HTML？

HTML 是 HyperText Markup Language（超文本标记语言）的缩写，它是用于创建网页的标准标记语言。HTML 使用标记标签来描述网页，由浏览器来解析，即使用 HTML 来建立 Web 站点，通过 Web 浏览器读取 HTML 文档，并以网页的形式显示出来。

一.网页.html页面主要结构

<!-- 文档类型声明，作用就是告诉浏览器使用那种HTML版本来显示网页，下面是HTML5 -->
<!DOCTYPE html>
 <!-- 用来定义当前文档显示的语言，简单的来说定义为en就是英文网页，zh就是中文网页-->
<html lang="en">
<head>
<!--字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码。 -->
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
 <body>
</body>
</html>

HTML文档的后缀名必须是.html 或.htm浏览器的作用是读取HTML文档，并以网页的形式呈现出来
声明为 HTML5 文档
元素是 HTML 页面的根元素
元素包含了文档的元（meta）数据，如定义网页编码格式为
元素描述了文档的标题
元素包含了可见的页面内容

二.常用基本标签

1.文本标签

1.1标题

<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

1.2 文本

在这里插入图片描述

1.3 图片

 <img src="图片的位置" >

在这里插入图片描述
关于路径：
相对路径：以引用文件所在位置为参考基础，图片相对于HTML页面的位置
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。，但是这种严禁使用，原因如下：
1）绝对路径只在当前计算机生效，若将网站转移服务器，则路径会失效
2）通过绝对路径打开图片使用的是 file 协议，但网页中使用的是 http 协议，因此会出现跨域问题，造成图片无法显示
网络地址：使用网络上的图片链接。但是，一般不使用网络地址，原因是网络图片可能由于各种原因被删除、转移位置，使图片无法打开
在这里插入图片描述
######1.4 超链接

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>//超链接标签

在这里插入图片描述
链接分类：

外部链接
内部链接
空链接：:如果当时没有确定链接目标时

< a href="#"> 首页< /a > 
<a  href="javascript:void(0)">单此处什么也不会发生</a>
<a href="javaScript:;"><!--（死链接，不会有跳转现象发生）-->

网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
锚点链接: 点击链接,可以快速定位到页面中的某个位置。
锚点链接: 点击链接,可以快速定位到页面中的某个位置。

2.表格标签

<table>                            <!--是用于定义表格的标签-->
        <tr>                      <!--定义表格中的行，必须嵌套在<table> </table>标签中。-->
            <th></th>                <!-- 表格的表头部分,加粗显示-->
            <td>单元格内的文字</td> <!-- 定义表格中的单元格，必须嵌套在<tr></tr>标签中。-->
        </tr>
        <tr>
            <td>我是第二行第一列的单元格</td>
            <td>我是第二行第二列的单元格</td>
        </tr>
    </table>

2.1表格相关属性

在这里插入图片描述

2.2行和列相关属性

属性名	属性值	描述
width/height	像素值	单元格宽度/高度属性
align	left，center,right	单元格内容水平对齐
valign	top(居上）,center（居中）,bottom（居下）	单元格内容垂直对齐
colspan /rowspan	合并单元格的个数	表格的跨行与跨列（合并单元格）

注：1.如果border的值增大，则只有表格最外围框线增加，每个单元格上的边框并不会变化
2.colspan 属性表示跨列，当某个格跨 N 列时，其右边 N-1 个单元格需删除。
rowspan 属性表示跨行，当某个格跨 N 行时，其下方 N-1 个单元格需删除。

2.3 表格的结构化

表格的结构化就是将表格分为表头、表体、表尾三部分，这样在修改其中一部分时不会影响到其他部分，方便对表格进行操作。一个完整的表格通常包括以下四部分：
1）caption：表格的标题，通常出现在表格的顶部。
2）thead：定义表格表头，通常表现为标题行。
3）tbody：定义一段表格主体，一个表格可以有多个主体，可以按照行来进行分组。
4）tfoot：定义表格的脚尾，通常表现为总计行

注:表格行是从头到脚显示即不管行代码顺序如何，即使写在了的后面，网页显示时，还是先后显示

2.4 表格的直列化

通过设置表格的直列化可以对表格的列进行分组，以便对其进行格式化

   <!--第一列-->
     <col style="background-color: rgb(0, 217, 255);" /> 
     <!--后两列为一组-->
     <colgroup style="background-color: yellow;">
         <!--第二列-->
         <col />
           <!--第三列-->
         <col />
     </colgroup>

2.5 案例

<table border="1" cellspacing="0">
       <!--第一列-->
       <col style="background-color: rgb(0, 217, 255);" />
       <!--后两列为一组-->
       <colgroup style="background-color: yellow;">
           <!--第二列-->
           <col />
           <!--第三列-->
           <col />
       </colgroup>

       <thead>
           <tr>
               <td align="center"> 姓名</td>
               <td colspan="2" align="center">学生成绩</td>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td rowspan="2" align="center">张三</td>
               <td align="center">java</td>
               <td align="center">100</td>
           </tr>
           <tr>
               <td align="center">c</td>
               <td align="center">95</td>
           </tr>
           <tr>
               <td rowspan="2" align="center">李四</td>
               <td align="center">java</td>
               <td align="center">88</td>
           </tr>
           <tr>
               <td align="center"> c</td>
               <td align="center">95</td>
           </tr>
       </tbody>
   </table>

效果图
在这里插入图片描述

3.列表标签

3.1有序和无序列表

<ul>
       <li></li>
       <li></li>
   </ul>
//最常用，没有固定的顺序，默认有小圆点(无序列表),可以通过type属性修改形状
 <ol>
       <li></li>
   </ol>
 //有先后顺序，默认有数字（有序列表）

在这里插入图片描述

3.2 定义列表标签

dl>
    <dt>这是列表的标题</dt>
    <dd>描述的第一项</dd>
    <dd>描述的第二项</dd>
</dl>

在这里插入图片描述

4.表单标签

表单组成：提示信息，表单域，表单控件（表单元素）

4.1表单域

<form action=“url地址” method=“提交方式” name=“表单域名称”> 
各种表单控件   
</form>

在这里插入图片描述
注:method属性的值分别为get和post，具体介绍如下
（1）get 方法的特点使用 URL（统一资源定位符）传递参数：http://服务器地址?name1=value1&name2= value2，其中“?”符号表示要进行参数传递，“?”符号后面采用“name=value”的形式传递，多个参数之间，用“&”符号连接。URL 传递的数据量有限，只能传递少量数据。而且使用 URL 传递参数并不安全，所有信息可在地址栏中看到，并且可以通过地址栏随意传递其他数据。
（2）post 方法的特点将数据封装后使用 http 请求传递，信息在地址栏中不可见，比较安全，并且传递的数据量理论上没有限制。综上所述，虽然 get 方法是表单提交的默认方法，但是通常采用 post 方法传递数据。

4.2 表单控件

4.2.1 input

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女 
< label> 标签
作用：点击区域内就可以选择 
代码：< label for = "id"> < /label>

4.2.1.1 input 属性

属性值	描述
type	type 属性表示 input 输入框的类型，它的默认值是 text
name	name 属性表示 input 输入框的名称，一般必填。因为传递数据时，使用“name=value”的形式传递
value	value 属性表示 input 输入框的默认值
checked	checked=“checked” 默认选中
disabled	disabled=“disabled” 设置控件不能使用用在按钮上效果为不能单击，用在输入框上则表示不能修改。而且，如果输入框设置为 disabled，则输入框中的信息不能往后台传

type属性的属性值及其描述如下：
在这里插入图片描述
注:1.name 和 value 属性需同时存在，提交时，提交的是 value 中的属性值
2.radio 凭借 name 属性区分是否为同一组。name 相同，为同组，同组中只能选择一个
3.checked=“checked” 默认选中。radio 只能选一个，checkbox 可以选多个

4.2.1.2 input新增属性

在这里插入图片描述

pattern	规定通过其检查输入值的正则表达式
required	规定输入的字段是必需的（必须填写）

注：刚打开页面就默认显示几个文字：可以给这些表单元素设置value 属性=“值”（文字可删除），或让其一直显示placeholder属性=“值”

4.2.1.3 input新增输入类型

在这里插入图片描述

type=“range”	定义包含一定范围内的值的数字字段

当type=“date”时的效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/f5ddc4cdaddd42e7b606480828cda0a5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQ1lM4p2A,size_20,color_FFFFFF,t_70,g_se,x_16

5.select 下拉表单元素

  <select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        ...
    </select>
   < select> 中至少包含一对< option>
   //在<option> 中定义selected =“selected " 时，当前项为默认选中项。

5.1标签属性

属性	说明
name	列表名，所有选项只有一个name
multiple	multiple=“multiple”：设置 select 控件为多选，可在列表中使用 Ctrl 键+鼠标进行多选。一般不用。
size	size=“1”：规定下拉列表中可见选项的数目。如果 size 属性的值大于 1，但是小于列表中选项的总数目，下拉列表就会显示出滚动条，表示可以查看更多选项

5.2 option标签属性

属性	说明
value	1.当value没有值时，显示的是标签中的文字2.有value值时，显示的是value属性的值
title	鼠标指上后显示的文字，与图片的 title 属性类似
selected	selected=“selected”：默认选中，即 select 的初始值

5.3 利用optgroup标签分组

用于将标签进行分组，label属性表示分组名。下面的示例就是选项分组的一个应用，在从下拉列表选择地区城市时可以根据省份、城市的不同进行分组，方便用户查找选择。

<form action="form.php" method="post">
        <select name="city">
            <optgroup label="河南省">
                <option value="1" title="郑州">郑州</option>
                <option value="2" selected="selected">新乡</option>
                <option value="3">驻马店</option>
            </optgroup>
            <optgroup label="北京市">
                <option>海淀区</option>
                <option>朝阳区</option>
            </optgroup>
        </select>
    </form>

在这里插入图片描述

5.4表单分组

<form action="form.php" method="post">
 <fieldset>
     <legend>这是一个表单</legend>
     <!-- 其他表单控件 -->
     请输入内容：<input type="text">
     <input type="submit">
     </fieldset>
</form>

效果如下：
在这里插入图片描述

5.5 textarea文本域元素

 <textarea rows="3" cols="20">
      文本内容
    </textarea>
//1.通过<textarea> 标签可以轻松地创建多行文本输入框。
//2.cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS 来改变大小。
//3.readonly="readonly"：设置为只读模式，不允许编辑。
//4.disable="disable"：设置禁用文本域

注:除了自带属性外，还时常通过css设置其样式
1.style=“resize: none;”：设置宽高不允许拖放修改。
2.style=“overflow: hidden;”：设置当文字超出区域时，如何处理。hidden表示超出区域的文字，隐藏无法显示；scroll 设置无论文字多少，均会显示滚动条；auto 设置为自动，根据文字多少自动决定是否显示滚动条（默认样式）

6.html5新增

6.1h5新增语义化（结构）标签

使用结构标签可以提升网页文档的可读性，并且有利于搜索引擎优化。

< header>：头部标签
< nav>：导航标签
< article>：内容标签
< section>：定义文档某个区域
< aside>：侧边栏标签
< footer>：尾部
hgroup:将整个页面或页面中一个内容区块的标题进行组合
######6.2 HTML5新增音频

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
 </audio>
 
PS:control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用 第一个支持的音频文件

目前, < audio > 元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
在这里插入图片描述

6.3HTML5新增视频

<video width="320" height="240" controls>
  <source src="mv.mp4" type="video/mp4">
  <source src="mv.ogg" type="video/ogg">
您的浏览器不支持Video标签。 
</video>

<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的 视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时 保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。