html笔记

最新推荐文章于 2024-09-14 15:26:51 发布

pg125810

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量95

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/pg125810/article/details/128850048

版权

img标签

img行内块标签，可以设置宽高，如果只设置宽或高一个，那另外的一个就是等比例缩放

src ，图像的URL

要在页面上显示图像，必须使用源属性声明图像的URL地址。格式如下：<img src="url" />URL指图像文件的位置，浏览器将图像显示在文档中图像标签出现的地方。

alt ，图像的替换文本

当浏览器不能显示图像时（如无法载入图像或浏览器禁止图像显示），将在显示图像的位置上显示替换文本属性定义的文本。为页面上的每一个图像加上替换文本属性有利于更好的显示信息。如：<img src="boat.jpg" alt="船">

title, 悬停指示文字 <img src="boat.jpg" alt="船" title="船">

绝对路径：本地地址（不要使用），网址。与文件的地址无关。

相对路径：与文件的地址相关。

图片引入路径：相对地址或者网址

图片的分类

JPEG：支持的颜色表较多，图片可以压缩，但是不支持透明=》保存照片等颜色丰富的图片
GIF：支持颜色较少，支持简单透明和动图=》图片颜色单一或动图
PNG：支持颜色多，支持复杂透明，但不支持动图=》用来显示颜色复杂的透明图片，多用于网页
webp：谷歌推出专门用来表示网页的一种格式，具备其他格式的所有优点，文件格式小，但是兼容性不好
base64：将图片使用base64编码，图片转换成字符，通过字符形式来引入=》需要和网页一起加载的图片才会使用base64

图片使用原则：效果不一致，使用效果好的，效果一致，使用内存小的

音视频标签：如何解决兼容性

视频 video

属性： src:设置视频的路径
           controls:显示控件
           loop：设置视频循环播放
           autoplay：设置视频自动播放

兼容性:
source:添加视频

<video controls>
			<source src="./video播放视频/video.webm" type="video/webm">
			<source src="./video播放视频/video.mp4" type="video/mp4">	
		</video>

音频 audio

属性：  src:设置视频的路径
               controls:显示控件
               loop：设置视频循环播放
               autoplay：设置视频自动播放

兼容性:

source:添加视频

<audio src="" controls></audio>
		<audio >
			<source src="" type="">
		</audio>

内联框架: 是使用什么标签

1.如何设置内联框架：iframe标签：不经常使用，不会被浏览器收录
属性：
frameborder：设置内联框架的边框
width：设置内联框架的宽度
height：设置内联框架的高度
name：设置内联框架的名称，可以和a链接联合使用

<iframe src="./01img.html" frameborder="0" width="400px" height="400px" name="frist"></iframe>

列表：列表的分类，使用场景

无序列表

无序列表是一个项目的列表，每个项目默认使用粗体圆点进行标记。无序列表用<ul>标签定义，每个列表项用<li>定义，列表项内容可以使用段落、换行符、图片、连接以及其他列表等等。

无序列表的列表项是没有顺序的。默认情况下，无序列表的列表项符号是●，不过可以通过type属性来改变。例如：圆圈:<ul type="circle">，正方形:<ul type="square">

语法：<ul>

</ul>

使用场景：导航栏

有序列表

有序列表也是项目，列表项目使用数字进行标记。有序列表用<ol>标签定义，每个列表项用<li>定义，列表项内容可以使用段落、换行符、图片、连接及其他列表等。

有序列表<ol>常用有二个可选属性，type用来规定列表里项目编号的类型，start规定起始的序号。例如： <ol type='A' start='1'>

有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。

语法：<ol>

</ol>

使用场景：需要排序

定义列表

定义列表由两部分组成：名词和描述。定义列表用得很少，但是在某些高级效果（如自定义表单）也会用到。

语法：<dl>

……

</dl>

<dt>定义列表项目

<dd>定义列表项目描述

使用场景：网页底部的区域的导航栏

表格

1.如何设置表格：table
td:单元格，行内块元素
caotion:表格标题，默认居中显示
th:表头，可以理解为特色的单元格，默认单元格居中，字体加粗

2.属性
border：设置单元格和表格边框，但是不推荐使用，在css中设置
cellspacing:设置单元格与单元格边框之间的距离不推荐使用
cellpadding:设置单元格内容与单元格边框之间的距离不推荐使用

3.css设置的属性
table,td,th{} 选择table,td,th
设置边框：1像素实现红色边框
border：1px solid red；
设置边框合并
border-collapse:collapse;
设置边框与边框之间的距离，与cellspacing效果一致
border-spcing:0px;
border-collapse和border-spcing一起使用border-spcing失效
设置单元格内容与边框之间的距离，与cellpadding效果一致
padding: 20px

4.单元格合并
1.行合并： colspan属性来设置
思路：合并结束后该行应该还剩几个单元格，在要合并的单元格中添加colspan="num",num是指该单元格水平方向要占有的单元格空间
2.列合并： rowspan属性来设置不影响所在行的单元格数量，影响的是垂直方向单元格的数量
思路：合并结束后该行下面行的单元格数量，在要合并的单元格中添加rowspan="num",num是指该单元格垂直方向要占有的单元格空间
注意：行合并是向右合并，列合并是向下合并