当前位置：网站首页>知识点qwer

知识点qwer

2022-07-28 14:44:00 【springxing星】

<文档类型声明，浏览器按H5要求来渲染页面>

<!DOCTYPE html>

<html> /* 根标签开始 */

<head> /*头部标签开始，放网页配置和引入文件，比如title，meta，link */

<title>

页面标题 /*搜索所占权重很大，不能乱写*/

</title>

<meta charset = "utf-8"> /*设置字符编码，防止页面乱码*/

</head> /*头部标签结束*/

<body> /*主体开始*/

放各种标签，配置页面内容

</body> /*主体结束*/

</html> /*根标签结束*/

标签分类：

1.通过有无结束标签分为单标签和双标签，单表签有meta，img，input，br，hr,source

2.通过有无语义分为有语义和无语义标签，无语义的有div,span

3.通过标签显示方式分为块级标签，行内标签，行块标签

块级标签是独占整行，宽高生效，常用的有html，body，div，p,h1-h6,ul,li,table,tr,td,th,hr

行内标签是行内和行快可以在同一行显示，宽高不生效，根据内容多少显示宽高，常用的有span,img,a,em,i,strong,b,u

行快标签是行内和行快可以在同一行显示，宽高生效，没有的话按照内容多少显示宽高。常用的有img，input，td，th


插入图片：<img src="路径" alt=“图片破损的文字” width="宽" height=“高”>

超链接： <a href="地址" target="_blank"> (target不写默认就是在当前页面打开)

              图片和文字

             </a>

字体：font-size:1px(字体大小)

          font-weight：bold;( 字体宽度100-900)

          font-family：“微软雅黑”;

         font-style：斜体;

三种样式引入方式：1.行内少用  2.内部样式用style标签在head里面，用于写demo  3.外部样式在外面新建css，用link标签放在head里，用于写项目

文本颜色：color：white;/#fff;

文本水平对齐：text-align:center;/left/right;

文本垂直对齐:line-height:50px;

图片和文字对齐: vertical-align: middle;

首行缩进两字符：text-indent:2em;

文本下划线：text-decoration:underline;

文本和字母间距10px: letter-spacing：10px;

单词间距10px： word-spacing：10px;

表格：

合并边框：border-collapse: collapse;

设置边框：border:1px solid red;

table是表格，块级，双标签，用于展示数据

caption是表格标题，水平居中对齐，加粗

td是普通单元格，th是表头单元格，都是行块标签，colspan=“2”合并横着的 rowspan=“2”合并竖着的

多个选择器选到同一个标签，有相同的样式名，用哪个样式值取决于选择器的优先级（标签是1，类选择器是10）

修改显示方式：display：line（行内） display：block（块级） display：line-block（行块）

背景是否平铺：background-repeat：no-repeat/repeat-x/repeat-y

背景颜色:background-color:red;

插入背景图片:background-img:url(路径);

背景位置:background-position:1.center bottom;(中下) 也可以2.按百分比 2% 10% 或者3.具体值 100px 200px;

盒模型五样式：1.宽 2.高 3.边框（border） 4.内边距（padding）5.外边距（margin）

border：1px solid red;   

border-top/bottom/right/left

solid实线 dashed虚线 dotted点线 double双线

padding：10px 10px 10px 10px 规律是上左下右 transparent透明的

padding-top:

margin：10px 10px 10px 10px 规律是上左下右

margin-top:

原网站

版权声明
本文为[springxing星]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_60154877/article/details/124372387

边栏推荐

猜你喜欢

随机推荐