HTML5 基础总结

2 篇文章 0 订阅
2 篇文章 0 订阅


1. html 骨架(页面固定结构)

整体、头部、标题、主体

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的主体内容
    </body>
</html>
  • html 标签:网页的整体

  • head 标签:网页的头部

  • body 标签:网页的身体

  • title 标签:网页的标题

2. html 注释

注释格式

<!-- 这是注释的内容 -->

3. html 标题标签

格式:h 系列标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题大小根据级别逐渐缩小,标题标签写在 body 标签中。

4. 换行标签

格式:

<br>

换行标签让文字强制换行显示,是单标签。

5. 水平线标签

格式:

<hr>

单标签,在页面中显示一条水平线。

6. 文本格式化标签

文本格式化标签完成文字的加粗、下划线、倾斜、删除线等效果。

标签说明
b/strong加粗
u/ins下划线
i/em倾斜
s/del删除线

7. 图片标签

7.1 图片标签的使用

在网页中显示图片需要用到图片标签。

格式:

<img src="URL" alt="">

// src 为属性名,后面跟属性值。
// URL 可以是本地地址,也可以是公网上的地址。
// alt 属性用来为图像定义一串预备的可替换的文本。

是单标签,展示对应的效果需要借助标签的属性进行设置。

7.2 图片标签的属性

必需的属性

属性描述
alttext规定图像的替代文本,当图片加载失败会显示替换的内容。
srcURL规定显示图像的 URL。

可选的属性

属性描述
title提示文本鼠标悬停时显示的文本。
aligntop/bottom/middle/left/right不推荐使用。规定如何根据周围的文本来排列图像。
borderpixels不推荐使用。定义图像周围的边框。
heightpixels*%*定义图像的高度。
hspacepixels不推荐使用。定义图像左侧和右侧的空白。
ismapURL将图像定义为服务器端图像映射。
longdescURL指向包含长的图像描述文档的 URL。
usemapURL将图像定义为客户器端图像映射。
vspacepixels不推荐使用。定义图像顶部和底部的空白。
widthpixels*%*设置图像的宽度。

示例

<img src="./cat.gif" alt="图片加载失败" title="这是一只猫" width="500" height="500">

8. 路径

8.1 绝对路径

示例:

<img src="D:\图片素材\表情包\2020_1111.png" alt="图片加载失败">
<img src="http://101.34.22.188/tupian/girl-01.jpg" alt="图片加载失败">

8.2 相对路径

示例:

<img src="./test.jpg" src="图片加载失败">

9. 音频标签

音频标签用于在页面中插入音频,支持的格式:MP3、Wav、Ogg。

格式:

<audio src="./music.mp3" controls></audio>

常用属性:

属性名功能
loop循环播放
autoplay自动播放(部分浏览器不支持)
controls显示播放的控件
src音频的路径

示例:

<audio src="http://music.163.com/song/media/outer/url?id=4873075.mp3" controls autoplay loop></audio>

10. 视频标签

视频标签用于在网页中插入视频。

格式:

<video src="./video.mp4" controls></video>

常用属性:

属性名功能
loop循环播放
autoplay自动播放(谷歌浏览器需配合muted实现静音播放)
controls显示播放的控件
src视频的路径

示例:

<video src="https://video.699pic.com/videos/79/59/32/a_JTV8yrQGFrNy1613795932.mp4" controls autoplay muted loop></video>

11. 链接标签

  • 场景:点击之后,从一个页面跳转到另一个页面。

  • 称呼:a 标签、超链接、锚链接。

  • 特点:双标签,需要设置 a 标签的 href 属性。

格式:

<a href="./destination.html">超链接</a>

target 属性:目标网页的打开形式

取值效果
_self默认值,当前窗口跳转(覆盖原网页)
_blank在新窗口跳转(保留原网页)

示例:

<a href="https://blog.csdn.net/shenyuanhaojie?spm=1000.2115.3001.5343">我的博客</a>
<a href="https://www.baidu.com/" target="_blank">百度一下</a>

当开发网站初期,我们还不知道跳转地址的时候, href 的值书写为 # ,是空链接的意思。

12. 段落标签

p 标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,也可以在样式表中规定。所有主流浏览器都支持 p 标签。

格式:

<p>This is some text in a very short paragraph</p>

可选属性:

属性描述
alignleft/right/center/justify不赞成使用。请使用样式取代它。规定段落中文本的对齐方式。

示例:

<p>
    秦时明月主题曲《情动》,旋律优美,扣人心弦,推荐收听!
    <a href="http://www.zgei.com/?name=%E6%83%85%E5%8A%A8&type=netease">《情动》</a>
</p>

13. 列表

  • 列表的使用场景:在网页中按照行展示关联性的内容,如:新闻列表、排行榜、账单等。

  • 特点:按照行的方式,整齐的显示内容。

  • 种类:无序列表、有序列表、自定义列表。

13.1 无序列表

标签组成:

标签名说明
ul表示无序列表的整体,用于包裹标签
li表示无序列表的每一项,用于包含每一行的内容

列表的每一项前默认显示圆点标识;ul 标签中只允许包含 li 标签,li 标签可以包含任意内容。

示例:

<ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>榴莲</li>
</ul>

13.2 有序列表

标签组成:

标签名说明
ol表示有序列表的整体,用于包裹 li 标签
li表示有序列表的每一项,用于包含每一行的内容

列表的每一项前默认显示序号标识;ol 标签中只允许包含 li 标签,li 标签可以包含任意内容。

示例:

<ol>
    <li>香蕉</li>
    <li>苹果</li>
    <li>榴莲</li>
</ol>

13.3 自定义列表

标签组成:

标签名说明
dl表示自定义列表的整体,用于包裹 dt/dd 标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项内容

dd 前会默认显示缩进效果;dl 标签中只允许包含 dt/dd 标签,dt/dd 标签可以包含任意内容。

示例:

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</dl>

14. 表格

14.1 基本标签

标签名说明
table表格整体,可用于包裹多个 tr
tr表格每行,用于包裹 td
td表格单元格,可用于包裹内容

嵌套关系:table > tr > td

示例:

<table>
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评语</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>100</td>
        <td>优秀</td>
    </tr>
    <tr>
        <td>小蓝</td>
        <td>90</td>
        <td>优秀</td>
    </tr>
</table>

上面示例显示效果是没有边框的,需要设置属性。

14.2 表格属性

相关属性:

属性名称属性值效果
alignleft/center/right规定表格相对周围元素的对齐方式
cellpadding像素值规定单元边沿与其内容之间的空白,默认1像素
cellspacing像素值规定单元格之间的空白,默认2像素
border数字边框宽度
width数字表格宽度
height数字表格高度

PS:在实际开发中样式效果推荐用 CSS 设置。

示例:

<table border="1" width="500" height="500">
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评语</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>100</td>
        <td>优秀</td>
    </tr>
    <tr>
        <td>小蓝</td>
        <td>90</td>
        <td>优秀</td>
    </tr>
</table>

14.3 表格标题和表头单元格标签

用处:在表格中表示整体大标题和一系列小标题。

其他标签:

标签名名称说明
caption表格大标题表示表格整体大标题,默认在表格整体顶部居中位置显示
th表头单元格表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示

PS:caption 标签书写在 table 标签内部;th 标签书写在 tr 标签内部(用于替换 td 标签)。

示例:

<table border="1">
    <caption><strong>学生成绩单</strong></caption>
    <tr>
        <th>姓名</th>
        <th>成绩</th>
        <th>评语</th>
    </tr>
    <tr>
        <td>小红</td>
        <td>100</td>
        <td>优秀</td>
    </tr>
    <tr>
        <td>小蓝</td>
        <td>90</td>
        <td>优秀</td>
    </tr>
</table>

14.4 结构标签

用处:让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰。

结构标签:

标签名名称
thead表格头部
tbody表格主题
tfoot表格底部

PS:表格结构标签内部用于包裹 tr 标签,表格的结构标签可以省略。

示例:

<table border="1">
    <caption><strong>学生成绩单</strong></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小红</td>
            <td>100</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>小蓝</td>
            <td>90</td>
            <td>优秀</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总结</td>
            <td>非常优秀</td>
            <td>非常优秀</td>
        </tr>
    </tfoot>
</table>

14.5 合并单元格

合并单元格方式:

  • 跨行合并:rowspan=“合并单元格的个数” ;最上侧单元格为目标单元格, 写合并代码。

  • 跨列合并:colspan=“合并单元格的个数”;最左侧单元格为目标单元格, 写合并代码。

image-20220222232717703

合并单元格三步曲:

  • 先确定是跨行还是跨列合并。

  • 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如:<td colspan=“2”></td>

  • 删除多余的单元格。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>合并单元格</title>
</head>
<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
           
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
           
            <td></td>
            <td></td>
        </tr>
    
    </table>
</body>
</html>

效果:

image-20220222233138646

15. 表单

15.1 input 系列标签

  • 用处:在网页中显示收集用户信息的表单效果,如:登录页、注册页。

  • input 标签可以通过 type 属性值的不同展示不同的效果。

type 属性值

image-20220223142713658

示例

请输入内容:<input type="text">
<br>
请输入密码:<input type="password">	<!--输入的内容会隐藏-->
<br>
单选框:<input type="radio">
<br>
多选框:<input type="checkbox">
<br>
上传文件:<input type="file">

input 按钮系列标签

标签名type 属性值说明
inputsubmit提交按钮,点击之后提交数据给后端服务器
inputreset重置按钮,点击之后恢复表单默认值
inputbutton普通按钮,默认无功能,之后配合 js 添加功能

PS:如果需要实现以上按钮功能,需要配合 form 标签使用。form 使用方法:用 form 标签把表单标签一起包裹起来即可。

示例:

<form action="">	<!--表单域标签,框定范围,action 后跟提交地址-->
    用户名:<input type="text">
    <br>
    密码:<input type="password">
    <br>
    <!--按钮-->
    <input type="submit" value="免费注册">
    <input type="reset">
    <input type="button" value="普通按钮,暂无功能">
</form>

15.2 button 按钮标签

button 标签用于在网页中显示用户点击的按钮。

type 属性值同 input

标签名type 属性值说明
inputsubmit提交按钮,点击之后提交数据给后端服务器
inputreset重置按钮,点击之后恢复表单默认值
inputbutton普通按钮,默认无功能,之后配合 js 添加功能

PS:谷歌浏览器中 button 默认是提交按钮,button 标签是双标签,便于包裹其他内容:文字、图片等。

示例:

<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>

15.3 select 下拉菜单标签

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

标签组成

  • select标签:下拉菜单的整体

  • option标签:下拉菜单的每一项

常见属性

  • selected:下拉菜单的默认选中

示例:

<select>
    <option selected>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>

15.4 textarea 文本域标签

场景:在网页中提供可输入多行文本的表单控件。

常见属性

  • cols:规定了文本域内可见宽度

  • rows:规定了文本域内可见行数

注意点

  • 右下角可以拖拽改变大小

  • 实际开发时针对于样式效果推荐用 CSS 设置

示例:

<textarea cols="60" rows="30">默认内容</textarea>

15.5 label 标签

场景:常用于绑定内容与表单标签的关系。

使用方法一:

  1. 使用 label 标签把内容(如:文本)包裹起来

  2. 在表单标签上添加 id 属性

  3. 在 label 标签的 for 属性中设置对应的 id 属性值

使用方法二:

  1. 直接使用 label 标签把内容(如:文本)和表单标签一起包裹起来

  2. 需要把 label 标签的 for 属性删除即可

示例:

性别:
<input type="radio" name="sex" id=""> <label for=""></label>
<label><input type="radio" name="sex"></label>
<!--两种方式-->

16. 语义化标签

16.1 没有语义的布局标签 - div 和 span

  • 场景:实际开发网页时会大量频繁的使用到 div 和 span 这两个没语义的布局标签。

  • div 标签:一行只显示一个(独占一行) 。

  • span 标签:一行可以显示多个。

示例:

普通文字
<div>这是 div 标签</div>
<div>这是 div 标签</div>
<span>这是 span 标签</span>
<span>这是 span 标签</span>

16.2 有语义的布局标签(了解)

标签语义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
article网页文章

PS:以上标签显示特点和 div 一致,但是比 div 多了不同的语义。

image-20220223171510923

示例:

<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>

17. 字符实体

场景:在网页中展示特殊符号效果时,需要使用字符实体替代。

常见字符实体:

image-20220223175539882

18. 综合案例

18.1 优秀学生信息表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table border="1" width="400" height="400">
    <!-- 表格整体的大标题 -->
    <caption><h3>优秀学生信息表格</h3></caption>
    <!-- 表格的头部 -->
    <thead>
      <tr>
        <th>年级</th>
        <th>姓名</th>
        <th>学号</th>
        <th>班级</th>
      </tr>
    </thead>
    <!-- 表格的主体 -->
    <tbody>
      <tr>
        <!-- 保留 -->
        <td rowspan="2">高三</td>
        <td>张三</td>
        <td>110</td>
        <td>三年二班</td>
      </tr>
      <tr>
        <!-- 删除 -->
        <!-- <td>高三</td> -->
        <td>赵四</td>
        <td>120</td>
        <td>三年三班</td>
      </tr>
    </tbody>
    <!-- 表格的底部 -->
    <tfoot>
      <tr>
        <td>评语</td>
        <!-- 保留 -->
        <td colspan="3">你们都很优秀</td>
        <!-- 统统删除掉 -->
        <!-- <td>你们都很优秀</td> -->
        <!-- <td>你们都很优秀</td> -->
      </tr>
    </tfoot>
  </table>
</body>
</html>

18.2 相亲会员注册表单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>青春不常在,抓紧谈恋爱</h1>
  <hr>

  <form>
    昵称:
    <input type="text" placeholder="请输入昵称">
    <br><br>

    性别:
    <label>
      <input type="radio" name="sex" checked></label>
    <label>
      <input type="radio" name="sex"></label>
    <br><br>

    所在城市:
    <select>
      <option>上海</option>
      <option>北京</option>
      <option>广州</option>
      <option>深圳</option>
    </select>
    <br><br>

    婚姻状况:
    <input type="radio" name="marry" checked>未婚
    <input type="radio" name="marry">已婚
    <input type="radio" name="marry">保密
    <br><br>

    喜欢的类型:
    <input type="checkbox" checked>可爱
    <input type="checkbox" checked>性感
    <input type="checkbox">御姐
    <input type="checkbox">萝莉
    <input type="checkbox">小鲜肉
    <input type="checkbox">大叔
    <br><br>

    个人介绍:<br><br>
    <textarea name="" id="" cols="60" rows="10"></textarea>

    <h3>我承诺</h3>
    <ul>
      <li>年满18岁、单身</li>
      <li>抱着严肃的态度</li>
      <li>真诚寻找另一半</li>
    </ul>

    <input type="checkbox">我同意所有条款
    <br><br>

    <input type="submit" value="免费注册">
    <input type="reset">
  </form>
</body>
</html>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值