前端 --- html基础

前端：web

Java Web开发，JavaEE 开发。
前端三大件：HTML + CSS + Javascript
HTML：负责网页的结构，框架。
CSS：负责样式修饰。
Javascript：负责行为交互，动态效果等。
HTML：HtypeText markup language，超文本标记语言
超文本：不局限于普通文本，在普通文本的基础上，增加网页显示内容，比如：图片，
音频，视频，小程序，颜色，样式等等。
最新版本：1.0, 4.01, 5.0。
html是一门标记语言，是有语法的。需要被浏览器所解析。
浏览器：解析html、css和js的软件。
主流浏览器：
Chrome 及其开源版本：75%，谷歌。
IE 及 Edge：10%以上，Edge 基于 chrome 的开源版本。微软。
Firefox：Mozilla公司的产品。
Safiri：仅限在苹果产品上使用，苹果。
Opera：欧朋浏览器。倒闭了。
IDE：集成开发环境。vscode，webstorm，dw。

HTML 文件构成：

html文档是一个树型结构。
html是由标记所组成。
标记分为单标记和双标记。双标记由开始标记和结束标记所组成，开始标记和结束标记
之间文本称为标记的内容。
结束标记比开始标记多一个左斜杠。
标记可以有属性，每一个属性是一个键值对。不同的属性有不同的含义，不同的标记有
不同的属性。

常用标记：

1. html，head，body，title，meta.
2. h1~h6。属性align: center|left|right。
   3.p。属性align:left|center|right。
   4.img。属性：src用于指定图像的路径。一般要用相对路径。 alt属性用于对图片进行描
   述。
   width属性用于控制图片的显示宽度，height属性用于控制图片的显示高度。
3. hr：水平线。align、width、size、color。
   6.文本格式化标记：
   7.超链接标记：a 属性：href指定要跳转的目标页面，可以是本地页面，也可以是网络页
   面。
   target = _blank|_self。_slef表示在当前页面打开，_blank表示新开一个页面。
   8.span：内联标记，但无样式。
   9.div：块状标记，但无样式。
4. 无序列表：ul li 。type: circle|squre|disc
5. 有序列表：ol li。type:1 a A i I
6. 定义列表：dl dt dd，dt 和 dd是一对，但通常不会成对使用。
7. 表格：
   table ：属性border，表示设置边框
   cellpadding：单元格与内容之间的间距
   cellspacing：单元格与单元格之间的间距
   width和height:
   border：
   align:
   bgcolor:
   tr：属性：
   height：属性
   bgcolor：
   align：整行所有内容的水平对齐方式
   td：
   width和height
   bgcolor：
   align：单元格的水平对齐方式。
   td的属性：
   行合并和列合并：
   colspan：表示列合并。
   rowspan：表示行合并。
   表单：
8. size：控制尺寸宽度。但不是像素。
   2.maxlength：最大字符数。

注意事项：

1. html语法关键字不区分大小写。属性名也不区分大小写，但属性值区分。
   2.浏览器会将连续的空白字符（换行，换页，水平制表符，空格，回车），解析成一个英
   文半角空格。
   3.图片缩放，不要过大，或过小，会造成失真。因为图片不是矢量图。
   4.图片的显示宽高比最好与原始图片的宽高比一致。方案：只用width或，只用height属
   性。
   5.遇到width或height属性，使用数值，则单位为像素，也可以使用百分比。
   6.属性是无顺序的。
   标记（元素）类型：重点。
   1.块状标记：block。独占一行，可以设置尺寸。h1~h6,p,hr,br
   2.内联标记（行内标记）：inline。不独占一行，不可以设置尺寸。文本格式化标记。
   3.内联块状标记：inline-block。不独占一行，但可以设置尺寸。img，表单元素
   尺寸：
2. px：像素。电子屏幕最小的逻辑显示单位。相对单位。
   物理像素：跟硬件有关，且不可改变。物理最小显示单位。
   逻辑像素：可变，可通过程序调整。逻辑像素不可能超出物理像素。
   2.百分比。
3. em，rem，pt，vh，vw。
   颜色：网页使用RGB三原色。Red，Green，Blue，红绿蓝色。
   0~255 0~255 0~255

三种表示方法：

1. 单词表示法：red green blue black white gold orange yellow brown
2. 十进制表示法：rgb(100,100,100)
3. 十六进制表示法：#ffffff; #ff0000
   透明度：不是颜色。

表单：

select
布尔属性：属性只有两个状态。键和值相同。简化成只写键。
单选按钮：label 搭配使用。
复选框：checked 布尔属性。
文本域：可以输入多行文字。
reset按钮：将表单重置成初始状态。
submit按钮：将表单数据提交到远程服务器。