入门html网页,网页设计第一天：HTML入门

简介

HTML全称HyperText Markup Language属于超文本标记语言。超文本指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

特点

HTML的特点有：

1.文件必须使用html或htm(不推荐)作为后缀

2.大小写不敏感

3.无需编译，浏览器可以直接运行

基本结构

HTML的基本结构包括：

声明：用来指定当前页面使用的HTML版本

根标签：html，声明当前文件是一个html文件

子标签：

head:设置当前王爷的信息，并不显示在页面上；

charset：制定当前页面使用的编码集。

description：一般写网页的关键字

title：网页的标题

body：设置页面的内容

注意：

所有内容尽量放在标签中间

标签需要按照顺序进行正确的嵌套

标签可以有属性，属性格式为：属性名=“属性值”，属性值使用引号引起来；如果有多个属性使用空格进行分割

标签

h标签

h标签属于标题标签, 用于定义标题。取值为1-6。特点：特点：字体加粗，上下留白，换行，h1最大，h6最小。常用属性：align(设置对齐方式)，默认值是left(左对齐)，其他可选值right/center。

标题标签

1号标题

2号标题

3号标题

4号标题

5号标题

6号标题

普通文本

字体标签

字体标签用于定义文本字体、大小和颜色。有三个常用属性，分别是color：设置字体颜色；size：设置字体大小(1-7，1最小，7最大)；face：设置字体。颜色值的写法分为三种，分别是：十六进制颜色, 例如#ffffff；使用英文单词, 例如red；RGB 颜色, 例如rgb(255,0,0)。一般开发用十六进制来定义颜色。而且，我们也可以在head中定义一个style来存储一个颜色并命名，方便调用。

其他常用标签

其他常用标签包括：b:粗体；strong：粗体(strong一般是给开发者看的)；i：斜体；u：下划线；br：换行；p：段落；hr：分割线(align：设置对齐方式；width：设置宽度，可以使用百分比或像素值)

示例代码：

字体

#f1 {

color: rgb(255, 255, 0);

}

所有

主流

浏览器

都支持

img标签

img标签就是图片标签，用来定义图片。标签常用属性包括：src：图片路径；alt：代替文字，是图片加载失败的时候显示的提示文本；width：宽度；height：高度。图片的路径分为相对路径和绝对路径。相对路径参考的是本文件，./代表当前目录，可以省略。../代表上级目录。绝对路径就是带有协议和主机名的路径。

示例代码：

图片标签

列表标签

列表常用标签分为三类，分别是ol标签，ul标签，li标签。ol标签用于定义有序列表，type属性，取值1(默认值)，其他还有a，A，i，I。ul标签用于定义无序列表，type属性，取值disc(默认值，实心圆)，circle(空心圆)，square(方块)。li标签为列表项。

示例代码：

列表标签

2. 北京
3. 上海
4. 广州
5. 深圳

• 北京
• 上海
• 广州
• 深圳

a标签

a标签用于定义超链接。常用属性分为两种，一种是href：指定链接地址，第二种是target：指定如何打开页面。取值blank(在新窗口中打开)，parent(在父框架集中打开 )，self(默认。在相同的框架中打开 )，top(在整个窗口中打开 )，framename(在指定的框架中打开 )。

代码示例：

a标签

度娘

表格标签

常规设置

表格标签用于定义一个表格, 或用于页面布局。

table标签

table标签代表标签中的内容是表格。常用属性包括：border：边框宽度；width：宽度；height：高度；align：对齐方式；cellspacing：内边距,内容和边框之间的距离；cellspacing : 格子和格子之间的距离；frame : 显示外边框；rules : 显示内边框；cols :指 column，列；row : 行

caption标签

caption标签，指定表格的标题,必须写在table标签之后。

tr标签

tr标签代表一行。包含align属性, 用于定义对齐方式。

th标签

th标签代表表头, 文本会加粗并居中显示。

td标签

td标签代表数据格。

示例代码：

表格标签

ID	name	age
01	tom	12
02	jerry	11

表格结构标签

浏览器在解析表格标签的时候，会把它当做一个整体进行解析。如果表格中数据比较多的时候，要使用表格的结构标签，提高表格的加载速度。caption 标签一定要写在table标签之后。结构标签的书写顺序不会影响到页面的显示效果，即thead的内容始终在最前，tfoot的内容始终在最后。thead : 表格的头；tbody : 表格的主体；tfoot : 表格的脚。

单元格的合并

当我们需要对单元格进行合并时，可以在td标签中增加以下属性：

rowspan ：合并行

colspan ：合并列

示例代码：

单元格合并

指标	招生数		在校生数		毕业生数
	万人	比上年增长(%)	万人	比上年增长(%)	万人	比上年增长(%)
普通高等学校	1	2	1	2	1	2
中等职业学校	1	2	1	2	1	2

表格的嵌套

嵌入的表格必须是完整的结构, 即必须是table>tr>td结构。嵌入的表格要放在td标签。

框架标签

框架标签分为frameset标签和frame标签两类。

frameset标签

frameset标签用于定义框架集。属性包括：cols：垂直切割。rows：水平切割。

注意：frameset不能和body同时使用

frame标签

frame标签用于具体展示页面。常用属性包括：src：页面的路径。name：框架的名称。

示例代码：

框架标签

form标签

form标签用于为用户输入创建 HTML 表单, 收集用户填写的数据, 传递给后台服务器处理。

form的常用子标签有三个，分别是input标签；select标签和textarea标签。

input标签

input标签定义表单输入项, 收集信息。常用属性包括type(用于定义类型)；name(定义 input 元素的名称)；value(定义 input 元素的值)。注意：如果没有声明name属性, 数据是不会提交给后台的。

select标签

select标签用于定义下拉框。常用属性包括multiple：设置多选。默认情况下下拉框只能选择一个数据。size：设置下拉框中可见选项的数目。默认情况下只有一个可见。name：作用同input。

其中，select标签中还有两个子标签，分别是：optgroup：对下拉框中的选项进行分组。option：定义下拉框中的选项。

textarea标签

textarea标签用于定义一个多行多列的输入框。常用属性包括，cols：指定文本框中可见的列数。name：作用同input。

form的常用属性分为两种。action：规定当提交表单时向何处发送表单数据。

method, 指定请求方式。常用请求方式有两种：

get：传递数据的时候,以?name=value&name=value的形式拼接在URL地址后面, 传递给后台服务器。数据传输的大小受到限制，安全性相对post较低。

post：传递数据的时候, 没有拼接在URL地址后面。数据传输大小比get大，安全性相对get较高。

举例如下：

form标签

用户名:

密码:

性别男

女

爱好:篮球

足球

乒乓球

羽毛球

头像:

城市:

北京

天津

广州

深圳

自我介绍: