今天小编学习了一些前端的知识，由此进行了一些整理，如果有误，敬请斧正！
HTML
HTML（Hyper Text Markup Language）超文本标记语言，我们所知道的TXT格式的文件都是普通文本，只能写入字符和数字，而超文本就超在此类型的文件还能写入图片、链接、音乐、视频等其他文件！
现在市场上又很多的开发平台能编写HTML网页文件，如HBuilder X、WebStrom较为流行。如果网页测试无较大BUG，则可以放到服务器，对外发布。
基础语法
标签
HTML使用标志对的方法写入文件，通常使用<标志名>内容</标志名>的形式来表示开始和结束。
单标签
单标签，不设属性值
<br />、<hr />
单标签属性
单标签，设置属性值
<hr width="80" />
双标签
双标签，不设属性值
<title> </title>
双标签，设置属性值
<font size="7"> </font>
整体结构
通常一个HTML网页包含3个部分：网页区<HTML> </HTML>、标记头<HEAD></HEAD>、内容区<BODY></BODY>
<html>
<head></head>
<body></body>
</html>
<!-- 声明当前HTML的版本是HTML5 -->
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML⽂档的基本结构</title>
<script></script>
<link rel="stylesheet" type="text/css" href=""/>
<style></style>
</head>
<body>
<!--主体内容-->
</body>
</html><HTML> </HTML>用于标志文档开始和结束
<HEAD></HEAD>不会显示在网页内，在此可以使用Title、Script、meta、link等标签
meta：用来提供此文档的编码信息
link：用来引入CSS文件
script：用来引入JS文件或者写JS代码
title：网页的标题，必须包含
body
一般情况下，大部分浏览器显示的内容都放在了body中，如果使用框架则另外。
常用属性
DOCTYPE
Document Type HyperText Mark-up Language，文档中的超文本标记语言的类型，告知浏览器解析文档。
标题
h1-h6标签可定义标题，标题依次递减，慎重使用，最好少使用h1，通过使用层叠样式，可达美观的效果。
h999不产生错误，但不具有效果。
<h1> </h1>
水平线
hr 标签创建一条水平线，分割上下的内容，单标签。
<hr />
段落和换行
p标签定义段落
<p> </p>
br标签为换行，效果就是换行，单标签
<br />
列表
无序列表，由ul和li标签组成
<ul>
<li> </li>
<li> </li>
</ul>
有序列表，由ol和li标签组成
<ol>
<li> </li>
<li> </li>
</ol>
div和span
div 是一个块级元素，通常与CSS联用，用于布局。
<div> </div>
span 标签被用来组合文档内的行内元素，span 没有固定的格式表现，配合CSS，才能产生好的效果
<span> </span>
格式化标签
font
规定文本字体、尺寸、颜色
pre
预文本标签，内容是什么样，在网页中就是什么样
文本标签
b（粗体） i（斜体） u（下滑线） del（中划线） sub（下标文本） sup（上标文本）
a标签
a 标签定义超链接，从一张页面到另一张页面，最重要的是 href属性，指示要跳转的地址，若想要跳转当前页面，则href属性值为#
<a href="http://www.baidu.com">百度</a>
锚点实现
<div id="top"> </div> 、 <a id="top"> </a>
<a href="#top"> </a>
图片
img标签嵌入异常图片
<img src=" " alt=" ">
表格
table 标签定义表格域
tr 标签定义行
th 标签定义表头
td 标签定义单元格
td 的colspan和rowspan 可以让单元格进行跨行跨列。
表单
form 标签用于创建表单
表单包含 input 元素 textarea 元素，input元素的种类需很多要注意
表单用于向服务器传输数据
method :表单提交方式 get、post
get：默认，数据放在url上，数据容量有限，安全性差，有缓存
post：数据放在请求实体中，理论上无限制，安全，无缓存
input
根据type的属性值不同，输入的格式也会有很多形式。
若上传文件，请求方式为post，且表单要添加属性：enctype="multipart/form-data"
注意：
没有name属性无法提交到后台
radio单选按钮以name相同为一组
checkbox复选按钮以name相同为一组
textarea
此标签为多文本框，可以控制输入的行数和列数
<textarea> </textarea>
label
此标签为input元素定义标注，无任何特效，label标签的for属性应当与相关属性id相同，此时点击label自动聚焦
<label for="username"> 用户名: </label>
<input type="text" id="username" name="username" />
button
此为按钮标签
<button> </button>
select
此标签为下拉框标签
<select name="color" >
<option value="red">红⾊</option>
<option value="green">绿⾊</option>
<option value="blue">蓝⾊</option>
</select>
option属性
常用字符实体
标签的分类
块级元素：独占一行
行内元素：和其他行内元素共用一行
行内块状：和行内元素共用一行，但保留独特的内容
CSS
CSS（英文全称：Cascading Style Sheets）在我看来就是美化标签的语言，离开HTML则毫无用处
基本用法
格式
注意
CSS声明要以分号结束，声明以{ }括起来
建议一行书写一个格式
若值为多个单词用引号
CSS的使用
行内式
内嵌在标签当中，随写随用，但耦合度过高，不便管理
嵌入式
在html开头开辟一个CSS代码区，使用style 标签，内部绑定元素
外联式
实际多使用，让页面更加清晰，可达到重用效果
注意：当有多重样式时，记住前提规则，越精确越优先。
CSS选择器
通用选择器 *
元素选择器 元素名称
id 选择器 指定元素的id
类选择器 指定元素的类名
分组选择器 共用一个声明，用 ， 分隔
CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高
元素选择器：1
类选择器：10
id选择器：100
内联样式：1000
组合选择器
后代选择器
用于选择指定标签元素下的后辈元素，以空格分隔
子元素选择器
用于选择指定标签元素的所有第⼀代子元素，以大于号分隔
相邻兄弟选择器
可选择紧接在另一元素后的元素，且⼆者有相同父元素。以加号分隔。
普通兄弟选择器
选择紧接在另⼀个元素后的所有元素，而且⼆者有相同的父元素，以波浪线分隔
CSS常用属性设置
背景
background-color 设置元素的背景颜色
background-image 背景图片
background-repeat 背景图片是否重复
文本
color 文本颜色
text-align 文本对齐方式
text-decoration 文本修饰
text-indent 文本首行缩进
字体
font-family 文本字体
font-size 文本大小
font-style 文本字体风格
font-weight 字体粗细程度
文本对齐方式
值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界 上。然后，调整单词和字母间的间隔，是各行的长度恰好相等。对最后一行不生效。
display属性
浮动
float 属性有none、left、right
1.只有横向浮动，并没有纵向浮动。
2. 会将元素的display属性变更为block。
3. 浮动元素的后⼀个元素会围绕着浮动元素（典型运⽤是⽂字围绕图⽚）
4. 浮动元素的前⼀个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应⽤ float）
盒子模型
border、padding、margin三个属性构成了盒子模型。
border
设置所有的边框属性。
1）可同时设置边框的宽度、样式、颜色
table, th, td {
border: 1px solid black;
}
table {
width:100%;
height:50px;
}
2）使用border-width、border-style、border-color单独设置
table,td {
border-width: 1px;
border-style: dotted;
border-color: green;
}
border-style的属性
border-collapse
设置是否将表格边框折叠为单⼀边框
属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）
table {
border-collapse : collapse;
}
padding
设置元素所有内边距的宽度，或者设置各边上内边距的宽度。
如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性：
td {
padding:15px;
}
单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right
默认按照上右下左的顺序设定
注意：通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以用margin属性 设置元素外边距。
margin
设置⼀个元素所有外边距的宽度，或者设置各边上外边距的宽度。
p.margin {
margin: 2px 4px 3px 4px;
}
单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right
总结：前端知识无穷无尽，小编学习了冰山一角，请大家多多指教~~
如果不想在世界上虚度一生，那就要学习一辈子
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
