您的位置：首页 > Web前端 > CSS

HTML&CSS——琐碎的知识点(1)

2016-05-05 17:40 691 查看
1.head部分的标签
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
2.[code]<title>
标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。[/code]
3.代码注释 <!--注释文字 -->
4.注意一段文字一个[code]<p>
标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个
<p>
标签中。[/code]
<p>
标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。[/code]
5.现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。       但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。6.span:(1). [code]<em>
和
<strong>
标签是为了强调一段话中的关键字时使用，它们的语义是强调。(2). 
<span>
标签是没有语义的，它的作用就是为了设置单独的样式用的。7.注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。8. <blockquote>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。      等等，上一节<q>标签不是也是对文本的引用吗？不要忘记
<q>
标签是对简短文本的引用，比如说引用一句话就用到
<q>
标签。浏览器对<blockquote>标签的解析是缩进样式。9. br : 怎么可以让每一句诗词后面加入一个折行呢？那就可以用到
<br />
标签了，在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。与以前我们学过的标签不一样，
<br />
标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有
<br />
、
<hr />
和
<img />
。10.要想输入空格，必须写入
 
11.在信息展示时，有时会需要加一些用于分隔的横线
(1). 
<hr />
标签和
<br />
标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。(2). 
<hr />
标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。(3). 大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。12.address 一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。13.在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了14.加入大段代码时：
<pre>语言代码段</pre>
<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。15.<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。tbody在table下面<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。<td>…</td>：表格的一个单元格，一行中包含几对
<td>...</td>
，说明一行中就有几列。<th>…</th>：表格的头部的一个单元格，表格表头。16.摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。    语法：
<table summary="表格简介文本">
标题用以描述表格内容，标题的显示位置：表格上方。     语法：<table><caption>标题文本</caption><tr><td>…</td><td>…</td>…</tr>…</table>[/code]
17.<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。
<a>
标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。如下代码：
<a href="目标网址" target="_blank">click here!</a>
[/code]
18.
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“[code]?
”开头，后面的参数每一个都以“
&
”分隔。[/code]
19.当用户需要在表单中输入大段文字时，需要用到文本输入域。语法：[code]<textarea
  
rows="
行数"
 
cols="
列数"
>
文本</textarea>
注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。
20.单选框和复选框
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>[/code]
注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
21.下拉列表框
<select><option value="看书">看书</option><option value="旅游" selected="selected">旅游</option><option value="运动">运动</option><option value="购物">购物</option></select>
selected="selected"：设置selected="selected"属性，则该选项就被默认选中。下拉列表也可以进行多选操作，在<select>标签中设置
multiple="multiple"
属性，就可以实现多选功能22.提交按钮 <input   type="submit"   value="提交">[/code]
23.label
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。语法：<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
24.font-weight 属性设置文本的粗细。
25.子选择器 还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：.food>li{border:1px solid red;}
26.包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：.first  span{color:red;}
这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。总结：>作用于元素的第一代后代，空格作用于元素的所有后代。27.通用选择器 通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
28.伪类选择器
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red;}
关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
29.分组选择器
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：h1,span{color:red;}     p.first,span{color:green;}
30.选择器的权值  标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
31.p{text-indent:2em;}  注意：2em的意思就是文字的2倍大小。
32.如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing 来实现
如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航