HTML5的笔记

文章目录

• 1.HTML的概念
• • 1.1HTML的基本骨架
• 2.标签语法
• • 2.1标签的关系
• 3.标签
• • 3.1双标签
  • • 3.1.1标题标签`<h1~h6>`
    • 3.1.2段落标签`<p>`
    • 3.1.3文本格式化标签
    • 3.1.4超链接标签`<a>`
    • 3.1.5音频和视频标签`audio`和`<vedio>`
    • 3.1.6列表标签
    • 3.1.7表格标签
  • 3.2单标签
  • • 3.2.1换行标签`<br>`
    • 3.2.2水平线标签`<hr>`
    • 3.2.3图像标签`<img>`
  • 3.3表单标签
  • • 3.3.1标签`input`(单标签)
    • 3.3.2下拉菜单
    • 3.3.3文本域
    • 3.3.4label标签
    • 3.3.5按钮标签
  • 3.4无语义的布局标签
• 4.路径
• 5.字符实体

1.HTML的概念

HTML是超文本标记语言--Hyper Text Markup Language
超文本:链接
标记:标记也叫标签,带尖括号的文本

1.1HTML的基本骨架

• html :整个网页
• head :网页头部(存放给浏览器看的代码,如CSS)
• body :网页主体(存放给用户看的代码,例如图片,文字)
• title :网页标题
  

注意:快速生成HTML基本骨架的方法:
! + enter/table

2.标签语法

• 标签通常情况下一般成对出现,中间包裹内容
• <>里面放英文字母(标签名)
• 结束标签比开始标签多一个/

单标签:只有开始标签,没有结束标签
双标签:成对出现的标签

2.1标签的关系

作用:明确代码的书写位置

• 父子关系(嵌套关系)
• 兄弟关系(并列关系)
  以HTML基本骨架为例:
  html标签与body标签和head标签是父子关系
  head标签与body标签是兄弟关系

3.标签

3.1双标签

3.1.1标题标签<h1~h6>

h1~h6标签的显示特点

• 文字加粗
• 字号随着数字的增大而减小
• 自带换行(独占一行)
  注意:1)h1标签在一个网页中只能用一次,用来放新闻标题或网页的logo
  2)h2到h6没有使用次数的限制

3.1.2段落标签<p>

段落标签一般用在新闻段落,文章段落,产品描述信息等

段落标签的显示特点:

• 自带换行(独占一行)
• 段落之间存在间隙

3.1.3文本格式化标签

作用 :为文本添加特殊格式,以突出重点,常见的文本格式:加粗,倾斜,下划线,删除线等等

1. 加粗-<strong> 或 <b>
2. 倾斜-<em> 或 <i>
3. 下划线-<ins> 或 <u>
4. 删除线-<del> 或 <s>
   注意:一般常用<strong> <em> <ins> <del>文本格式化标签,这些标签自带强调含义(语义)

3.1.4超链接标签<a>

作用:点击跳转到其他页面

<a href = "网页的URL"></a>

href属性值是跳转地址,是超链接的必须属性

注意:1)可以跳转到本地文件,通过相对路径

2)未知超链接的跳转地址时,herf属性值写#,#值表示空连接,点击不会跳转

属性target = "_blank"
作用:使用超链接标签不直接跳转而是打开一个新的页面

<a href="https://gitee.com/liangmou3434" target="_blank">跳转到我的gitee</a>

3.1.5音频和视频标签audio和<vedio>

1. 音频标签

音频标签的属性:

• src(必须属性)-音频URL(支持格式:MP3,Ogg,Wav)
• control-显示音频控制面板
• loop-循环播放
• autoplay-自动播放(为了提升用户体验,浏览器一般会禁用自动播放的功能)

2. 视频标签

视频标签的属性:

• src(必须属性)-音频URL(支持格式:MP3,Ogg,Wav)
• control-显示音频控制面板
• loop-循环播放
• muted-静音播放
• autoplay-自动播放(为了提升用户体验,浏览器支持在静音状态下自动播放)
  注意:在浏览器中,想要自动播放视频,必须要有muted属性

3.1.6列表标签

作用:布局内容排列整齐的区域
列表标签的分类:

1. 无序列表
   作用:布局排列整齐的不需要规定顺序的区域
   标签:ul嵌套li,ul是无序列表,li是列表条目

   • 第一项
   • 第二项
   • 第三项
   • ...

注意:ul标签里面只能包裹li标签,li标签里面可以包裹任何内容,如:段落,图像等等

2. 有序列表
   作用:布局排列整齐的需要规定顺序的区域
   标签:ol嵌套li,ol是有序列表,li是列表条目

   1. 第一项
   3. 第二项
   5. 第三项
   6. ...

注意:ol标签里面只能包裹li标签,li标签里面可以包裹任何内容,如:段落,图像等等

3. 定义列表
   标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情

   列表标题

   列表描述/详情

注意:dl里面只能包含dt和dd,dt和dd里面可以包含任何内容

3.1.7表格标签

作用:网页中的表格与excel表格类似,用来展示数据

标签:table嵌套tr,tr嵌套td/th

• table-表格
• tr-行
• th-表头单元格
• td-内容单元格
  

1. boder属性
   在网页中表格默认没有边框线,使用border属性为表格添加边框线

   border属性的值用来定义表格边框的粗细,属性值可以是0到正整数之间的任意值

   例:

   border = " 0 ",表示没有边框,即边框宽度为0像素

   border = " 1 ",表示边框像素为1

   以此类推

2. 表格结构标签
   作用:用表格标签把内容划分区域,让表格结构更清晰(人的肉眼无法看出效果,所以一般情况下不使用),语义更清晰

• thead-表格头部-作用于表格头部内容
• tbody-表格主题-作用于主要内容区域
• tfooot-表格底部-作用与总信息区域

3. 合并单元格
   作用:将多个单元合并成一个单元格,以合并同类信息

• 明确合并的目标
• 保留最左(最左单元格的代码)最上(最上单元格的代码)的单元格,添加属性(取值是数字,表示需要合并的单元格数量)
  • 跨行合并:保留最上单元格,添加属性rowspan
  • 跨列合并:保留最左单元格,添加属性colspan
    

3.2单标签

3.2.1换行标签<br>

内容有需要换行的地方时,需要使用换行标签,不能使用enter换行,浏览器不识别代码中的enter键换行

==注意:==换行标签可以叠加使用,一个换行标签换行一次,多个标签换行多次

3.2.2水平线标签<hr>

3.2.3图像标签<img>

作用:在网页中插入图片

<img src = "图片的URL">

src用于指定图像的位置和名称(URL),是<img>的必须属性
注意:以./开头,vscode有提示功能

图像标签的属性

1. alt-替换文本(图片无法显示的时候显示的文字)
2. title-提示文本(鼠标悬停在图片上面的时候显示的文字)
3. width-图片的宽度(值为数字,没有单位)
4. heigh-图片的高度(值为数字,没有单位)
   注意:只调高度或者宽度时,另一个会随之改变,浏览器会自动将图片等比缩放

3.3表单标签

作用:收集用户信息

使用场景:

• 登录页面
• 注册页面
• 搜索区域
  注意:所有表单标签要使用form标签包裹,让form标签统一管理所有表单标签才能有实际的功能
  form标签的action属性:action属性值是发送数据的地址

3.3.1标签input(单标签)

input标签最重要的是属性type,type属性值不同,则功能不同

<input type = "...">

1. type的属性值:

• text-文本框,用于输入单行文本
• password-密码框
• radio-单选框
• checkbox-多选框
• file-上传文件
  

2. placegholder属性
   该属性为占位文本,用于描述提示信息 ,文本框 和密码框都可以使用

3. 单选框radio的两个常用属性

• name-控件名称-控件分组,同组中只能选一个(单选功能)

• checked-默认选中-属性名和属性值相同,简写为一个单词

  性别: 男
  女

使用name属性,且name属性值相同把男和女单选框分为一组,同组只能二选一实现单选效果

 性别: <input type="radio" name = "gender" checked>男
        <input type="radio" name = "gender">女

默认选中男

4)上传文件file的一个常用属性
multiple属性-实现文件多选功能

<input type = "file" multiple>

5. 多选框checkbox的一个常用属性
   checked默认选中

3.3.2下拉菜单

标签:select嵌套option,select是下拉菜单的整体,option是下拉菜单的每一项

selected属性

select属性-默认显示某个值
例:给广州加上selected属性,浏览器默认显示广州

3.3.3文本域

作用:多行输入文本的表单控件

标签:textarea,双标签

<textarea>默认提示文字</textarea>

一般会使用CSS设置尺寸

3.3.4label标签

作用:网页中,某个标签的说明文本,也可以使用lable标签绑定文字和表单控件的关系,增大表单控件的点击范围

1. 写法一:

• label标签只包裹内容,不包裹表单控件

• 设置label标签的for属性值和表单控件id的属性值相同

  性别: <input type="radio" name = "gender" id="man"> <label for="man">男</label>
        <input type="radio" name = "gender" id = "woman"> <label for="woman">女</label>

2. 写法二:
   使用label标签包裹文字和表单控件,不需要属性

   性别:
   <label>男</label>
   <label>女</label>

注意:可以用label标签增大点击范围的表单控件有:文本框,密码框,上传文件,单选框,多选框,下拉菜单,文本域等等

以文本框为例子

<label>姓名:</label><input type="text">

说明:运用label标签能够把"姓名"和输入框关联起来,增强代码的语义化,点击姓名时也能够输入框也显示光标,增大了点击范围

3.3.5按钮标签

<button type ="">按钮</button>

type属性的值:

• submit-提交按钮,点击以后可以提交数据到后台
• reset-重置按钮,点击后将表单控件恢复默认值
• button-普通按钮,默认没有功能,一般配合javaScript使用

3.4无语义的布局标签

作用:布局网页(划分网页区域,摆放内容)

• div-独占一行
• span-不换行

4.路径

路径是指查找文件时,从起点到终点经历的路线

路径分为两类:

• 相对路径:从当前文件位置出发查找目标文件
• 绝对路径:从盘符出发查找文件
  /表示进入某个文件夹里面,.表示当前文件所在文件夹,../表示进入当前文件的上一级文件夹

5.字符实体

作用:在网页中显示预留字符

• -空格-&nbsp;
• <-小于号-&lt;
• > - 大于号-&gt;
  

注意:在代码中敲键盘的空格,网页只识别一个