前端HTML

最新推荐文章于 2024-08-03 21:16:42 发布

罗马：819

最新推荐文章于 2024-08-03 21:16:42 发布

阅读量86

点赞数

分类专栏： HTML 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/lyc111601/article/details/128672552

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

初识

web标准中分为三个构成：
结构：HTML 页面元素和内容
表现：CSS 网页元素的外观和位置等页面样式（颜色，大小）
行为 JavaScript 网页模型的定义与页面交互
Web标准的记忆方法
web标准要求页面实现：结构、表现、行为三层分离
自动换行：ALT+Z

HTML的感知

HTML：超文本标记语言
专门用于网页开发的语言，主要是通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

注释

标题和段落

标题标签
场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
代码：h系列标签

<h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>

语义：1~6级标题，重要程度依次递减
特点：
文字都有加粗
文字都有变大，并且从h1-h6文字逐渐减小
独占一行
段落标签
场景：在新闻和文章的页面中，用于分段显示
代码：<p>我是一段文字</p>
语义：段落
特点：
段落之间存在间隙
独占一行

换行和水平线标签

场景：让文字强制换行显示
代码：br
语义：换行
特点：
单标签
让文字强制执行
水平线标签
场景：分割不同的主题内容的水平线
代码：hr
语义：主题的分割转换
特点：
单标签
在页面中显示一条水平线

<!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>Document</title>
</head>
<body>
    <!-- <p>我是一段文字</p> -->
    <!-- <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5> -->
    <h1>生命的宣告</h1>
    <hr>
    <p>彼得前书2：24他被挂在木头上，亲身担当了我们的罪，<br>使我们既然在罪上死，就得以在义上活。因他受的鞭伤，你们便得了医治。
        昨天，我们谈了耶稣医治了“一切”病人，因为他知道自己要承受鞭伤，知道自己要钉十字架。</p>
    <p>以赛亚书53：5也说了同样的内容。当彼得谈到这件事的时候，他用了过去时，因着耶稣受的鞭伤，你们便“得了”医治！因为耶稣的确已经付出了疾病的代价，受了鞭伤，所以事情已经成就了。</p>
</body>
</html>

在这里插入图片描述

文本格式化标签

场景：需要让文字加粗、下划线、倾斜、删除线等效果
代码：
strong:加粗
ins：下划线
em:倾斜
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=b, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>
    <del>删除线</del>
</body>
</html>

在这里插入图片描述

图片的基本使用

场景：在网页中显示图片
代码：img src=" " alt=" "
特点：
单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置！

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="C:\Users\Lenovo\Pictures\微信图片_20210521145048.jpg" alt="">
</body>
</html>

在这里插入图片描述

图片——属性

图片标签的alt属性
属性名：alt
属性值：替换文本
当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt文本

<body>
    <img src="./错的路径图片会加载失败" alt="我是替换文本" title=" ">
</body>
</html>

图片标签的title属性
属性名：title
属性值：提示文本
当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

<body>
    <img src="./1.jpg" alt="我是替换文本" title="我是title的效果 ">
</body>
</html>

图片标签的width和height属性
属性名：width和height
属性值：宽度和高度（数字）
注意点：
如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当此时图片可能会变形

绝对路径

场景：页面需要加载图片，需要先找到对应的图片

相对路径

概念普及：
当前文件：当前的html网页
目标文件：要找到的图片
相对路径;从当前文件开始出发找目标文件的过程
相对路径分类：
同级目录：当前文件和目标在同一目录
下级目录：目标文件在下级目录中
上级目录

音频标签

场景：在页面中插入音频
代码：<audio src="src="./music.mp3"controls></audio>
常见属性：
src 音频的路径
controls 显示播放的路径
autoplay：自动播放（部分浏览器不支持）
loop:循环播放

视频标签

场景：在页面中插入视频
代码：<video src="./video.mp4"controls></video>
常见属性：
src 音频的路径
controls 显示播放的路径
autoplay：自动播放（谷歌浏览器中需要配合muted实现静音播放）

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

loop:循环播放

超链接

场景：点击之后，从一个页面跳转到另一个页面
称呼：a标签、超链接、喵链接
代码：<a href="./目标网页.html">超链接</a>
特点：
双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
当开发网站初期，我们还不知道跳转地址的时候，href的值书写#

<a href="#">空链接，不知道跳到哪里去</a>

href:跳转到地址
链接标签的target属性
属性名：target
属性值：目标网页的打开形式
_self 默认值，在当前窗口中跳转（覆盖原网页）
_blank 在新窗口中跳转（保留原网页）

<a href="https://www.baidu.com" target="_blank">百度一下</a>

综合案例招聘

shift+Alt+向上/向下向上/向下复制行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>腾讯科技高级web前端开发岗位</h1>
    <hr>
    <h2>职位描述</h2>
    <p>负责重点项目的前端技术方案和架构的研发和维护工作</p>
    <h2>岗位要求</h2>
    <p>5年以上的前端开发经验，精通html5/css3/javascript等web开发技术；</p>
    <p>熟悉bootstrap,vue,angularijs,reactjs等框架，熟练掌握一种以上；</p>
    <p>代码风格严谨，能高清保真还原设计稿，能兼容各种浏览器；</p>
    <p>对web前端的性能优化以及web常见的漏洞有一定的理解和相关实践；</p>
    <p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；</p>
    <p>责任心强，思路清晰，抗压能力好，具备良好的对外沟通和团队协作能力；</p>
    <h2>工作地址</h2>
    <p>上海市 徐汇区 腾云大厦</p>
    <img src="./1.png.jpg" alt="">
</body>
</html>

在这里插入图片描述

综合案例跳转 index

第一个链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=h, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>阿卡贝拉《千与千寻》</h1>
    <hr>
    <h2>音频</h2>
    <audio src="./苏玮 - 百年孤寂.mp3" controls></audio>
</body>
</html>

在这里插入图片描述
第二个链接：

<!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>Document</title>
</head>
<body>
    <h1>有一种悲伤</h1>
    <hr>
    <h2>视频</h2>
    <video src="./A-Lin-有一种悲伤 (《比悲伤更悲伤的故事》电影主题曲)(标清).mp4" controls></video>
</body>
</html>

在这里插入图片描述
最终：

<!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>Document</title>
</head>
<body>
    <h1>今日热搜词</h1>
    <hr>
    <h2>1.阿卡贝拉</h2>
    <p>阿卡贝拉（意大利:Acappella)即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：<a href="./one.html">阿卡贝拉《千与千寻》</a></p>
    <h2>2、翻唱</h2>
    <p>“翻唱”是指将已经发表并由其他人演唱的歌曲根据自己的风格重新演唱，包括新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例：<a href="./two.html">有一种悲伤</a></p>
</body>
</html>

在这里插入图片描述

列表标签——无序和有序

在这里插入图片描述

列表自定义

在这里插入图片描述

表格和使用

在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <table border="1" width="600" height="400">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>100</td>
            <td>1000</td>
            <td>10000</td>
        </tr>
        <tr>
            <td>200</td>
            <td>2000</td>
            <td>20000</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

表格标题和表头单元格

场景：在表格中表示整体大标题和一列小标题
其他标签：
标签名名称说明
caption 表格大标题表示表格整体大标题，在默认在表格整体顶部
th 表头单元格表示一列标题，通常用于表格第一行，默认内部
caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）

<!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>Document</title>
</head>
<body>
    <table border="1">
        <caption><strong>学生成绩</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100分</td>
            <td>真棒</td>
        </tr>

    </table>
</body>
</html>

在这里插入图片描述

合并单元格

场景：将水平或垂直多个单元格合并成一个单元格
在这里插入图片描述

表单-input基本使用

在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <!-- 写什么就显示什么 -->
    文本框：<input type="text" name="" id="">
    <br>
    <br>
    <!-- 书写的内容都会变成点点显示 -->
    密码框：<input type="password">
    <br>
    <br>
    单选框：<input type="radio">
    <br>
    <br>
    多选框：<input type="checkbox">
    <br>
    <br>
    上传文件：<input type="file" name="" id="">
</body>
</html>

表单-input-占位符（提示信息）

场景：在网页中显示输入单行文本的表单控件
type属性值：text
常用属性：
属性名说明
placeholder 占位符。提示用户输入内容的文本

<!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>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入用户名">
    <input type="password" placeholder="请输入密码">
</body>
</html>

表单—单选功能和默认选中

在这里插入图片描述

<!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>Document</title>
</head>
<body>
    性别：<input type="radio" name="sex">男 <input type="radio" name="sex" >女       
</body>
</html>

在这里插入图片描述

<!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>Document</title>
</head>
<body>
    性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked >女       
</body>
</html>

在这里插入图片描述
默认为女

<!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>Document</title>
</head>
<body>
    性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked >女 
    <input type="checkbox" checked>      
</body>

在这里插入图片描述

上传多个文件

场景：在网页中显示文件选择的表单控件
type属性值：file
常用属性：
属性名说明
multiple 多文件选择

<!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>Document</title>
</head>
<body>
    <input type="file" multiple>
</body>
</html>

在这里插入图片描述

表单——按钮-input

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

<!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>Document</title>
</head>
<body>
   用户名: <input type="text">
   <br>
   <br>
   密码：<input type="password">
   <br>
   <br>
   <!-- 按钮 -->
   <input type="submit">

</body>
</html>

在这里插入图片描述
form:副级域标签

表单——按钮button

场景：在网页中显示用户点击的按钮
标签名：buttom
type属性值：（同input的按钮系列）
注意点：
谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容

<!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>Document</title>
</head>
<body>
   <button>我是按钮</button>
   <button type="submit">提交按钮</button>
   <button type="reset">重置按钮</button>
   <button type="button">普通按钮，没有任何功能</button>
</body>
</html>

在这里插入图片描述

表单-下拉菜单

场景：在网页中提供多个选择项的下拉菜单表单控件
便签组成：
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性：
selected:下拉菜单的默认选中

<!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>Document</title>
</head>
<body>
   <select>
       <option>北京</option>
       <option>上海</option>
       <option>广州</option>
       <option>深圳</option>
</select>
</body>
</html>

在这里插入图片描述

表单-文本域

场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
cols:规定了文本域可见宽度
rows:规定了文本域内可见行数
注意点：
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐使用css设置

表单-label标签

场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法：
1。直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2。需要标签的for属性删除即可

<!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>Document</title>
</head>
<body>
   性别：
   <label><input type="radio" name="sex">女</label>
</body>
</html>

在这里插入图片描述

语义化标签

没有语义的布局标签-div和span
场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个

<!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>Document</title>
</head>
<body>
   普通文字
   <div>这是div标签</div>
   <div>这是div标签</div>
   <span>这是span标签</span>
   <span>这是span标签</span>
</body>
</html>

在这里插入图片描述

字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体代替
结构：&英文
描述实体名称
空格 &nbsp

<!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>Document</title>
</head>
<body>
   这是啦啦啦啦啦&nbsp;&nbsp;啦啦啦啦
</body>
</html>

在这里插入图片描述

综合案例——学生信息表

在这里插入图片描述

<!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>Document</title>
</head>
<body>
   <table border="1" width="500" height="300">
    <caption><h3>优秀学生信息表格</h3></caption>
    <tr>
        <th>年级</th>
        <th>姓名</th>
        <th>学号</th>
        <th>班级</th>
    </tr>
    <tr>
        <td rowspan="2">高三</td>
        <td>李白</td>
        <td>110</td>
        <td>三年级二班</td>
    </tr>
    <tr>
        <td>杜甫</td>
        <td>120</td>
        <td>三年三班</td>
    </tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
   </table>
</body>
</html>

综合案例-表单

在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <h1>青春不常在不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="">
        昵称：<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 selected>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
        <br>
        <br>
        婚姻状况：
        <label><input type="radio" name="1" checked> 未婚</label>
        <label><input type="radio" name="1"> 离异</label>

        <br>
        <br>
        喜欢的类型：
        <label><input type="checkbox" checked>可爱</label>
        <label><input type="checkbox">性感  </label>    
        <label><input type="checkbox">御姐</label>
        <label> <input type="checkbox">萝莉</label>
        <label><input type="checkbox">小鲜肉</label>
        <label><input type="checkbox">大叔</label>
        <br>
        <br>
        各人介绍：<br>
        <textarea name="" id="" cols="60" rows="10"></textarea>
        <h3>我承诺</h3>
        <ul>
            <li>年满18、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
        <br>
        <br>
        <label ><input type="radio">我同意所有条款</label>
        <br>
        <br>
        <input type="submit" value="免费注册">
        <button type="reset">重置</button>

    </form>

</body>
</html>