1.html和css的关系
1)HTML是网页内容的载体。
2)CSS样式是表现.
3)JavaScript是用来实现网页上的特效效果。
2.html文件结构
1)1. <html></html>
称为根标签,所有的网页标签都在<html></html>中
2)<head>
标签用于定义文档的头部,它是所有头部元素的容器。
3) 在<body>
和</body>
标签之间的内容是网页的主要内容
3.<strong>和<em>
并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。
4.<span>标签
<span>
标签是没有语义的,它的作用就是为了设置单独的样式用的。
5.<q>标签:短文本引用
注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。
6.<blockquote>:长文本引用
浏览器对<blockquote>标签的解析是缩进样式。
7.<br />,<hr />
在 html 中是忽略回车和空格的,你输入的再多回车和空格也是显示不出来的。
<br />:添加空行。
<hr />:添加横线。
8.添加空格
9.<address>
在浏览器上显示的样式为斜体。
10.<code>,<pre>
<code>:加入一行代码。
<pre>:加入多行代码(保存空格)。
11.<ul>
- 第一行。
- 第二行。
ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点。
12.<ol>
- 第一行。
- 第二行。
<ol>
在网页中显示的默认样式一般为:每项<li>
前都自带一个序号,序号默认从1
开始。
13.<div>
在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>
标签中,这个<div>标签的作用就相当于一个容器。
什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。
14.给<div>命名
....
15.<table>标签
创建表格的四个元素:
table、tbody、tr、th、td
1、<table>…</table>:整个表格以<table>
标记开始、</table>
标记结束。
2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)
3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>
,说明一行中就有几列。
5、<th>…</th>:表格的头部的一个单元格,表格表头。
6、表格中列的个数,取决于一行中数据单元格的个数。
注:a.table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
b.表头,也就是th标签中的文本默认为粗体并且居中显示
16.<caption>标签与表格摘要
a.摘要:
b.表格标题:
... | ... |
17.<a>标签
使用<a>
标签可实现超链接。
title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)。
<a>
标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。
<a>
标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto
做许多其它事情。
注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?
”开头,后面的参数每一个都以“&
”分隔。
18.<img>标签
讲解:
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件。
19.<form>标签
网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
1.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
2.method : 数据传送的方式(get/post)。