我的原创地址：https://thorthegod.github.io/
-
消除列表原点： list-style：none||list-style-type：none
-
消除链接下划线：text-decoration：none（应用于 ）
-
对元素设置display：block使其变成块元素，如：
a{display:block;}可以把a相应的链接方式变成块状点击。 -
text-align是将文本中央对齐于块中
-
语义部分：
(1). **strong 是标明重点内容， 有语气加强的含义， 使用阅读设备阅读网络时会重读， 而是展示强调内容。strong 是标明重点内容， 有语气加强的含义， 使用阅读设备阅读网络时会重读， 而是展示强调内容。
i 内容展示为斜体， em 表示强调的文本；
(2).自然样式标签
b, i, u, s, pre
语义样式标签
strong, em, ins, del, code
(3).<span标签是没有语义的，它的作用就是为了设置单独的样式。把一段话圈起来，然后用css设置样式。
(4).语义化的作用
1更容易被搜索引擎收录。
2 更容易让屏幕阅读器读出网页内容。
(5).引用
这里用标签的真正关键点不是它的默认样式双引号而是它的语义：引用别人的话.
-
display 有哪些值？ 说明他们的作用
block 块类型。 默认宽度为父元素宽度， 可设置宽高， 换行显示。
none 缺省值。 象行内元素类型一样显示。 即隐藏不展示
inline 行内元素类型。 默认宽度为内容宽度， 不可设置宽高， 同行显示。
inline-block 默认宽度为内容宽度， 可以设置宽高， 同行显示。
list-item 象块类型元素一样显示， 并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承 display 属性的值。 -
margin 是用来隔开元素与元素的间距； padding 是用来隔开元素与内容的间隔。
margin 用于布局分开元素使元素与元素互不相干；
padding 用于元素与内容之间的间隔， 让内容（ 文字） 与（ 包裹） 元素之间有一段距离。 -
<br/换行
<hr/分割线（可用css修改线的样式） -
img语法：
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
举例：
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
讲解：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。 -
文本域textarea支持多行文本输入
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法：
<textarea rows="行数" cols="列数">文本</textarea>
1、标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。 -
单选框，复选框
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当type="radio"时，控件为单选框
当type="checkbox"时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序ASP、PHP使用
4、checked：当设置checked="checked"时，该选项被默认选中
注意：同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用 -
Label 的作用是什么？是怎么用的？
label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单上。例子：
<label for="Name">Number:</label>
<input type="text" name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label> -
placeholder属性可以提供输入字段预期值展示，在输入时消失。
适用于以下的类型：text，search，url，telephone，password和email。 -
<input type="reset" value=重置>为重置按钮，当点击后使输入框重置。注意：此按钮会重置所有输入框内容。 -
伪类选择符
伪类选择符允许给html不存在的标签设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
这行代码会使被标签包裹的文字内容中的“胆小如鼠”字体颜色在鼠标滑过时变为红色。 -
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /权值为1/
p span{color:green;} /权值为1+1=2/
.warning{color:white;} /权值为10/
p span.warning{color:purple;} /权值为1+1+10=12/
#footer .note p{color:yellow;} /权值为100+10+1=111/ -
重要性优先
我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
如下代码：
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意：!important要写在分号的前面。 -
删除线： p a{text-decoration:line-through;}
-
1，段落缩进
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
p{text-indent:2em;}
2，段落排版–行间距
行间距属性（line-height），如下代码实现设置段落行间距为1.5倍。
p{line-height:1.5em;}
3，段落排版–字间距、字母间距
文字间隔、字母间隔设置：
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing来实现，如下面代码：
h1{
letter-spacing:50px;
}
了不起的盖茨比
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
单词间距设置：
使用word-spacing来实现。如下代码：
h1{ word-spacing:50px;```<h1>welcome to imooc!</h1>``` -
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度height、宽度width、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素相反。
内联块级元素：
inline-block元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。 -
盒模型：
（1）边框border：盒子模型的边框就是围绕着内容及补白的线。拥有3个属性：粗细（border-width）、样式（-style<虚线dashed，点线dotted，实线solid>）和颜色（-color），分为border-top，-bottom，-left，-right四边。
（2）边界margin：元素与其它元素之间的距离可以使用margin来设置。边界也是可分为上、右、下、左（顺序）。
下代码：
div{margin:20px 10px 15px 30px;}
也可以分开写：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;}
如果上下左右的边界都为10px;可以这么写：
div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}
ps：padding和margin的区别，padding在边框里，margin在边框外。
（3）填充padding：元素内容与边框之间是可以设置距离的，称之为填充padding。填充也可分为上、右、下、左（顺序同margin）。
（4）内容content：根据具体内容可进行编辑，如分为文本text，图片img等。 -
布局
在网页中，元素有三种布局模型：
1、流动模型（Flow）
流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，在默认状态下，块状元素的宽度都为100%，会以行的形式占据位置。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
（块状上下，内联左右）
2、浮动模型 (Float)
任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
注意：设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。
3、层模型（Layer）
层模型有三种形式：
1、绝对定位(position: absolute)——相对于父位（参照定位的元素必须加入position:relative;）
这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
2、相对定位(position: relative)——相对于移动前的位置而不是父位
3、固定定位(position: fixed)——相对于网页窗口静止，即拖动滚动条时位置固定不变。（与background-attachment:fixed?属性功能相同） -
在有相同权值的情况下，优先顺序是内联式>嵌入式>外部式。
-
通用选择器 *{CSS内容}；作用于所有标签。
-
块状元素的居中需要将margin的left、right值设置为auto 。
-
文本特殊
(1)我的文字后有<sub>下标</sub>——添加文本的下标（1）我的文字后有<sub>下标</sub>——添加文本的下标
我的文字后有<sup>上标</sup>——添加文本的上标
(2)<i>字体倾斜</i>——istatic
(3)<abbr title="This is my senior high school teacher">Teacher</abbr>——缩写，详细信息通过鼠标停留显示
（1）
<a href="#tips">有用的提示</a>定义该文件中的文本书签tips
<a href="file:///Users/thor/Desktop/10.2(1).html#tips" target="_blank">有用的提示</a>定义指向其他文件中的地址的书签（target="_blank"——新网页打开）
（2）
<a name="tips">基本的注意事项-小提示</a>定义后文中tips的位置（name或者id等可以）
（3）若想用图片等作为链接点，只需要将对应代码填入<a href="想要前往的地址"></a>中。
- 制表格时
（1）
<th colspan="2">a</th>
可以构建两横格为一格的格子，内容为a；colspan换成rowspan可以构建两竖格为一格的格子。
（2）在table属性中加入cellspacing="xx"可改变单元格间距——单元格间的距离；加入cellpadding可改变单元格边距——单元格的内容与边框的距离。
（3）在table属性中加入background=“某图片地址”，可将图片插入表格中。
-
input相关
(1)在input语句（内有list="XX"为datalist定位)后加入(1)在input语句（内有list=“XX"为datalist定位)后加入
<datalist id="XX">
<option value="...">
<option value="...">
...
</datalist>
可以使该输入框变为单选，选项为value值。
ps：任何需要提交value值给后端的input都必须要加入name=”"属性，从而在后端储存。
(2)在input的button等语句中加入οnclick="alert(‘声明’)"可以在点击时产生声明动作。如
<input type="button" onclick="alert('Sorry,we are trying to resolve.')" value="Any false?"> -
插入js
<script type="text/javascript" rel="script" src="js地址"></script>，该语句一般放在body后html前，防止js内的语句执行时html资源尚未加载完。
插入css<link rel="stylesheet" type="text/css" href="cs地址"/>
4739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
