HTML_CSS.md
前端技术
前端即网站的前台部分，运行在PC端，移动端等浏览器或者APP上，展现给用户浏览的网页。
前端与后台是相对的
前端是展示给用户并且和用户进行交互的
客户端有app或者浏览器
后台又称为服务器端
进行数据处理，存储，业务逻辑等.
结构
HTML用于描述页面的结构
表现
CSS用于控制页面中元素的样式
行为
JavaScript用于响应用户操作
结构
表现
行为
HyperText Markup Language
超文本标记语言
Html通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）
<!DOCTYPE html><!DOCTYPE html>:版本的声明,当前是html5版本html标签:网页的根标签,所有其它的标签都被html包含head头部标签:网页的配置信息:字符集(编码的设置)为搜索引擎提供的关键字列表：各关键词间用英文逗号","隔开Description用来告诉搜索引擎你的网站主要内容
主体标签: 所有的显示效果的标签和内容都被body包含
开始标签，结束标签
自闭和标签
标签由英文尖括号<和>括起来，如就是一个标签
html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开 始标签多了一个/
标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：
内嵌套
，那么
必须放在的前面
HTML标签不区分大小写
和
是一样的，但建议小写，因为大部分程序员都以小写为准
标签的用途:我们学习网页制作时，常常会听到一个词，"语义化"。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。
标题 h1~h6
标题一
标题二
标题三
标题四
标题五
标题六
段落 p
这是一个段落
强调/加强语气 strong 或 em
em:强调->默认是斜体strong：更强烈的强调->粗体<em>强调</em><strong>强烈的强调</strong>
换行 br
<br/>
分隔线 hr
<hr/>
联系地址 address
北京市,沙河区,北科
添加一行代码 code
一行代码
添加一段代码 pre
多行代码
给文本增加样式的标签 span
文本
短引用文本 q
短引用文本
长引用 blockquote
无序列表 ul + li
有序列表 ol + li
布局标签 div
表格标签 table
table：表格标签 tr:表格的行 td:列的数据 th:列头 colspan:水平合并单元格 border:边框像素 thead:用来规定表格的各个部分（表头、主体、页脚）<table><tr><td>ID</td><td>名字</td><td>年龄</td></tr><tr><td>1001</td><td>李雷</td><td>18</td></tr></table>
链接 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;为内联元素中的文本或者图片设置居中
块状元素
、
、
~
、、
、、、、
、
内联元素
块状内联元素
