web前端 -- Day1基础知识

网页的基本结构

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修饰。