web前端学习-html标签

web前端学习-html标签

  • 1. HTML的基础知识
    • 1.1 排版标签
      • 1.1.1 标签标题
      • 1.1.2 文本格式化标签
      • 1.1.3 换行标签和分割线标签
      • 1.1.4 文本格式化标签
    • 1.2 媒体标签
      • 1.2.1 图片标签
      • 1.2.2 路径
      • 1.2.3 音频标签
      • 1.2.4 视频标签
      • 1.2.5 链接标签
        • 1.2.5.1 链接标签的基础介绍
        • 1.2.5.2 链接标签的target属性
    • 3. 列表标签
      • 3.1 无序列表
      • 3.2 有序列表
      • 3.3 自定义列表
    • 4 .表格标签
      • 4.1表格的基本标签
      • 4.2 表格的相关属性
      • 4.3 表格的标题和表头单元格标签
      • 4.4 表格的结构标签
      • 4.5 合并单元格
    • 5. 表单标签
      • 5.1 inpu系列标签
      • 5.2 input系列标签-文本框
      • 5.3 input系列标签-单选框
      • 5.4 文件选择
      • 5.5 input系列-按钮标签
      • 5.6 按钮标签
      • 5.7 select下拉菜单标签
      • 5.8 textarea文本域标签
      • 5.9 lable 标签
      • 5.10 语义化标签
        • 5.10.1 没有语义的标签
        • 5.10.1 语义标签
      • 5.11 字符实体

1. HTML的基础知识

1.1 排版标签

1.1.1 标签标题

场景: 在新闻和文章的网页中,都离不开标题, 用来突出显示文章的标题

  • h系列标签: 1~6级标题,重要程度依次递减
  • 特点: 文字都有加粗,文字都有变大,并且从h1->h6文字逐渐减小,独占一行
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签title>
head>
<body>
    <h1>一级标题h1>
    <h2>二级标题h2>
    <h3>三级标题h3>
    <h4>四级标题h4>
    <h5>五级标题h5> 
    <h6>六级标题h6>
body>
html>

运行结果:
web前端学习-html标签_第1张图片

  • command + D: 快速选中相同的内容

1.1.2 文本格式化标签

场景: 在新闻和文章的页面中,用于分段显示

  • 特点: 表示段落, 段落之间存在间隙, 独占一行
    web前端学习-html标签_第2张图片

1.1.3 换行标签和分割线标签


  • : 表示换行标签, 强制让文字换行

  • :分割线标签, 分割不同主题的水平线
    • 单标签,在页面中显示一条水平线
      web前端学习-html标签_第3张图片

1.1.4 文本格式化标签

  • 场景:需要让文字加粗,下划线、倾斜、删除线等效果
  • 代码:
    • b、strong都是表示文本加粗的效果
    • u、ins:表示文本下划线
    • i 、em:字体倾斜
    • s、del删除线
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <b>b表示的字体加粗b>
    <strong>strong表示的字体加粗strong> <br>
    <u>u表示的文本下划线u>
    <ins>ins表示文本下划线ins><br>
    <i>i表示字体倾斜i>
    <em>em表示字体倾斜em><br>
    <s>s表示删除线s>
    <del>del表示删除线del>
body>
html>

web前端学习-html标签_第4张图片

1.2 媒体标签

1.2.1 图片标签

  • 场景:在网页中显示图片
  • 代码:图片加载失败时显示文本
  • 特点:
    • 单标签,img标签需要展示对应的效果,需要借助标签的属性进行设置
    • scr:表示的图片的路径
    • alt:表示替换文本,当图片加载失败的时候显示的文本,图片加载成功则不会显示
    • title:提示文本,当鼠标悬停在图片上时,才显示的文本
    • width、height:宽度和高度(数字),如果只设置其中一个属性,另一个没有设置,图片会自动等比例缩放(此时图片不会变形),但是如果两个属性都设置了,若设置不当此时图片可能会变形
  • 属性注意点:
    • 标签的属性写在开始标签的内部
    • 标签上可以同时存在多个属性
    • 属性之间以空格隔开
    • 标签名与属性名之间必须以空格隔开
    • 属性之间没有顺序之分

1.2.2 路径

  • 绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
  • 例如:/Users/dyc/Desktop/test.png
  • 相对路径:从当前文件出发寻找目标文件的过程
    • ./:表示当前目录
    • ../:上级目录

1.2.3 音频标签

  • 场景:在页面中插入音频
  • 代码:
  • 常见属性:
    • src:音频的路径
    • controls:显示音频的播放控件
    • autoplay : 自动播放(部分浏览器不支持这个属性,也就是设置了也没有效果)
    • loop:表示循环播放
    • 注意点:音频标签目前只支持三种格式:MP3、Wav、Ogg

1.2.4 视频标签

  • 场景:在页面中插入视频
  • 代码:
  • 常见属性:
    • src:音频的路径
    • controls:显示视频的播放控件
    • autoplay : 自动播放(谷歌浏览器中需要配合mute实现静音的自动播放)
    • loop:表示循环播放

1.2.5 链接标签

1.2.5.1 链接标签的基础介绍
  • 场景: 点击之后,从一个静态页面跳转到另外一个页面
  • 称呼: a标签、超链接、锚链接
  • 代码:点击跳转到百度一下
  • 特点:双标签,内部可以包裹内容,如果需要点击a标签去指定页面,需要设置a标签的href属性,当你不知道这个链接需要填写啥时,你可以先填写一个#表示一个空链接,等确定正确的地址在修改
1.2.5.2 链接标签的target属性
  • target:表示目标网页的打开形式
    • _self:默认值,在当前窗口中跳转(覆盖原网页)
    • _blank:在新窗口中跳转(保留原网页)
    • 代码:点击跳转到百度一下

3. 列表标签

学习列表标签的目的:能够使用无序列表、有序列表、自定义列表标签,实现网页中的列表结构的搭建

3.1 无序列表

无序列表的应用场景很多,比如在网页中按照行展示关联性的内容,如:新闻列表、排行榜、账单等

其特点是按照行的方式,整齐显示内容

  • 无序列表的组成标签:
    • ul:表示无列表的整体,用于包裹的标签
    • li:表示无序列表的每一项。用于包含每一行的内容
    • 特点:列表的每一项前都默认的显示圆点标识(后面可以通过css去掉)
    • 注意点:ul标签内只能包含li标签,li标签可以包含任何内容
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <p>水果列表p>
    <ul>
        <li>榴莲li>
        <li>香蕉li>
        <li>苹果li>
        <li>哈密瓜li>
        <li>火龙果li>
    ul>
body>
html>

3.2 有序列表

  • 标签组成:
    • ol:表示有序列表的整体,用于包裹li标签
    • li:表示有序列表的每一项。用于包含每一行的内容
    • 特点:列表的每一项前面都有序号
    • 注意:ol标签只允许包含li标签,li标签可以包含任何内容
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <p>成绩排行榜p>
    <ol>
        <li>小姐姐:100分li>
        <li>小帅哥:80分li>
        <li>小可爱:60分li>
    ol>
body>
html>

3.3 自定义列表

  • 场景: 在网页的地步导航栏中通常会使用自定义列表的实现
  • 标签组成:
    • dl :表示自定义列表的整体,用于包裹dt/dd标签
    • dt:表示自定义列表的主题
    • dd:表示自定义列表的每一项内容
    • 注意点:dl标签内只允许包含dt/dd标签,dt/dd标签可以包含任意内容
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
    <dl> 
        
        <dt>帮助中心dt>
        
        <dd>账户管理dd>
        <dd>购物指南dd>
        <dd>订单操作dd>
    dl>
body>
html>

4 .表格标签

4.1表格的基本标签

  • 场景: 在网页中已行+列的单元格的方式整齐展示数据,如:学生成绩表
  • 基本标签:
    • table:表格整体,可用于包裹多个tr
    • tr:表格每行,可用于包裹td
    • td:表格单元格,可用于包裹内容
    • 注意点:标签的嵌套关系:table>tr>td
      web前端学习-html标签_第5张图片

4.2 表格的相关属性

  • border:表格的边框宽度(数字)
  • width:表格宽度(数字)
  • height: 表格高度 (数字)
  • 但是我们在实际开发过程中,对于样式效果设置推荐使用CSS设置
    web前端学习-html标签_第6张图片

4.3 表格的标题和表头单元格标签

  • caption:表格大标题,表示表格整体的大标题,默认在表格整体的顶部居中显示
  • th:表头单元格,表示一列小标题,通常用于表哥的第一行,默认内部文字加粗并居中显示
  • 注意点:caption标签书写在table标签内部,th标签书写在tr内部(用于替换td标签)
    web前端学习-html标签_第7张图片

4.4 表格的结构标签

  • 让表格的内容结果分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰
  • thead:表格头部
  • tbody:表格主体
  • tfoot:表格底部
  • 注意点:表格结果标签内部用于包裹tr标签,表格的结构标签可以省略,该结构标签对于显示效果没有说明作用,但是加上了结构标签,对于浏览器来说结构就比较清晰,执行起来效率会比较高,而且代码的结构也比较侵清晰

web前端学习-html标签_第8张图片

4.5 合并单元格

  • 场景:将水平或垂直多个单元格合并成一个单元格
  • 标签属性:
    • rowspan:合并单元格的个数,跨行合并,将多行的单元格垂直合并
    • colspan: 合并单元格的个数,跨列合并,将多列的单元格水平合并
    • 合并原则:左上原则(上下合并,保留最上的,删除其它,左右合并,保留最左边的,删除其她的)
    • 注意点:只能同一个结构标签中的单元格才能合并
      web前端学习-html标签_第9张图片

5. 表单标签

5.1 inpu系列标签

  • input标签可以通过type属性值的不同展示不同效果
  • type属性值如下:
    web前端学习-html标签_第10张图片

web前端学习-html标签_第11张图片

5.2 input系列标签-文本框

  • placeholder:占位符,提示童虎输入内容的文本
    在这里插入图片描述

5.3 input系列标签-单选框

通过上面的例子,我们可以发现上面的单选框好像不能单选, 并且没有一个默认选中状态,是因为没有设置下面两个属性

  • name:分组,有相同name属性值的单选框为一组,一组中同时只能有一个被选中
  • checked:默认选中

在这里插入图片描述

5.4 文件选择

对于文件的选择,我们还可以设置多文件的选择

  • multiple:多文件选择
    在这里插入图片描述

5.5 input系列-按钮标签

  • 场景:在网页中显示不同功能的按钮表单控件
  • type属性值:
    • submit:提交按钮,点击之后提交数据给后端服务器
    • reset:重置按钮,点击之后恢复表单默认值
    • button:普通按钮,默认无功能,之后配合js添加功能
    • 注意点:如果需要实现以上按钮功能,需要配合form标签使用,form的使用方法,用form标签把标签表单标签一起包裹起来即可

5.6 按钮标签

  • 场景:在网页中显示用户点击的按钮

  • 标签名:button

  • type属性值(同input的按钮系列):

    • submit:提交按钮,点击之后提交数据给后端服务器
    • reset:重置按钮,点击之后恢复表单默认值
    • button:普通按钮,默认无功能,之后配合js添加功能
    • 注意点:谷歌浏览器中button默认是提交按钮,button标签是双标签,便于包裹其她内容:文字,图片等

    web前端学习-html标签_第12张图片

5.7 select下拉菜单标签

  • 场景:在网页中提供多个选这项的下拉菜单表单控件

  • 标签组成:

    • select:下拉菜单的整体
    • option:下拉菜单的每一项
    • selected:下拉菜单的默认选中
  • 快捷键:alt +shift+ ↓ :快速创建复制一行内容到下一行
    web前端学习-html标签_第13张图片

5.8 textarea文本域标签

  • 场景:在网页中提供可输入多行文本的表单控件
  • 标签名:textarea
  • 常见属性:
    • cols:规定了文本域内可见宽度
    • rows:规定了文本宽度可见行数
    • 注意点:右下角可以拖拽改变大小(后期开发中一般会禁掉),实际开发中正对样式效果推荐使用CSS设置
      web前端学习-html标签_第14张图片

5.9 lable 标签

  • 场景: 常用于绑定内容和表单标签的关系
  • 标签名:lable
  • 使用方法:
    • 使用lable标签把内容(文本)包裹起来,在表单标签上添加id属性,在lable标签的for属性中设置对应的id的属性值
    • 直接使用lable标签把内容(文本)和表单标签一起包裹起来,需要把lable标签的for属性删除即可
      web前端学习-html标签_第15张图片

5.10 语义化标签

在html中有一些没有语义的布局标签(div,span)和有语义的布局标签

5.10.1 没有语义的标签
  • 场景:实际开发网页时会大量频繁的使用到divspan这两个没有语义的标签
  • div:一行只显示一个(独占一行)
  • span:一行可以显示多个
5.10.1 语义标签
  • 场景: 在html5的新版本中,推出了一些有语义的布局标签供开发者使用
  • 标签:
    web前端学习-html标签_第16张图片

5.11 字符实体

在开发的过程中,我们有时候需要添加一些符号,我们在代码中需要使用一些字符实体的代码来实现:
web前端学习-html标签_第17张图片

这里我们用到最多是空格的符号 都是英文下的标点符号

代码示例

你可能感兴趣的:(web前端,前端,html,学习)