HTML+CSS随记

初识HTML+CSS

---

 原创不易，转载请注明出处：https://blog.csdn.net/qq_43112019/article/details/93200123

	标    签	描     述	特          点	示             例
1、	<em></em>		斜体 。
2、	<strong></strong>		强调，加粗。
3、	<q></q>	5.单文本引用，会自动加""。
4、	<blockquote></blockquote>	多文本应用。
5、	<br />	分行显示文本。	空标签，没有结束标签。
6、	<hr />	添加水平横线。	空标签，没有结束标签。
7、	<address></address>	为网页加入地址信息。	斜体。
8、	<code></code>	加入一行代码。
9、	<pre></pre>	预格式化的文本。标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都 可以使用它，只<pre>标签的一个常见应用就是用来展示计算机的源代码。	被包围在 pre 元素中的文本通常会保留空格和换行符。
10、	ul-li	信息列表。	没有前后顺序
11、	ol-li	信息列表。	有前后顺序
12、	<table summary="表格简介文本">	摘要：     作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。	摘要的内容是不会在浏览器中显示出来的。
13、	<caption></caption>	标题：用以描述表格内容。	标题的显示位置：表格上方。
14、	<a href="#" title="" target="_blank"></a>	title为鼠标点击链接时显示的文本，target为在新的浏览器窗口中打开。
15、	<a href="mailto:..." ></a>	<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送        电子邮件。我们还可以利用mailto做许多其它事情。	如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
16、	<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
17、	<input type="text/password" name="名称" value="文本" />		1、type：            当type="text"时，输入框为文本输入框;            当type="password"时, 输入框为密码输入框。    2、name：为文本框命名，以备后台程序ASP 、PHP使用。    3、value：为文本输入框设置默认值。(一般起到提示作用)
18、	<textarea  rows="行数" cols="列数">文本</textarea>	文本域。
19、	<select multiple="multiple"> <option value="" >选项</option> </select>	下拉列表：     value：向服务器提交的值。     选项 ：显示的值。     selected="selected"属性：默认选中。     multiple="multiple"属性：多选功能。	提示：     在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +    单击），可以选择多个选项。
20、	<label for="控件id名称">	form表单中的label标签：      label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在     label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器    就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。	注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
21、	CSS 样式	优先级：内联式 > 嵌入式 > 外部式	但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。     总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
22、	选择器	类和ID选择器的区别：	1、ID选择器只能在文档中使用一次。     2、可以使用类选择器词列表方法为一个元素同时设置多个样式。	.stress{ color:red; } .bigsize{ font-size:25px; } <span class="stress bigsize">三年级</span>
23、	子选择器	即大于符号(>),用于选择指定标签元素的第一代子元素。	//这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。	.food>li{border:1px solid red;}
24、	包含(后代)选择器	即加入空格,用于选择指定标签元素下的后辈元素。	请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。        而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。        总结：>作用于元素的第一代后代，空格作用于元素的所有后代。	.first  span{color:red;}
25、	通用选择器	通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素。	如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：	* {color:red;}
26、	伪类选择符	关于伪选择符：         到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，         但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，         但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。	它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：	a:hover{color:red;}
27、	分组选择符	当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）。	如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：	h1,span{color:red;} 它相当于下面两行代码： h1{color:red;} span{color:red;}
28、	特殊性	有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?         浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。	下面是权值的规则：         标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
29、	层叠	css样式优先级：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
30、	重要性	我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。	注意：!important要写在分号的前面。	p{color:red!important;} p{color:green;} 这时 p 段落中的文本会显示的red红色。
31、	文字排版--字体	为网页中的文字设置字体为宋体：body{font-family:"宋体";}   注意：第一种方法比第二种方法兼容性更好一些。         因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）。	注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。         （因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）         现在一般网页喜欢设置“微软雅黑”，如下代码：	body{font-family:"Microsoft Yahei";} 或 body{font-family:"微软雅黑";}
32、	删除线			.oldPrice{text-decoration:line-through;}
33、	段落排版--缩进	注意：2em的意思就是文字的2倍大小。		p{text-indent:2em;}
34、	段落排版--行间距（行高）			p{line-height:2em;}
35、	段落排版--中文字间距、字母间距	单词间距设置：         如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：	h1{ word-spacing:50px; } <h1>welcome to imooc!</h1>	h1{ letter-spacing:50px; } <h1>了不起的盖茨比</h1> 注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
36、	元素分类--块级元素	display:block   就是将元素显示为块级元素。	如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。	a{display:block;}
37、	元素分类--内联元素（行内元素）（inline）元素	display:inline	元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
38、	元素分类--内联块状元素（inline-block）	isplay:inline-block   就是同时具备内联元素、块状元素的特点。	1、和其他元素都在一行上；     2、元素的高度、宽度、行高以及顶和底边距都可设置。