HTML+CSS的一些基础知识，总结为以下几个方面。
HTML：
一、概念
- html是一种超文本标记语言，超文本顾名思义就是不单只是文本而且包含图片、视频、音频、连接等非文字元素。注：标记语言不是编程语言。
- html文件后缀名为.html或者.htm，但是一般使用前者更多。
- HTML与HTML5的区别在于后者是HTML的下一代标准。
二、HTML文档
- HTML5的文档类型<!DOCTYPE html>
- <html></html>:HTML的根元素，用来包含HTML文档的所有元素
- <head></head>:包含在head里的内容怒会显示在网页上，这里边通常放的是一些编码信息，包括作者、页面描述信息还有js、css的编码方式。
- <body></body>:是html文档的内容区。
三、HTML语法
- 在html文档中不管有多少哥空格都只会解析为一个。
- 一些实体的表示：空格（ ）、<（<）、>(>)、"(")、'(&apos)、&（&）。
- 注释：<!--hello word-->，用于以后查看代码。
四、HTML元素和标签
一个元素通常由两个标签组合。HTML标签一般成对出现、大小写不敏感，但是H4推荐使用小写。如：开始标签 内容 结束标签。其中部分标签可以嵌套使用。
- 块级元素：可以独占一行空间，用来布局段落、列表等，但是不能被嵌套在行内元素里。
- 行内元素：和其他行内元素共享一行空间，一般只作为段落的一个部分。
- 空标签（单标签）：没有内容的元素，在开始标签中结束的，一般不建议使用开始标签<br>应使用结束标签</br>。单标签有</br>空行，</hr>横线，<img src=""/>图片元素等。
- 替换元素：将文件引入文档，并且用自身的位置来替换。如img，video，audio等。
- HTML属性：元素的属性一般在开始标签中，属性由键值对构成。如<div id="myDiv" class="myDivClass"></div> 其中核心属性有id表示唯一标识、class表示当前元素是某一类的元素、style表示规定元素的行内样式、title表示描述元素的信息（光标悬浮时会显示）。
五、常用标签
- div：无意义的块级元素；p：段落，块级元素，浏览器会自动在p标签前后加上空行，一般与br结合使用；h1-h6：一级标题-六级标题，浏览器会自动在标签前后添加空行，一般与hr结合使用。
- 文本格式化-CSS：strong、b、em、i、u、sub、sup等。
- 列表：有序列表（ol>li）：序号默认从1开始，可通过start属性改变起始值<ol start="3">表示从3开始；reversed（单值属性）规定列表顺序为降序；type="1"默认1 还有A a I i四种值。 无序列表（ul>li）：标题是圆形符号没有顺序。自定义列表dl>dt、dd。
- 超链接a：<a href="https://baidu.com" target="_blank">百度一下</a>绑定目标与元素的id值实验锚点的跳转，其中href表示跳转的目的地、target="_blank"表示在新标签中打开。
- 图片：<img src="" alt="">其中src表示图片的地址（必填）、alt表示图片出现错误时会显示alt的内容、width表示图片宽度、height表示图片高度。
- 视频：<video src="./video/video.mp4" controls autoplay muted loop></video>其中controls表示是否显示控制条，loop表示是否循环播放，muted表示是否静音播放，atuoplay表示是否自动播放。audio音频与video基本相同。
六、语义化标签
语义化标签除了语义之外与div完全相同，只不过对于搜索引擎比较友好，且可读性较高方便其他设备解析，比如盲人阅读器根据语义来解析这个页面。
- header：具有引导和导航作用的一个元素，通常来放置标题（导航）logo 搜索栏
- nav： 可以用作页面导航的链接组，其中导航元素链接到其它页面，或者当前页面的其它部分
- article：代表文档，页面中 独立 完整的 可被外部引用的内容，也可以嵌套使用
- aside：用来表示当前页面或文章的附属信息部分，他可以包含侧边栏，广告，导航条，以及其它有别于主要内容的部分
- footer：通常包含作者信息，相关链接，版权信息等
- address：用来呈现文档的联系信息，作者的联系信息，地址，邮箱，电话等
- section：类似div 作为html的独立功能
- <details>
<summary>联系我：</summary>
<p>邮箱：rendc@qq.com</p>
<p>电话：12345677654</p>
<p>地址：xxxxxxx</p>
</details> - <figure>
<img src="../../Axure/day/er-code.png" alt="图片丢失了">
<img src="../../Axure/day/er-code.png" alt="图片丢失了">
<figcaption>扫码了解产品详情</figcaption>
</figure>
七、常用元素
1.表格table：其中caption作为table的子元素表示表格的标题信息；colgroup列分组，定义一个表中的一组列，作为table的子元素同时放在caption的后面，其他元素的前面，col经常作为colgroup的子元素，又span属性，规定几列为同一列。
属性：align： left左 center居中 right右
border： 整数 px
cellpadding：内容与单元格之间的距离
cellspacing：单元格与单元格之间的距离
width：设定表格宽度
bgcolor：设定表格背景色
colspan 跨列合并
rowspan 跨行合并
2.表单form：主要用于用户与web服务器进行交互。
属性：action: URL 用来处理表单信息的服务器地址
method: 浏览器用来提交表单的http方式，常用的get/post
get ： 通过这种方式提交的表单数据会被附加在链接上，通过"?"分割 发送敏感内容不建议使用这种方式
post： 表单数据会存放在请求体，传递给服务器，
name: 设置表单的名称
target: _blank _self
当method为post时，表单内容提交给服务器时的内容类型 enctype
默认：application/x-www-form-urlencoded
当表单中有文件内容时
multipart/form-data
表单元素：input：用于接受来自用户的数据
name： 用于设定控件名和提交数据的属性名
value： 用于控件初始化 默认值等功能 （可选）
checked： 单选框&复选框 默认选中属性
disabled：禁用组件 禁用后组件的值也不可提交
hidden： 隐藏组件 隐藏后的组件值会被提交
size： 控件的初始宽度，单位是px，但是text和password除外，他俩是指字符的数目
maxlength：可以输入字符数量的最大值
min： 可输入最小值
max： 可输入最大值
select ：用于表示列表 或者下拉列表
multiple 指定控件类型（列表或者下拉列表）
size 如果multiple生效，size表示同时展示的行数
optgroup 包含option后形成选项组
label 指选项组的名称
option 用于表示选项 包含在select或optgroup中
selected 默认被选中的项
textarea：没有value属性
rows 文本框的初始行数
cols 文本框的初始列数
disabled 禁用
readonly 只读，但是值可以提交
fieldset 在一个表单中对多个控件或标签进行分组
属性 disabled 直接禁用整个分组中的控件
<legend> 是分组的标题
progress：进度条
max 默认值 1
value 0-1之间 小数
output：表示用户动作产生的结果
<form οninput="result.value=num.value*num.value">
<input type="number" name="num">的平方=
<output name="result"></output>
</form>
meter：进度条不同状态的不同表现形式
<meter max="100" low="60" high="90" value="40"></meter>40 绿色
<meter max="100" low="60" high="90" value="65"></meter>65 黄色
<meter max="100" low="60" high="90" value="95"></meter>95 红色
datalist：表示其它控件可用的值
与select做对比：
1. select选中后显示的是文本内容 datalist显示value
2. 提交的时候都是提交value
3. 在firefox上只显示内容，在chrome上显示内容和value
3.H5中对input的扩展
autofocus
placeholder="请输入用户名"
required
pattern="1\d{10}"
maxlength="11"
其它的参考8-H5input.html
time：时间
HTML的一些基本内容大概就是这些，下面来说一下CSS。
CSS：
一、概念
- css叫层叠样式表，是用来修饰文档的语言，让文档以更优雅的形式呈现给用户。
- 1996年12月第一份正式标准完成CSS；1998年5月CSS规范第二版出版；1999年开始修订2001年完成了CSS3工作草案。
- CSS工作原理：HTML文件 - 解析HTML文件 - 转成DOM - 展示给用户；在HTML文件时加载CSS - 解析CSS文件将样式加到HTML文件里一起展示给用户。
- CSS声明：CSS核心功能：给特定的属性设置特定的值
CSS的属性和值 大小写敏感（和html标签区分）
属性名和属性值 通过':'分割 - CSS声明块：将多个CSS声明写在一起，声明和申明之间用'；'分割，使用'{ }'将多个声明括起来形成一个声明块
{ background-color: black; border:1px solid black; } - CSS选择器：CSS声明块前添加选择器，用来指定将这个声明块用在哪些元素上
div { background-color: black; border:1px solid black; } - CSS可读性：可以加换行添加注释，让代码更美观可读性更高<!-- HTML注释 -->，
/* CSS注释 */
二、内容
- CSS的应用：（1）外部样式表：新建 .css 后缀的文件，然后在html内head通过link引<link rel="stylesheet" href="./style.css">，或者在style 标签内通过@import "xxx.css" 引入
<style> @import "style.css"; </style>（2）内部样式表： 将CSS写到HTML的style标签中，可以在不修改CSS文件的前提下修改样式，比较方便，但是不建议这样使用
<style> p { color: tomato; } </style>（3）行内样式表：将CSS写到元素的style属性中 只能作用于一个元素 但是不建议这样使<pstyle="color:chartreuse;">hello,world</p>
- CSS选择器：（1）标签选择器：标签选择器又叫元素选择器，使用元素名可以直接选中相同的元素；（2）类名选择器：类选择器以.开头，后面紧跟类名 不允许有空格 与元素的class属性值保持一致 一个元素可以有多个class值 每个值之间通过空格分开；（3）ID选择器：d选择器以#开头，后面紧跟id名 不允许有空格 与元素的id属性值保持一致，在一个文档中 id值不能重复 所以这个一般选择唯一元素（4）普遍选择器：使用*来表示普遍选择器 表示选择所有元素 通常用在组合选择器中
* { background-color: honeydew; } #app>*{ background-color: honeydew; }（5）层次选择器：1）后代选择器：" "，#app p 包括子元素，也包括孙子元素，子子孙孙无穷～；2）子代选择器：''>"，#app>p表示的是直接子元素；3）相邻同胞选择器 下一个兄弟元素："+"， .myP+* 选的是class为myP的元素的下一个兄弟元素；4）一般同胞选择器："~"， .myP~* 选的是class为myP的元素的后面的所有兄弟元素；5）多选择器：多个选择器组合使用，用","分割，多组合选择器
div,p,li,.myDiv,#app { }6）嵌套选择器：Div.myDiv{}
-
属性选择器：（1）属性选择器
[title] { color: khaki; }（2）属性包含title，属性值为val
[title=val] { color: khaki; }（3）属性包含title，属性值以val开头
[title^=val] { color: khaki; }（4）属性包含title，属性值以val结尾
[title$=val] { color: khaki; }（5）属性包含title，属性值包含val（模糊匹配 只要有这个字符串就行）
[title*=val] { color: greenyellow; }（6）属性包含title，属性值中有val（必须是目标字符串）
[title~=val] { color: greenyellow; } -
伪类选择器：（1）子代元素相关
（2） 元素状态相关的
以:开头，用于其它选择器之后，指明元素在某种状态下才能被选中
:only-child 独生子元素
:first-child 第一个孩子元素
:last-child 最后一个孩子元素 */
:nth-child(n) 第n个孩子元素 n从1开始
:nth-last-child(n) 倒数第n个孩子元素 n从1开始
:first-of-type 选中app类子代的每种类型的第1个孩子元素
:last-of-type 选中app类子代的每种类型的最后1个孩子元素
:nth-of-type(n) 选中app类子代的每种类型的第n个孩子元素 n从1开始
:nth-last-of-type(n) 选中app类子代的每种类型的倒数第n个孩子元素
:hover
:link a标签未被访问过的状态
:visited a标签已被访问过的状态
:active 活动时的状态
:focus 聚焦时的状态
:checked 按钮被选中时的状态
:default 默认选中时的状态
:enabled 表单项可用时的状态
:disabled 表单项禁用时的状态
:valid 通过表单验证
:invalid 通过表单验证和不通过
:required
:optional 必填项和选填项
:in-range
:out-of-range 在范围内、不在范围内 - 伪元素选择器："::" 开头 用在其它选择器之后
::after 选中之后的不存在的节点，然后结合content添加内容
::before 选中之前的不存在的节点，然后结合content添加内容
::first-letter 选中第一个文本字符
::first-line 选中第一行
::selection - CSS优先级： 行内样式表>内部样式表>外部样式表 （就近原则）
特性值（只是相对概念）
style 行内样式表 1000
id选择器 100
类选择器、属性选择器、伪类选择器 10
元素选择器和为伪元素选择器 1 -
样式继承： 有些规则会被子元素默认继承，有些不会。会被继承的：font 文本 列表 cursor等；不会被继承：margin padding border等。 三个特殊的值来改变继承关系：将可继承的属性改为不继承，color: initial; 将不继承的属性改为继承 ，border: inherit; 跟随默认情况 ，color: unset。
-
CSS中的一些单位值：（1）颜色：1）rgb（） 三个参数rgb(0-255，0-255，0-255) 红 绿 蓝；2）rgba（）三个参数rgb(0-255，0-255，0-255，0-1) 红 绿 蓝 代表透明度 0完全透明 1完全不透明；3）十六进制，六个十六进制的数 两个代表一个通道 红 绿 蓝 0-F，#aaaaaa；4）HSL，第一个参数 色调 0-360 0 红色 120 绿色 240 蓝色、第二个参数 饱和度 0-100% 0 灰色 100% 全彩、第三个参数 亮度 0-100% 0 黑色（暗） 100%白色
background-color: hsl(120, 100%, 50%);5）HSLA，透明度 0完全透明 1完全不透明，如background-color: hsla(120, 100%, 50%, 0.5);（2）长度宽度大小：1）百分比，占父元素的百分比；2）绝对值，px像素 mm cm in（英寸）3）相对值单位，em和当前字体大小相同、rem总是默认字体大小。
-
文本样式：color字体颜色，font-color字体大小，font-family字体，font-style字体样式，font-weight字体粗细（b100-900、normal默认400、bold=700、lighter比父元素字体更细、bolder比父元素字体更粗），text-align字体位置（left、center、right），text-transform文本变形（none正常、uppercase大写、lowcase小写、capitalize、full-width转换为类似于等宽的字体），text-shadow字体阴影等。
CSS的内容我总结的大概就这些，当然会有一些省略部分或者不够全面，希望读者自己去发现使用。
660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
