HTML学习（week2）

2023.11.10今天学习了第九章表单和第十章框架

知识点：

1.表单标签由五种：form,input,textarea,select和option。

2.创建一个表单，必须要把所有表单标签放在form标签内部，form属性包括name(表单名称)，method(提交方式，post安全性更好)等。

3.input标签：<input type="表单类型"/>，自闭合标签，没有结束符号，表单类型由type属性决定

4.单行文本框text：属性value设置默认值，size设置文本框长度，maxlength设置文本框最多可以输入的字符数

5.密码文本框：输入字符不可见，属性和单行文本框一样

6单选框：<input type="radio" name=" " value=" "> 必须设置name和value ，且name属性必须一致才能单选，checked属性默认情况下选中第一个文本框

7.复选框：与单选框相似

8.按钮：普通按钮button 提交按钮submit 重置按钮reset（只能清空所在form标签内的表单的内容）

9.多行文本框：<textarea row="行数" cols="列数" value=“取值”>默认内容</textarea>

10.下拉列表：selection 和 option搭配使用，selection属性有multiple（设置下拉列表可以使用多项）和size（设置下拉列表显示几个列表项），option属性有selected（是否选中）和value（选项值）

11.框架使用iframe标签<iframe src="链接地址" width=" " height=" ">在当前页面嵌入另一个页面

2023.11.11今天学习了第11章css简介

知识点：

1.HTML用于控制控制网页的结构，CSS用于控制网页的外观，JavaScript控制网页的行为

2.CSS引入方式：外部样式表，内部样式表，行内样式表

3.外部样式表：必须要link标签来引入<link rel="stylesheet" type="text/css" href="css/index.css"/> 

4.内部样式表：HTML代码和CSS代码在同一个HTML文件中，style标签放在head里，属性type="text/css"表示这是标准的css

5.行内样式表：在标签的style属性中定义的 <div style="color:red;">

2023.11.12今天学习了第12章css选择器

知识点：

1.元素的id属性和class属性：同一个页面中不允许出现两个相同的id，可以出现两个相同的class，id相当于身份证号是唯一的，class相当于名字可以重名

2.css选择器：元素，id，class，后代，群组选择器

3.元素选择器：选中相同的元素，然后对相同的元素定义同一个css样式  元素符号{属性：属性值；}

4.id选择器：为元素设置一个id，真的这个设置了id属性的元素定义css样式，必须加前缀#号   #id名称{属性：属性值；}

5.class选择器：可以对相同的元素或不同的元素进行定义相同的class属性，然后针对拥有同一个class属性的元素进行css样式操作，必须加前缀.    .class名称{属性：属性值；}

6.后代选择器：选择元素内部的某一种元素，包括子元素和后代元素      #父元素选择 子元素选择{属性：属性值}

7.群组选择器：同时对几个选择器进行相同的操作（选择器用英文逗号隔开） 选择器1,选择器2{属性：属性值}

2023.11.13今天学习了第13章字体样式

知识点：

1.字体类型font-family：如果字体类型只有哟个英文单词，则不需要加上双引号；如果是多个单词且是中文的，则需加上双引号。对元素定义多个字体类型，将从左到右顺序看电脑中是否安装该字体并应用。

2.字体大小font-size：font-size属性取值有两种，关键字和像素值。像素值单位常用px

3.字体粗细font-weight：font-weight属性取值有两种，关键字和100-900的数值，关键字常用bold，100相当于lighter，400相当于normal，700相当于bold,1000相当于bolder

4.字体风格font-style：使用font-style定义斜体效果，oblique是让没有italic属性的字体也能有斜体效果。

5.字体颜色color：十六进制RGB值

6.浏览器解析css式有一点顺序的，先用元素选择器一开始定义了一次，接着又用id选择器定义一次，因此后面的会覆盖前面的。

2023.11.14今天学习了第14章文本样式

知识点：

1.首行缩进text-indent：text-indent：像素值   text-inden是font-size值的两倍就是首行缩进两字符

2.水平对齐text-align：text-align：取值；（left center right)

3.文本修饰text-decoration：text-decoration：取值；   none去掉所有划线效果（超链接）   underline下划线(文章中的重点)    line-through中划线(电商网站促销)   overline上划线

4.大小写text-transform：text-transform：取值； none无转换  uppercase转换为大写 lowercase转换为小写 capitalize只将每个英文单词首字母转换为大写

5.行高line-height：line-height：像素值

6.字间距letter-spacing：letter-spacing：像素值；每一个中文汉字和英文字母都被当做一个字

7.词间距word-spacing：word-spacing：像素值；一般来说只针对英文单词而言

2023.11.15今天学习了第15章边框样式和16章列表样式

知识点：

1.边框的属性：border-width边框的宽度（像素值） border-style边框的外观（none无样式 dashed虚线 solid实线） border-color边框的颜色

2.边框的简写形式：border:1px solid red

3.局部样式：border-top上 border-left左 border-right右 border-bottom下 简写形式border-top: 2px solid red;

4.去除边框：border-left: 0px;

5.列表项符号list-style-type：定义列表项符号（disc实心圆默认 circle空心圆 square正方形）

6.去除列表项符号：list-style-type: none;

7.列表项图片：list-style-image: url（图片路径）;

2023.11.16今天学习了第17章和第18章和作业修改

知识点：

1.表格标题位置：caption-side 可定义在表格的上方或下方

2.表格边框合并：table{border-collapse:collapse;单元格之间的空隙去除

3.表格边框间距：table{border-spacing: 8px;}

4.图片大小：width: 200px;height: 200px;

5.图片边框：border: 5px solid rgb(4, 0, 255)

6.图片对齐：text-align: left; 定义水平对齐方式，图片是在父元素中进行水平对齐，比如放在div中

7.垂直对齐：vertical-align: top;定性周围的行内元素或文本相对于该元素的垂直方式

8.文字环绕：float: left; 图文混排