html md列表特效,2020-06-12-HTML_CSS.md

HTML_CSS.md

前端技术

前端即网站的前台部分，运行在PC端，移动端等浏览器或者APP上，展现给用户浏览的网页。

前端与后台是相对的

前端是展示给用户并且和用户进行交互的

客户端有app或者浏览器

后台又称为服务器端

进行数据处理，存储，业务逻辑等.

结构

HTML用于描述页面的结构

表现

CSS用于控制页面中元素的样式

行为

JavaScript用于响应用户操作

结构

表现

行为

HyperText Markup Language

超文本标记语言

Html通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)

:版本的声明,当前是html5版本html标签:网页的根标签,所有其它的标签都被html包含head头部标签:网页的配置信息:字符集(编码的设置)为搜索引擎提供的关键字列表：各关键词间用英文逗号","隔开Description用来告诉搜索引擎你的网站主要内容

主体标签: 所有的显示效果的标签和内容都被body包含

开始标签，结束标签

自闭和标签

标签由英文尖括号括起来，如就是一个标签

html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开 始标签多了一个/

标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：

内嵌套

，那么必须放在

的前面

HTML标签不区分大小写

和

是一样的，但建议小写，因为大部分程序员都以小写为准

标签的用途:我们学习网页制作时，常常会听到一个词，"语义化"。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途(在什么情况下使用此标签合理)比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

标题 h1~h6

标题一

标题二

标题三

标题四

标题五

标题六

段落 p

这是一个段落

强调/加强语气 strong 或 em

em:强调->默认是斜体strong：更强烈的强调->粗体强调强烈的强调

换行 br

分隔线 hr

---

联系地址 address

北京市,沙河区,北科

添加一行代码 code

一行代码

添加一段代码 pre多行代码

给文本增加样式的标签 span

文本

短引用文本 q

短引用文本

长引用 blockquote

无序列表 ul + li

无序列表1

无序列表2

无序列表3

无序列表4

有序列表 ol + li

有序列表1

有序列表2

有序列表3

有序列表4

布局标签 div

表格标签 table

table：表格标签tr:表格的行td:列的数据th:列头colspan:水平合并单元格border:边框像素thead:用来规定表格的各个部分(表头、主体、页脚)

ID	名字	年龄
1001	李雷	18

链接 a

点击

图片 img

表单标签 form :给后台提交数据用的

输入框 input

文本域 textarea

下拉列表 select + option

提交/重置按钮/lable标签

性别:男女

兴趣:篮球足球台球

邮箱

描述

地址北京上海天津南京

1.1 CSS全称为“层叠样式表”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等

1.2 CSS的代码语法

选择器｛属性：值;属性:值…..｝

内联式CSS样式:直接写在html标签中

嵌入式CSS样式:写在当前文件中

p{color:red;}

外部式CSS样式:写一个单独的文件中

什么是选择器?

每一条css样式声明(定义)由两部分组成

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

选择器的分类?

1、标签选择器p{}2、类选择器.claa{}3、ID选择器(全局唯一)#id{}4、子选择器>(表示第一代子元素)#id>p{}如果没有>直接是空格的话就是后代所有的元素#idp{}5、通用选择器*  *{}6、伪类选择器:hoverp:hover{}7、分组选择器h1,h2,ph1,h2,p{}

继承性

ppppp

权值

1、标签的权值为12、类选择符的权值为103、ID选择符的权值最高为100如果样式作用在一个标签上,根据权值来应用使用哪个样式(应用权值高的)

p{color:red;}.first{color:green;}三年级时，我还是一个胆小如鼠的小女孩。

层叠

当作用在同一个标签上的样式权值相同时,那么后面的样式会生效内联样式表(标签内部)>嵌入样式表(当前文件中)>外部样式表(外部文件中)

重要性 !important

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决

p{color:red!important;}p{color:green;}三年级时，我还是一个胆小如鼠的小女孩。

文字—字体:      font-family:"microsoft yahei";font-family:"微软雅黑";文字—字号颜色:        font-size:12px;color:#FF0000;文字—粗体:    font-weight: bold;文字—斜体:    font-style: italic;文字-下划线text-decoration: underline;文字-删除线text-decoration: line-through;段落-缩进text-indent:2em;段落-行间距(行高)line-height:1.5em;段落-中文字间距、字母间距1、letter-spacing:50px;中文或者是英文字母之间的间距2、word-spacing:50px;英文单词之间的间距段落-对齐text-align: center;为内联元素中的文本或者图片设置居中

块状元素

、

、

~、、

、、、、

内联元素

块状内联元素