<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.要想输入空格,必须写入
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.
注意:如果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.labellabel标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 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 来实现。