html
标签是整个
html
文件的根标签
(
最顶层标签
)
head
标签中写页面的属性
.(元数据,meta,data)
body
标签中写的是页面上显示的内容
title
标签中写的是页面的标题
.
在vscod按(英文)!加 tab,即可生成基本页面,只需要编辑body的内容即可。这个叫做emment快捷键
<!-- <!DOCTYPE html>声明是html文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 有些只有单标签比如meta -->
<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>
hello html!
</body>
</html>
标题标签
: h1-h6
![](https://img-blog.csdnimg.cn/9a05c244856a4bfe8679736ed75d3872.png)
<!-- <!DOCTYPE html>声明是html文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 有些只有单标签比如meta -->
<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>
<p>css中的1px并不等于设备的1px</p>
<p>
p 标签之间存在一个空隙
当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
自动根据浏览器宽度来决定排版.
html 内容首尾处的换行, 空格均无效.
在 html 中文字之间输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行, 而是相当于一个空格.
换行标签: br
br 是 break 的缩写. 表示换行.
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css
中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的
移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,
苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着
同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五
花八门,安卓设备上的一个css像素相当于多少个屏幕物理像素,也因设备的不同而不同,没有一个定论。
</p>
<p>
还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中
1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。关于
这点,在文章后面的部分还会讲到。
</p>
<p>
在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的
定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 /
独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该
设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2,
也就是说1个css像素相当于2个物理像素。但是要注意的是,devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题,所以我们现在还并不能完全信赖这个东西,具体的情况可以看下这篇文章。
</p>
</body>
</html>
![](https://img-blog.csdnimg.cn/801c20cb45204c4baae753c0f5db82d5.png)
br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
<br/>
是规范写法
.
不建议写成
<br>
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
img标签,使用width和heigth,当只设置一个时,另外一个会等比例自动设置
在本级目录下
<!-- <!DOCTYPE html>声明是html文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 有些只有单标签比如meta -->
<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>
<img src="./头像.jpg">
</body>
</html>
如果在上一级路径,就需要
<!-- <!DOCTYPE html>声明是html文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 有些只有单标签比如meta -->
<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>
<img src="../Code/头像.jpg">
</body>
</html>
<a>
<!-- <!DOCTYPE html>声明是html文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 有些只有单标签比如meta -->
<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>
<a href="http://www.baidu.com">百度</a>
<!-- 打开一个空白页,不会关闭原来的页面 -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!-- 下载链接: href 对应的路径是一个文件. (可以使用 zip 文件) -->
<a href="test.zip">下载文件</a>
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
</a>
<!-- 空链接: 使用 # 在 href 中占位. -->
<a href="#">空链接</a>
<!-- 锚点链接: 可以快速定位到页面中的某个位置 -->
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p>
<p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
</p>
</body>
</html>
<table>表格标签
align
是表格相对于周围元素的对齐方式
.
align="center"
(
不是内部元素的对齐方式
)
border
表示边框
. 1
表示有边框
(
数字越大
,
边框越粗
), ""
表示没边框
.
cellpadding:
内容距离边框的距离
,
默认
1
像素
cellspacing:
单元格之间的距离
.
默认为
2
像素
width / height:
设置尺寸
.
跨行合并
:
rowspan="n"
跨列合并
:
colspan="n"
步骤
1.
先确定跨行还是跨列
2.
找好目标单元格
(
跨列合并
,
左侧是目标单元格
;
跨行合并
,
上方是目标单元格
)
3.
删除的多余的单元格
<table align="center" border="10" cellpadding="20" cellspacing="0" width="500"
height="500">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td colspan="2">男</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>11</td>
</tr>
</table>
![](https://img-blog.csdnimg.cn/1115447193e4404e97c4ba3b03df3229.png)
<!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>
<tr>
<th>name</th>
<th>phone</th>
</tr>
<tr>
<td>alice</td>
<td>110</td>
</tr>
<tr>
<td>Tom</td>
<td>911</td>
</tr>
<tr>
<td>Bob</td>
<td>120</td>
</tr>
</table>
</body>
</html>
加入 border="1px"
加入cellspacing=“0”
列表标签<ol> <ul>
<ul>
<li>yi</li>
<li>er</li>
<li>san</li>
</ul>
<ol>
<li>yi</li>
<li>er</li>
<li>san</li>
</ol>