博客周总结

常见的文本标签

标题标签h1-h6：从大到小的标题；

水平线标签（分割线）：</hr>;

段落标签<p></p>:在插入段落标签的时候，前后会给我们加入空行；

换行标签</br>:会在浏览器里面加入一个空行；

常见文本格式化标签

b标签strong标签

共同点:都是加粗的意思,对某段文本内容进行加粗标记

不同点:如果没有 语义上的一种强调 那么就去使用b标签(通用加粗标签:使用b 标签) 如果有语义上的一种强调 那么就使用strong；

i标签em标签

共同点:都是标记斜体标签；

不同点:如果没有语义强调就使用i标签(通用斜体标记) 如果有语义强调,使用em标签；

引用标签

短引用q:被引入的元素加入引号：

长引用<blockquote>:缩进处理；

列表标签

无序列表：ul和li；

ul标签默认的属性

type:给列表项前面的标记值(默认disc,实习圆点) 不写就是默认值

circle:空心圆点

square:实心的小正方形

有序列表：ol和li

自定义列表：

自定义列表以<dl >标签开始;

每个自定义列表项以<dt>开始;

每个自定义列表项的定义以<dd>开始

滚动标签：marquee

属性: 背景色bgcolor behavior:滚动的方式

默认值scroll :连续滚动 滑动一次到浏览器边框停止掉

slide alternate:来回滚动

direction:滚动的方式 :默认属性值 left(从右到左) right:(从左到右) up down

scrollamount 表示运动速度，值是正整数 ,默认值是6

scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒

块元素

div和span有什么区别?

div:块元素,占一行空间,多个div之间会自带换行效果 div应用场景 :结合css(给html标签进行修饰的),完成层级页面布局

span:行内标签 ,不会像div元素一样; 处在同一行上的 span应用场景:前端完成表单校验去做的;

举例: 用户在输入用户名之后,后面会有提示信息 使用span标签动态完成文本内容的设置

原样输出标签pre

html中常见的转义字符

  &nbsq：相当于一个空格；

&ensq:相当于两个空格；

&gt:>

&lt:<

网站底部会有些版权所有或者注册商品的符号 使用转义字符的

版权所有 &copy 转义成 ©

注册商标 &reg转义成 ®

上下标标签sup和sub

超链接标签

a标签来表示 通过使用 href 属性 - 创建指向另一个文档的链接

href="url" url 称为 "网络资源定位符号" 可以使用本地地址也可以是网络地址

target:打开资源地址的方式 ：

默认打开方式：_self（当前窗口直接打开新地址）

_blank :新建一个窗口打开

超链接的第二种用法:

通过使用 name 属性 - 创建文档内的书签 作为"锚链接来使用"

在同一个html下

1)打锚点---(创建一个锚点(标记/书签))

<a name="锚点名称"></a>

2)创建跳转链接(需要从某个位置跳转到上面的锚点位置)

<a href="#锚点名称">跳转到锚点</a>

在不同页面下进行锚点跳转

1)在另一个页面的某个位置 打锚点---(创建一个锚点(标记/书签))

<a name="锚点名称"></a>

2)当前页面创建跳转连接,跳转到另一个页面的那个锚点位置

<a href="文件地址#锚点名称">跳转到锚点</a>

常见的表单标签元素

表单标签中的元素

都需要必填name属性="值" ,服务器地址就能够知道了用户输入的信息是什么

输入类型元素input

属性:

type="text" 文本输入框

type="password" 密码输入框

type="radio" 单项按钮

type="checkbox" 复选框

type="date" 日期组件

type="file"文件上传组件

type="button"普通按钮，结合value去使用

type="submit"结合value属性=“登录注册”

type="reset"重置按钮

type="hidden"隐藏域

下拉标签select：子标签optiion

文本域：textarea

rows:指定书写行数

cols:一行有多个字符

CSS常用的选择器

1.标签名称选择器

{

样式属性名称1:值1;

样式属性名称2:值2; ....

}

2 class选择器(类选择器)

需要在 你的标签指定class属性="值"

.class属性值

{

样式属性名称1:值1;

样式属性名称2:值2; ....

}

同一个页面中的class属性值是可以同名的!

class(类)选择器 :同一类元素 优先级 > 标签名称选择器

3 id选择器 在标签中指定id="值",注意:id选择器的id的值,必须唯一的!

(id属性值唯一,能够解决浏览器中部分标签的兼容性问题)

但是我们现在没有学习js(javascript),所以id值重复,也可以展示被id选中的效果;

#id属性值

{

样式属性名称1：值1；

样式属性名称2:值2; ....

}

上面三个选择器是设置css的最基本选择器

id选择器 > class选择器 > 标签名称选择器 组合选择器

4 并集选择器

选择器1,选择器2,选择器3....{

选择器可以是上面id,class类,标签名称选择器

样式属性名称1:值1;

样式属性名称2:值2; ....

}

5 子元素选择器

选择器1 选择器2 { 选择器2选中的标签是选择器1的子标签

样式属性名称1:值1;

样式属性名称2:值2; .... }

6 后代选择器:

选择器1 > 选择器2 {

//选择器2选中的元素是选择器1的后代元素

样式属性名称1:值1;

样式属性名称2:值2; ....

}

CSS里面的特殊选择器

伪类选择器

伪类用于定义元素中的特殊状态

1)link状态:鼠标未访问状态

2)hover状态(使用居多):鼠标经过状态

3)avtive状态:鼠标获取焦点状态 (激活,点击了,但是没有松开),超链接就是这种

4)visited状态:鼠标访问过了状态(举例:超链接点了松开后,就访问了) css代码书写格式:

选择器:状态名称

{

样式属性名称1:值1;

样式属性名称2:值2; ...

}

CSS文本样式

文本修饰

text-decoration属性用于设置或删除文本装饰

underline:设置下划线

none:不设置任何修饰

overline:上划线

line-through:中划线

text-transform:文本转换

capitalize：将每个单词首字母大写

uppercase:将英文单词转换成大写

loweercase:将英文单词转换成小写

text-indent:文本缩进

letter-spacing:指定文本中字符之间得到的间距

文本阴影

最简单的用法是只指定水平阴影（2px）

垂直阴影（2px）