html5和css（一 基础）
---恢复内容开始---
什么是前端
既网站的前台部分，运行在cp端和移动端等浏览器上展现的浏览器网页。分为前端设计，即网站视觉。前段开发，即网站前台代码实现。
技术栈
html 标记语言，负责页面构成等
css 样式语言，负责风格设计等
javascript 浏览器的脚本语言，是一种编程语言，负责编写页面特效、调用浏览器的API(BOM)、操作改变页面内容(DOM)，从后端获取数据(Ajax),渲染页面等
HTML基础语法
html 标签
- 标签是HTML中最基本单位,也是最重要组成部分
- 通常要用两个角括号括起来:
<和> - 标签都是闭合的（两种形式：成对与不成对）
- 双标签（成对）:
<标签名>内容</标签名>如：<table></table>即分起始和结束 - 单标签（不成对）:
<标签名 />; 如：<br/>、<hr/> - 标签是大小写无关的,
<body>;跟<BODY>表示意思是一样的，标准推荐使用小写，这样符合XHTML标准。 - 对于HTML标签来讲，最重要的是语法
语法规范
标签的嵌套用缩进tab键
标签名不区分大小写，建议小写
属性名不区分大小写，建议小写
注释 <!-- 单行注释 -->
<!--
多行注释
-->
常用实体
<br> 换行， 一个<br>换一行，可以多个换多行
<hr>表示一根线，段落分割，表示和之前的内容没关系
&表示和号&
©表示备案号版权号
&pen;人民币符号
>;表示大于号>
<表示小于号<
表示空格键
html 所有空格 最后只显示一个空格，
HTML主体结构标签
<html></html>此元素可告知浏览器其自身是一个 HTML 文档。<head></head>用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。<body></doby>定义文档的主体
HEAD头部标签
<title></title>定义文档标题<base />标签为页面上的所有链接规定默认地址或默认目标<meta />元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta>标签永远位于 head 元素内部。<meta charset="utf-8">-
<style></style>签用于为 HTML 文档定义样式信息。 -
网页关键字： <meta name="keywords" content="8-12个以英文逗号隔开的单词/词语 关键字"> 网页描述信息 <meta name="description" content="80字以内的一段话，与网站内容相关 描述信息">
格式排版标签
<br/>换行标签，完成文字的紧凑显示。可以使用连续多个<br/>标签来换行<hr/>水平分割线标签，用于段落与段落之间的分割<p></p>段落标签,里面可以加入文字,列表,表格等，可以<p></p>或<p />使用<pre></pre>按原文显示标签，可以把原文件中的空格,回车,换行,tab键表现出来<hn></hn>标题字标签，n为1-6，定义六级标题，而且会自动换行插入一个空行<div></div>没有任何语义的标签
文本标签
<em></em>表示强调，通常为斜体字<strong></strong>表示强调(语气更强)，通常为粗体字<del></del>标签定义文档中已删除的文本也，表示原价。<ins></ins>标签定义已经被插入文档中的文本，表示现价。H<sub>2</sub>0文字下标字体标签h2o<sup></sup>文字上标字体标签<mark></mark>H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面<ruby><rt></rt>H5新增 标签定义字符（中文注音或字符）的解释或发音</ruby>H5新增 标签定义 ruby 注释（中文注音或字符） 在东亚使用，显示的是东亚字符的发音。
CSS基础语法
-
写在标签内的style属性中
<p style="color:red;"</p>写在<style> 元素中
<style> p { color:red } </style> -
外部导入
<link rel="stylesheet" type="text/css" href="./style.css">
CSS格式组成
- 选择器 负责圈定范围，要修改的元素集合 声明 由属性名和属性值组成，中间用冒号连接(属性名:属性值)，用于设定具体样式
- CSS由选择器和一或多个声明组成，多个声明之间用分号
选择器{ 属性名:属性值; 属性名:属性值; }
浏览器默认16像素
CSS注释
/*注释内容*/
CSS基本长度单位
- em 倍数 默认字体大小的倍数
- px：pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便；%
- 百分比
- pt：point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用；
- cm 厘米
- mm 毫米
CSS基本颜色单位
-
colorName 颜色名方式 red,green,blue...
RGB十进制数字表示颜色
数字（1-255） rgb(255,0,0) 百分比(1-100) rgb(100%,0,0) -
常用 background-color:rgb(0~255,0~255,0~255) -
background-color:rgb(%,%,%)
CSS选择器(基础)
-
HTML元素选择器
div { } -
ID选择器
#idName { } -
CLASS选择器
.className { } -
全局选择器
* { } -
组合: 后代元素
选择器 选择器 { } .nav li {} #box div {} div .list {} .container li {} -
组合：子元素
选择器>选择器 { } .nav>li {} #box>div {} div>.list {} .container>li {} -
组合：群组选择器
选择器,选择器，选择器 { } body,ul,li,p,figure,table,.item,.list-item { } -
组合：多选择器
div.item { } .item.list-item { } div#container { -
}
选择器优先级
优先级相同 前面会被后面的覆盖
id>class>tagname>*
组合选择器数个数
字体属性
-
font
font:字体风格[字体加粗]<字体大小>[/行高]<字体族科> -
font-family 默认微软雅黑，逗号后再加字体，都好前没有就会用逗号后面的
-
font-family:"Arial","Helvetica",sans-serif; -
font-size 字体大小
-
font-style 字体风格 normal | italic | 认为的变斜oblique (斜体)
-
font-weight 字体加粗 normal | bold | lighter
-
font-variant 字体变形 normal | small-caps
文字颜色
- color 设置文字颜色
文本属性
letter-spacing 字母间隔 值为长度，可以是负值
word-spacing 词的间距(通过空格识别)
text-decoration 文字修饰
underline 下划线
overline 上划线
line-through删除线
none(默认)
text-align 横向排列 left | right | center居中
vertical-align 垂直对其方式
middle： 将支持valign特性的对象的内容与对象中部对齐 把文职和图片一起用时，中间对齐。
baseline： 将支持valign特性的对象的内容与基线对齐
text-indent 文本缩进 2em(2个字) 50px
line-height 设置行间距离 不允许使用负值
word-break 规定自动换行的处理方法
word-wrap 允许长单词或URL地址换行到下一行
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。
overflow-wrap CSS3中把word-wrap 改名为 overflow-wrap
white-space
pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
