html是什么？CSS常用标签等使用笔记

程序员文章站 2022-03-07 12:15:24

html是什么 html（Hypertext Markup Language）—— 结构超文本标记标签 <> 标签对单标签在标签中间&...

html是什么 html（Hypertext Markup Language）—— 结构超文本标记标签 <> 标签对单标签在标签中间—— 标签名语言

css

凡是写在标签名后面的都是标签的属性

可以自动刷新浏览器

属性名称 = “属性值”

border

<!--

border

边框的粗细（宽度）

边框的样式 solid dotted dashed

边框的颜色

英文单词 red

十六进制 #8c8c8c

rgb() red green blue

-->

border 区域会不会显示背景图(会显示)

<style>

.box{

width:300px;

height:200px;

border:10px d #0c0c0c;

background: url("img/14.jpg") repeat-y;

margin:40px 30px 20px 10px;

}

</style>

</head>

<body>

</body>

border-color 边框颜色

border-style 边框样式

border-width 边框宽度

border-top

border-top-color

border-top-style

border-top-width

border-bottom-style: dashed; dashed 虚线 dotted 点线

background 参数不受顺序影响

背景色 background-color

背景图 background-image

背景图平铺 background-repeat

1: repeat 平铺（默认值）；

2: no-repeat 不平铺

3: repeat-x 横向平铺

4： repeat-y 纵向平铺

背景图定位 background-position

背景图定位如果只给X轴的值(一个值) 那么Y轴会默认center

第一个值 x轴（num center left right）

第二个值 y轴（num center left right）

背景图是否滚动 background-attachment

fixed 固定

位置是以浏览器的可视区域来定位

不会随着页面的滚动而改变自身的位置

scroll 滚动

位置是以容器来定位

会随着页面的滚动而改变自身的位置

- 背景图背景色

background: #0b9380 url(img/email.png) no-repeat 0 0 fixed ; 颜色写在前面

font

文字复合样式

font: bold italic 50px '宋体';

font:

第一二个值（文字着重和文字样式）

第三个值 font-size( 文字大小 )

第四个值 font-family( 文字字体 )

font-weight

1: bold 加粗

2: normal (正常，不加粗) 默认值

3: 100 -700

4: border(比较级)

相对于父级更粗一点，并且只有两个状态，一个是正常（normal）一个是加粗 (bold)

文字大小 font-size

文字样式 font-style

italic(倾斜)

normal（正常）

font-family: ‘宋体’,’Arial’, “微软雅黑”,’microsoft yahei’;

文字颜色 color

文本对齐方式 text-align

: letf 左对齐

: right 右对齐

: center 居中对齐

首行缩进 text-indent

<style>

#box{

border:1px solid #0b9380;

width:400px;

font-size:44px;

text-indent: 2em;

}

</style>

<body>

邮件地址

</p>

<!--

px 像素

em 相对单位

text-indent

文字缩进

-->

</body>

text-decoration 文本修饰

<style>

text-decoration:underline;

<style>

<!--

text-decoration 文本修饰

underline 下划线

line-through 中划线

overline 上划线

-->

文字间距

letter-spacing字母间距

word-spacing 单词间距（是以空格为解析单位）

强制不换行 white-space

white-space:

nowrap 不换行

normal 正常

padding

padding 内边距内填充

占位宽 border padding width margin

<!--

padding:一个值

四个方向

padding:两个值

第一个值上下

第二个值左右

padding:三个值

第一个值上

第二个值左右

第三个值下

padding:四个值

上，右，下，左

-->

margin

1.两个相邻的同级别元素上下margin会叠压

解决方案： 1: 给这个2个元素加 float

2: 转换为行内块 display: inline-block

2.margin的上下传递(父子级元素)

解决方案：01：给父级加overflow:hidden 或者加边框 border 或者给子级加 position:absolute;

邮件

<a href="tel:01029837492">打电话</a> // 手机端可用

标签

锚点

<head>

<title>Title</title>

<style>

.box{

height:30px;

background: #0b9380;

color: #fff;

margin-bottom: 1000px;

}

</style>

</head>

<body>

</body>

a标签target 属性；

_blank 在新窗口中打开被链接文档。

_self 在被点击时的同一框架中打开被链接文档（默认）。

_parent 在父框架中打开被链接文档。

_top 在窗口主体中打开被链接文档。

a 伪类；

a:link{ color: yellow; }

link 未访问过

hover 鼠标悬停

active 鼠标按下

visited 访问过后

常用标签

<header>页眉，主要用于页面的头部的信息介绍，也可用于板块头部</header>

<nav>导航（包含链接的的一个列表）</nav>

<footer>页脚页面的底部或者版块底部</footer>

<section> 页面上的版块用于划分页面上的不同区域,或者划分文章里不同的节<section>

<article>用来在页面中表示一套结构完整且独立的内容部分</article>

<time>用来表现时间或日期</time>

<p>这个是p标签</p>

<ul>

</ul>

<ol>

</ol>

<dl>

</dl>

<mark>h1标签在一个页面上最好只出现一次并且，用在logo身上</mark>

选择器

群组选择器 .name，span，em

包含选择器 .name span em

通配符选中页面上所有的标签 *

id 选择器

class 选择器

选择器优先级 style > ID > class > 标签

css_reset 清除默认样式

有默认margin的元素

body,h1~h6,p,ul,ol,dl,dd

有默认padding的元素

ul,ol

ul,ol身上都有默认的list-style

在清除的时候，可以直接清除li身上的list-style

但是要记住，默认的list-style是在谁身上产生的

块元素

块元素的特征

1,默认独占一行

2,支持所有css样式

3,没有宽度的时候，默认撑满父级的宽

行内元素

内嵌(内联、行内)的特征

1、同排可以继续跟同类的标签(一行可以显示多个同类型的标签)

2、内容撑开宽度(所有的标签都是内容撑开高度)

3、不支持宽高

4、不支持上下的margin

5、代码换行被解析(解析成空格 —— 一个空格的大小)

行内块

内联块特性：

1、让块在一行显示；

2、让行内元素支持宽高；

3、没有宽度的时候内容撑开宽度

上一篇： MongoDB 在Node中的应用

下一篇： CSS-组合选择器

html是什么？CSS常用标签等使用笔记

html和css的一些常用标签使用