html+css-CSDN博客

本文链接：https://blog.csdn.net/rainbowyx/article/details/123003473

<!DOCTYPE html>：表明用的是html5

zh-CN

meta charset="UTF-8"使用万国码，全世界所有国家需要用到的字符

<strong></strong>或者<b></b>加粗

<em></em>或 <i></i>倾斜

<del> </del> <s> </s>删除线

<ins> </ins>或<u></u>下划线

行内元素：　　

与其他行内元素并排
不能设置宽高，默认的宽度就是文字的宽度
行内元素转块元素 display:block,将行转为块后，可设置宽度和高度
行内块元素：一行可以可以放多个行内元素，并且可以设置宽度和高度
将行元素转换为行内块元素display:inline-block

块级元素：

霸占一行，不能与其他任何元素并列。
能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%
块内元素转行元素 display:inline

块级元素和行内元素 - Qingqiu_Gu - 博客园

div独占一行大盒子

span一行可以放多个，小盒子

<img src="文件路径"/> 文件路径必须放在项目文件一起

<a href="链接目标" target="打开方式"> 文本或者图像 </a>
如果链接目标是外部网址则加http
如果链接目标是内部网址，则直接写路径，
如果为空链接，则写#
如果链接为一个压缩包，如果点击则会显示下载
可以给其他网页元素添加链接：如网页，音乐，文本，图像，表格，视频
锚点链接：以id的形式设置

ctrl+/:注释或者取消注释

&nbsp：空格

J将td改为th则会居中显示

对表格属性的设置：
cellpadding:单元格内容与单元格之间的间隙
cellspacing:单元格和单元格之间的间隙
thead:表格头部区域，tbody表格内容区域

跨行合并 rowspan="合并单元格的个数" 以要合并的第一行为目标
跨列合并 colspan="合并单元格的个数"，以要合并的第一列为目标合并后都应该删除被合并的行或者列

无序列表：<ul></ul>里面只能放<li></li>不能放其他标签，但是<li>标签里面可以放其他标签

有序列表：<ol></ol>里面只能放<li></li>不能放其他标签，但是<li>标签里面可以放其他标签

自定义列表：<dl><dt><dd></dd></dt></dl> dl里面只能包含dt/dd但dt/dd可以包含其他的

radio单选按钮只有设置一样的name值时，才能做到只选择单选按钮的一个按钮

lable标签的for属性需和相关元素的id属性相同，且把相关元素包含在label标签里面

select里面至少包含一对option,可以设置默认选定项：select=selected

textarea:文本域，

标签选择器：为所有该名称的标签设置同样的样式格式为标签名 {}

类选择器：格式为 .类名{} 然后使用时设置标签的class=该类名即可。但是不可以将标签名设置为类的名字。不要使用纯数字，英文来命名，长名字中间可以加横线
可以为一个标签设置多个类名，类名和类名之间用空白格隔开即可

id选择器：#id名，然后后面设置对应标签id=该id即可，只能调用一次。

id选择器+类选择器组合选择：p.test{}选择一标签为p且类名为test的内容

通配符选择器： *{}设置页面所有标签的样式，不需要调用，直接给页面所有元素设置样式。

设置了body里面统一文字大小，但是标题可以单独指定，可以不受body样式的控制

font-weight:设置文本的粗细，normal默认值不加粗，bold加粗，用数字表示时，400=normal 700=加粗注意数字后面不加单位

font-style：选择字体样式，粗体斜体等 italic:斜体 normal:正常

font-family:选择字体

font-size：字体大小,必须带上单位

font复合属性的写法：font:font-style font-weight font-size/line-size font-family顺序不能颠倒，不需要的属性可以省略，但是必须保留font-size和font-family

text-align设置元素内文本内容的水平对齐方式

1.text-decoration:给文字添加下划线，超级链接标签去除自带下划线，可以将text-decoration属性设置为none即可。
2.text-index:首行缩进距离，只缩进首行，一般设置单位为em，em为当前页面1个文字的大小，是个相对单位
3.line-height:行高，行高包含上间距，文字本身高度，还有下间距，上下间距是均匀分配的，可以用fastcapture的标尺工具来量行高
4.style标签可以放任何地方，但一般包含在head里面
5.样式表的引入方式：
（1）内部样式表：写在style里面
（2）行内样式表：如果样式仅针对与某个标签，比较少，直接给标签加style="",例如<p style="">
   (3)引入外部样式表：先建立好css文件，然后在前端界面引入css文件，引入方法为
<link rel="stylesheet" href="css文件路径">此代码一般写在</head>前面
6.emmet语法
（1）输入标签然后直接按tab键可以带出另外一个匹配的标签
（2）如果想要生成多个同样的标签，加*即可，如div*3再按tab键可以同时生成3个相同的div
   (3) 如果有父子级的标签，可以用>如输入ul>li这样可以同时输出<ul><li></li></ul>
   (4)如果有兄弟关系的标签，可以用+，比如div+p可以生成<div></div><p></p>
   (5)如果带有类名或者标签名的，可以写.demo或者#demo然后按tab键可以生成一个id=demo或者class=demo的标签：默认为div标签可以修改, .demo表示类名，#demo表示设置id,如.nav=   <div class="nav"></div>   p.nav=   <p class="nav"></p>    #two= <div id=“two”></div>
(6)如果生成的类名是自增的，可以用$ 比如。.nav$*5表示依次生成class=1=2=3=4=5的div
(7)如果想要在生成的标签里面显示内容，可以用{} 如div{ces}= <div>ces</div>
   div{$}*5= <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
(8)emmet语法写css样式
    可以简写，比如w200等于width:200px   h200=height:200px     可以直接输入首字母，然后自动补全，比如ti=text-indent
7.文件-首选项-设置里面输入format on save然后勾选，可以在按ctrl+s保存时自动格式化代码
8.后代选择器：
   元素1 元素2 {样式声明}：前提：元素2是元素1的后代，只要是后代即可，不管是儿子还是孙子
9.子元素选择器：
只能是最近一级的子元素：元素1>元素2{样式声明}，子元素2是子元素1最近1级的元素

10.并集选择器：
可以选择多个标签，并为他们定义为一样的样式   元素1，元素2{样式声明}

引入外部样式表：
1.新建一个css
2.在html文件引入css文件<link rel="stylesheet",href="文件路径">

加水平线：<hr>

将自动加粗的标题设置为不加粗 font-weight:400;

vscode里面安装auto rename tag插件可以自动同步修改前后标签名

块状元素里面可以嵌套块状元素，但是p.h1-h6比较例外里面不能嵌套块状元素，块状元素都是独占一行

行内元素设定宽度高度无效，都是根据内容自动调整。

position定位

1》设置为static时，该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

static是position的默认值。即没有定位，遵循正常的文档流对象

2》

snipaste小工具吸取颜色

按f1点击，然后按f3将截屏置放到屏幕桌面，然后按alt键选颜色，按shift切换颜色，然后按c然后ctrl+v可以将颜色代码直接复制出来。