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

时间:2022-11-18 21:56:03
1.head部分的标签
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>

2.<title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。

3.代码注释 <!--注释文字 -->

4.注意一段文字一个<p>标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3<p>标签中。
<p>标签的默认样式,可以在上图中看出来,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。

5.

现在如果想在一段话中特别强调某几个文字,这时候就可以用到<em>或<strong>标签。

       但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。


6.span:

(1). <em><strong>标签是为了强调一段话中的关键字时使用,它们的语义是强调。

(2). <span>标签是没有语义的,它的作用就是为了设置单独的样式用的。

7.注意这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话

8.

 <blockquote>的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。

      等等,上一节<q>标签不是也是对文本的引用吗?不要忘记<q>标签是对简短文本的引用,比如说引用一句话就用到<q>标签。

浏览器对<blockquote>标签的解析是缩进样式。

9. br : 怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br />标签了,在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。

与以前我们学过的标签不一样,<br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br /><hr /><img />

10.要想输入空格,必须写入&nbsp;

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>
17.
<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。

<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。

如下代码:

<a href="目标网址" target="_blank">click here!</a>

18.HTML&CSS——琐碎的知识点(1)
注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
19.

当用户需要在表单中输入大段文字时,需要用到文本输入域。

语法

<textarea  rows="行数" cols="列数">文本</textarea>
注意这两个属性可用css样式的width和height来代替:col用width、row用height来代替。
20.单选框和复选框
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
注意:同一组的单选按钮,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="提交">
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 来实现。