网页的基本结构
html
html指的是超文本标记语言（Hyper Text Markup Language）,是一门专业写给浏览器的语言，并不是编程语言。所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
html作用:负责网页的结构和排版，对网页中的信息进行控制.
html标签语法
1、html标签要求所有的html语言写在标签符号里面 <>。
2、html标签是成对出现的，并且区分首尾，在尾标签添加 / 结束。
html标签语法
网页的基本结构由四对标签组成
html — 表示网页的整体。
head — 表示网页的头部，它里面的内容都是设置给浏览器看的。
body — 表示网页的主体，是网页的显示区域，要展示给用户看的内容。
title — 表示网页的标题，需要写在 head里面
html标签
标签之间的关系：标签之间只有两种关系，一种是并列关系，一种是包含嵌套关系。
1、h — 标题标签，有1~6级，h1最大，h6最小。
2、p — 段落标签，它会将内部的信息编译成为一个段落。
3、语义标签 — 语义标签将其内部的数据赋予了不同的含义；SEO — 搜索引擎的优化 （营销的入口）
4、文字控制标签 — 在文字控制中，对文字的控制最常用的是修改文字颜色、文字字号、文字字体、这些需求都是通过一个标签来控制。font：使用方式是，修改部分文字就用font选中，然后修改它的属性。
标签属性采用键值对的基本格式，多个属性值之前通过空格隔开，
标签属性的基本结构 key = “value”，例如 color=“red”，键值对翻译过来就是，什么是什么的意思。
标签属性的作用是设置标签的相关信息。
font 标签的文字控制三属性：
（1）、size — 字号大小，有限制，最大是7，最小是1
（2）、color — 颜色，值可以是颜色值，也可以是英文名称
（3）、face — 字体
5、水平分割线标签 — hr表示水平分割线，它是一个单标签，因为不需要选中任何的信息。
标签属性：
（1）、size — 字号大小，有限制，最大是7，最小是1
（2）、color — 颜色，值可以是颜色值，也可以是英文名称
（3）、width — 宽度
（4）、align — 水平对齐方式，值有三个：left\center\right(左中右)
注意事项：标签中有哪些属性都是规定的不能乱加，段落和标题标签都接受align属性。
6、bui标签和空格换行
（1）、<b>、<u>、<I>：加粗、下划线、倾斜
（2）、 — 空格
（3）、</br> — 换行
7、图片控制标签 — 图片控制都是通过img标签控制
img标签属性：
（1）、src — 表示图片的路径，必备属性
（2）、width — 图片的宽度
（3）、height — 图片的高度
（4）、border — 边框
（5）、title — 鼠标移动上去显示的提示文本，也是图片的标题
（6）、alt — 当图片不能正常显示时候的替换文本
注意事项：img标签实现等比例缩放的方法是只设置宽高其中一个值，另外一个值由计算机自动计算。
8、body的属性
（1）、bgclolor — 背景色
（2）、background — 背景图
注意事项：在web前端标准中，背景图永远是在背景色的上面。
列表
在互联网中由大量的数据需要展示，我们经常需要考虑以哪种形式展示会更加明了，其中列表是一种比较清晰地展示形式。
1、无序列表
基本结构: ul>li — <ul><li></li></ul> (ul包含/嵌套li,ul表示列表的整体，li表示列表项)
标签属性：type 作用是控制列表样式（circle:空心小圆圈；disc:实心小圆圈/小圆点; square:实心小方块）
注意事项： （1）、<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 （2）、<li>与</li>之间相当于一个容器，可以容纳所有元素。（3）、无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
2、有序列表
基本结构: ol>li — <ol><li></li> </ol>(ol包含/嵌套li,ol表示列表的整体，li表示列表项)
列表样式type的值可设定为 1，a，A， i，I
3、项目列表（自定义列表）
基本结构:dl>dt+dd — <dl><dt></dt> <dd></dd></dl> (dl表示列表的整体，dt表示项目/标题，dd表示详情/描述)
注意事项：项目列中，可以有多个dt和dd。也可以有一个dt多个dd修饰。
表格
表格基本结构：table>tr>td ；table表示表格的整体；tr表示行数，成行管理；td表示列数，表示一个单元格。
1、table的属性
（1）、border — 设置表格的边框
（2）、width — 表格的宽度
（3）、height — 表格的高度
（4）、align — 表格在网页中的对齐方式
（5）、bgcolor — 背景颜色
（6）、background — 背景图片
（7）、cellspacing — 表格各单元之间的距离（外边距）
（8）、cellpadding — 单元格边界与文本内容之间的距离（内边距，最好在不指定宽高的时候去测试）
总结：表格的尺寸产生有两种类型：一种是自然尺寸，也就是和内容有关；里外一种是认为尺寸。
2、tr的属性
（1）、height — 高度（这里注意无宽度，因为宽度是由table决定的）
（2）、valign — 设置一行单元格垂直对齐方式
（3）、align — 对齐方式
（4）、bgcolor — 设置行背景颜色
（5）、background — 背景图片 （这里注意，此属性不支持，兼容性问题严重）
3、td的属性
（1）、width — 设置单元格的宽度
（2）、height — 设置单元格高度
（3）、valign — 设置单元格垂直对齐方式
（4）、align — 设置单元格对齐方式
（5）、bgcolor — 设置单元格背景颜色
（6）、background — 背景图片
总结：tr和td相对于table属性来说，重点关注valign属性，作用是设置内容垂直对齐当时，值有三种：top、middle 、bottom（上中下）
4、细线表格
细线表格的原理在预设值两次背景色，它的边框并不是border设置出来的，而是单元格之间漏出来的背景颜色。
制作步骤：
（1）、设置table的背景颜色（边框颜色）
（2）、设置td的背景颜色，设置tr整行变色
（3）、设置cellspacing=“1”，作用是设置边框的粗细
5、表格的其他标签
caption标签：作用是设置表格的标题，注意事项：caption标签必须写在table标签内部。
Th标签，作用是表示每一列的标题，带有居中和加粗的效果。
注意事项：在表格中有两种单元格，一种是td存放普通的数据，一种是th存放标题数据。
6、表格数据分组
表格主要作用是用来处理数据，他可以将内部的数据进行分组，分成3大部分：表格头部：thead>tr>td、表格主体tbody>tr>td、表格底部tfoot>tr>td
7、单元格的合并
跨行合并：rowspan 跨列合并：colspan
合并单元格的思想：将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。
公式： 删除的个数 = 合并的个数 - 1
合并的顺序 先上 先左
8、表单元素
在HTML中，标签、元素、节点、指的都是同一个意思，指的都是标签。表单是一类特殊的标签，它是有用户操作的标签。专业称之为跟用户发生交互的这类标签都可以称之为表单元素，例如：按钮、下拉菜单、输入框等。
（1）、下拉菜单基本结构：select>option select表示下拉菜单的整体，option表示下拉项。默认被选中的设置方式：selected=“selected”。
（2）、form 标签表示表单的整体，它具有发送功能，作用是将其内部表单元素收集到的数据发送到后台服务器，他有一个必备的属性：action，作用是设置后要的发送地址，但是我们一般留空给后台。
（3）、form分组标签fieldset>legend，其中fieldset 作用是将表单元素进行分组，并且产生一个边框效果，跟它配合使用的一个标签legend，作用是设置租的标题。
（4）、label标签是一个提高用户体验的标签，将说明文字和表单选中可以实现让点击文字选中表单元素的作用
（5）、文本域（textarea）标签，作用是输入大段文本
（6）、input标签是表单元素核心，它有不同的类型，通过type属性设置，它的值有：
text — 文本输入框
password — 密码输入框
submit — 提交表单按钮
reset — 重置表单按钮
radio — 单选框按钮
checkbox— 复选框按钮
file — 上传文件组件
button — 普通按钮
image — 图片按钮，必须设置src属性，作用是引入图片
注意事项：
（1）、默认带有文字的按钮可以通过value属性进行修改
（2）、单选框按钮成为真正单选的方法：将单选按钮都是同一个name属性值
（3）设置单选框/复选框默认被选中状态的属性：checked="checked"
WechatIMG2.jpeg
网友评论