HTML学习笔记

最新推荐文章于 2024-04-23 02:00:49 发布

青椒味半岛铁盒

最新推荐文章于 2024-04-23 02:00:49 发布

阅读量182

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/qq_36752532/article/details/118087329

版权

1.HTML基础认知

HTML（Hyper Text Markup Language）语言是一种超文本标记语言，具体有标签组成，构成网页的基本骨架结构，运行在浏览器中,通过浏览器的内核进行渲染

1.1 浏览器及内核的种类

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
渲染引擎不同，导致解析相同的代码时速度、性能、效果也不同

浏览器	内核
ie浏览器	trident
火狐浏览器	gecko
谷歌浏览器	blink（webkit分支）
safari浏览器	webkit
欧朋浏览器	blink（webkit分支）

1.2 Web标准

不同浏览器渲染引擎不同，对相同代码解析的效果会存在差异
web标准：让不同浏览器按照相同的标准显示结果

web标准中分三个构成

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页的样式
行为	JavaScript	网页的交互部分

1.3 html的基本骨架结

meta 标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等

移动端视口代码完整版：
（写移动端页面时要补全视口代码，否则会出现：屏幕等比例缩小到很小很小时，网页也同时缩小到很小，不利于的观看）

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

html 基本骨架结构详解：

<!-- 声明文档类型,大小写不敏感 -->
<! DOCTYPE html>
    <html>
    <head>        
        <!-- meta标签用于设置网页元数据 -->
        <!-- 设置字符集 -->
        <meta charset=”UTF-8”> 
        <!-- 设置链接默认跳转 -->
        <meta base=”www.baidu.com”> 
        <!-- 设置网站关键字，便于搜索引擎搜索，多个关键字用英文逗号隔开 -->
        <meta name=”keywords” content=”HTML,前端,CSS”>
        <!-- 设置网站描述信息，一般在搜索引擎中的结果的标题之下显示，多个描述信息用英文逗号隔开 -->
        <meta name=”discription” conttent=”这是一个学习网页,很好的一个网站”>
        <!-- 网站三秒钟后跳转到百度 -->
        <meta http-equiv=”refresh” content=”3 ; url=https://www.baidu.com”> 
        <title>网页的标题</title>
    </head>
    <body>网页的内容</body>
</html>

2. 元素显示模式

html中的标签元素分为以下三种显示模式（文档流），元素默认遵循的一种排列方式

元素显示模式	特点	代表元素
块级元素（block element）	独占一行，默认宽度为父容器宽度，高度由内容撑开，可以设置宽高	div、p、h系列、form
行内块元素 (inline-block element）	一行多个，可以设置宽高块级元素包裹行内块元素，默认会扩大块元素的高度，设置vertical-align属性可以解决 text-indent属性对行内块元素无效	img、input、button、select
行内元素 (inline element）	一行显示多个，宽高度由内容撑开，不可设置宽高	a、span

行内块元素存在间隙、基线对齐方式的问题

一般来说 p标签是文本级块元素，内部不嵌套块元素
a 标签无法嵌套 a 标签

3.基础标签

3.1 img标签

作用：img 标签是引入页面图片的标签，行内块元素

img标签属性

属性	作用
src	引入图片路径
alt	图片加载不出来时显示的文本
title	鼠标悬停时显示的文本
width	宽度
height	高度

注意：当宽高度只设置一个时，照片会等比例缩放
代码实例：

<img src="./img/map.jpg" alt="图片未加载时显示的文本" title="鼠标悬停时显示的文本" height="400px">

3.1.1 图片的格式（拓展）

img标签支持的图片格式
由于不同的浏览器版本支持问题，可能会存在

Jpeg(jpg):
支持颜色比较丰富，不支持透明，不支持动图
- 一般用于照片
Gif：
支持颜色比较少，支持简单透明，支持动图
- 一般用于简单颜色或动图
Png：
支持颜色比较丰富，支持透明，不支持动图
一般用于图标
Webp：
谷歌新推出的一种图片，汲取上述所有优点，文件比较小，兼容性不太好
Base64：
编码图片:将图片使用base64编码，讲图片转换成字符，不存在格式了，通过字符的形式来引入图片
一般都是一些需要和网页一起加载的图片才使用base64(渲染优先级高）

3.2 audio与video标签

audio标签为音频标签，可以向网页中插入音频，行内元素
video 标签为视频标签，可以向向网页中插入视频，行内元素

两个标签具有相同的属性，作用相同

属性名	作用
src	属性值为：视频/音频的文件路径
controls	无属性值，显示播放控件
loop	无属性值，循环播放
autoplay	无属性值，自动播放（一般在浏览器中无法实现，video标签在chrome中可以使用muted实现静音播放）

注意事项：
1. audio标签支持的音频格式有：MP3、Wav、Ogg
2. video支持视频格式MP4、WebM、Ogg
代码实例

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

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

3.2.1 音频/视频标签—浏览器兼容问题

浏览器找不到 audio / video 标签中的资源，浏览器会显示不正常

解决方案：

方式一： 引入source标签来引入资源， audio优先寻找第一个source内的文件，若第一个source中文件不存在，则寻找第二个source内的文件，若所有的 source内文件都找不到，则显示文字内容

方式二： 使用embed 标签，此标签几乎支持所有浏览器，上述属性都无法省略，会自动播放

方式三： 使用source标签和embed标签实现

代码实现：


<!-- 方式一-->
<audio loop controls autoplay>
	对不起，你的浏览器不支持播放器！请升级浏览器！
	 <!-- 除了用src来引用外部音频，还可以使用source标签来引用 -->
	<source src=”./music1.mp3”>
	<source src=”./music2.mp3”>
</audio>


<!-- 方式二-->
<embed src=”./1.mp3” type=”audio/mp3” width=”300” height=”100”>


<!-- 方式三 -->
<audio loop controls autoplay>
   <source src=”./music1.mp3”>
   <source src=”./music2.mp3”>
   <embed src=”./1.mp3” type=”audio/mp3” width=”300” height=”100”>
</audio>

3.3 a标签的使用

a 是超链接标签，通常是用来跳转到其他页面，也可以作为’书签‘使用，跳转到任意标签位置

a标签属性	属性值及含义	作用
href	跳转网站的路径
target	`_self`：覆盖原网页 `_blank` ：新网页打开	目标网页的打开方式

显示特点：
- 默认文字有下划线
- 未点击过，文字默认为蓝色
- 点击后，文字为紫色（清除浏览器记录后可回复）
代码实例

<!--一般用法-->
<a href="www.baidu.com" target="_blank">百度</a>

跳转用法：href= " #目标id " 可以跳转到目标标签在浏览器中的位置

3.4 表格标签

3.4.1 表格内使用的基本标签属性

table标签，表示表格主体部分

table标签的属性	属性值	作用	注意事项
border	数字，默认单位px	给表格及单元格加边框
cellspacing	数字，默认单位px	边框之间的距离	通常取值为0时用来合并边框
cellpadding	数字，默认单位px	单元格的内边距
align	left / center / right	表格在父元素中水平位置	该属性在单元格中作用不同

thead tbody tfoot标签，h5新增语义化标签，包裹 tr ，可以省略
caption标签，表示表格大标题，可以省略
tr标签，表示行 ,用于包裹 th / td
th / td标签，表示单元格，用于包裹内容

th /td 标签的属性	属性值	作用	注意事项
align	left / center / right	单元格中的文本的水平位置	该属性在table 中作用不同
rowspan	数字（数字为要合并单元格的个数）	跨行合并单元格	要注释掉已经合并的单元格
clospan	数字（数字为要合并单元格的个数）	跨列合并单元格	要注释掉已经合并的单元格

表格内标签的嵌套关系

    <table border="1" width=”300” height=”300”>
        <caption>表格标题</caption>
        <thead>
        <tr>
           <th>第一行第一个单元格</th>
           <th>第一行第二个单元格</th>
           <th>第一行第三个单元格</th>
         </tr>	
     </thead>
     <tbody>
        <tr>
           <td>第二行第一个单元格</td>
           <td>第二行第二个单元格</td>
           <td>第二行第三个单元格</td>
         </tr>	
        <tr>
           <td>第三行第一个单元格</td>
           <td>第三行第二个单元格</td>
           <td>第三行第三个单元格</td>
         </tr>
     </tbody>
     <tfoot>
        <tr>
           <td>第四行第一个单元格</td>
           <td>第四行第二个单元格</td>
           <td>第四行第三个单元格</td>
         </tr>
     </tfoot>	  
     </table>

3.4.2 单元格合并

跨行合并：rowspan = " n" n为要合并的单元格个数
跨列合并： colspan = " n" n为要合并的单元格个数

合并单元格的步骤：
1. 找到要合并的单元格（具体到 tr td）
2. 根据左上原则确定要保留的内容，和被删除的单元格
3. 在具体的td标签中写rowspan（跨行合并）、colspan(跨列合并)

注意：
1. 不能够跨结构标签（thead之类）合并
2. 合并单元格一定要注释掉被合并的单元格（td）
跨行合并与跨列实例

目标：
跨行合并：合并第二行第一个单元格与第三行第一个单元格，
跨列合并：第一行第一个单元格与第一行第二个单元格

    <table border="1" width=”300” height=”300”>
        <caption>表格标题</caption>
        <thead>
        <tr>
           <th>第一行第一个单元格</th>
           <th colspan="2" >第一行第二个单元格</th>
     <!--  <th>第一行第三个单元格</th> -->
         </tr>	
     </thead>
     <tbody>
        <tr>
           <td rowspan = "2">第二行第一个单元格</td>
           <td>第二行第二个单元格</td>
           <td>第二行第三个单元格</td>
         </tr>	
        <tr>
      <!-- <td>第三行第一个单元格</td> -->
           <td>第三行第二个单元格</td>
           <td>第三行第三个单元格</td>
         </tr>
     </tbody>
     <tfoot>
        <tr>
           <td>第四行第一个单元格</td>
           <td>第四行第二个单元格</td>
           <td>第四行第三个单元格</td>
         </tr>
     </tfoot>	  
     </table>

3.5 表单标签

3.5.1 input 标签与button标签

input标签为单标签行内块元素要嵌套在form标签中

input 属性（type取值）	作用	额外属性及注意事项
text	文本输入框	placeholder 为文本框提示文字
password	密文输入框	placeholder 为文本框提示文字
radio	单选框	name属性用于分组，相同name属性只能同时被选中一个 checked 属性是默认被选中
checkbox	复选框	属性checked属性是默认被选中
file	文件选择	属性multiple 是选择多个属性
submit	表单提交按钮	（需要在form表单中使用），value值是按钮名称
reset	表单重置按钮	（需要在form表单中使用），value值是按钮名称
button	普通按钮	（需要在form表单中使用），value值是按钮名称
search	查找输入框	删除按钮，本身具有自动内减（box-sizing:border-box)属性

button为双标签行内块元素
button与input中几个按钮作用一样，但是button是双标签，更方便包裹文字图片

button 属性（type取值）	作用	额外属性
submit	表单提交按钮
reset	表单重置按钮
button	普通按钮

代码实例

 <form>
        用户名：<input type="text" placeholder="请输入用户名" ><br>
        密码：<input type="password" placeholder="请输入密码"><br>
        性别：<input type="radio" name="sex">男  <input type="radio" name="sex" checked>女<br>
        爱好：<input type="checkbox"  >🏊‍  <input type="checkbox">🎾 <input type="checkbox" >🏀<br>
        文件选择：<input type="file" multiple value="选择"><br>
        提交：<input type="submit" value="提交1"><br>
        重置：<input type="reset" value="重置2"><br>
        普通按钮：<input type="button" value="普通按钮">
        <hr>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">普通按钮</button>
</form>

3.5.2 select、textarea、lable标签

select ：文本下拉标签

标签名	作用	属性
select	下拉菜单主题
option	下拉菜单的每一项	selected 默认被选中

代码实例：

 <!-- select下拉菜单 -->
 <select >
     <option > 下拉菜单1</option>
     <option selected> 下拉菜单2</option>
     <option > 下拉菜单3</option>
 </select>

textarea ：多行文本输入标签

代码实例：

 <!-- textarea 为文本域标签-->
<textarea  cols="30" rows="10"></textarea>

lable :用于绑定内容和表单但标签的关系（扩大点击范围，提高用户体验）

代码实例：
lable 标签两种使用方法

 
 <!-- 方式一 -->
 <input type="button" name="click">
 <label for="click">额外点击空间</label>
 <!-- 方式二 -->
 <label>
    <input type="button">额外点击空间
 </label>

3.6 列表标签

3.6.1 有序列表（ordered list）

显示特点：每一项前有数字，数字从1开始
ol 标签表示有序标签整体, li标签表示每一行（项）
ol 只允许嵌套li , li 可以嵌套任意标签

<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>李子</li>
</ol>

3.6.2 无序列表（unordered list）

显示特点：每一项前都有圆点
ul标签表示无序标签整体 li标签表示每一行（项）
ul标签只能嵌套li,li标签可以嵌套任意标签

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>李子</li>
</ul>

3.6.3 自定义列表

dl表示自定义标签所有 dt表示列表名称 dd表示列表的每一项
dl只允许嵌套dt/dd
dt/dd可以嵌套任意标签

<dl>
    <dt>标题一</dt>
       <dd>数据一</dd>
       <dd>数据二</dd>
    <dt>标题二</dt>
       <dd>数据三</dd>
       <dd>数据四</dd>
</dl>

4. 无语义化标签与语义化标签

4.1 无语义化标签

div 块级元素独占一行
span 行内元素一行多个

4.2 语义化标签

h5新增样式，不常用

<header></header> 网页头部
<nav></nav> 导航栏
<main></main> 网页主题
<aside></aside> 侧边栏
<section></section> 其他部分
<article></article> 文章
<footer></footer> 网站底部

5.综合问题

5.1 绝对路径与相对路径

绝对路径：通常从盘符开始，或者目标存在网络地址中
- 例如：盘符开头： D:\day01\images\1.jpg
- 完整网络地址：https://www/.itcast.cn/images/log.png

相对路径：从当前文件位置出发
- 一般使用./为文件当前目录下
- …/ 为上级目录下

5.2 常见转义字符

含义	代码
空格	&nbsp ;
小于号	&lt ;
小于或等于号	&lte;
大于号	&gt ;
大于或等于号	&gte;

青椒味半岛铁盒

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

1. html的基本骨架结构<! DOCTYPE html> <html> <head> <title>网页的标题</title>   <meta charset=”UTF-8”>
复制链接

扫一扫