Web从入门到放弃（2）

一、嵌套列表

1、列表互相嵌套，形成多层级的列表
无序、有序和定义列表均可以采用这种方式书写

<ul>
   <li>
   辽宁省
   <ul>
       <li>沈阳</li>
       <li>大连</li>
       <li>丹东</li>
       </ul>
   </li>
   <li>
   山东省
   <ul>
       <li>济南</li>
       <li>青岛</li>
       <li>烟台</li>
       </ul>
   </li>
</ul>          

二、表格标签

1. <table>:表格的最外的容器
2. <tr>:定义表格行
3. <th>:定义表头
4. <td>:定义表格单元
5. <caption>:定义表格标题
   注意：这些标签之间是有对应关系的，要符合嵌套规范
6. 语义化标签：<tHead><tBody><tFood>
   注意： 1、添加虽然没有什么变化，但符合html语法规范
   示例
   2、在一个table中，tBody可以出现多次，但tHead、tFood只能出现一次

<table>
        <caption>天气预报</caption>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        <tr>
            <td>2022年10月26日</td>
            <td>小雨</td>
            <td>阴雨连绵，出门带伞</td>
        </tr>
        <tr>
            <td>2022年10月27日</td>
            <td>晴朗</td>
            <td>天气晴朗，适合出行</td>
        </tr>
     </table>       

三、表格属性

1. <border>:表格边框
2. <cellpadding>：单元格内的空间
3. <cellspacing>：单元格之间的空间
   以上在<table>中设定
4. <rowspan>：合并行
5. <colspan>：合并列
   以上在<th>和<td>中均可设定
6. <align>：左右对齐的方式
   (left/center/right)
7. <valign>：上下对齐的方式
   (top/middle/bottom)
   以上在<tHead>中设定

<table border="1"cellpadding="30"cellspacing="30">
        <caption>天气预报</caption>
        <tHead align="right"valign="top">
        <tr>
            <th colspan="2">日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        </tHead>
        <tBody>
        <tr>
            <td rowspan="2">2022年10月26日</td>
            <td>白天</td>
            <td>小雨</td>
            <td>阴雨连绵，出门带伞</td>
        </tr>
        <tr>
                <td>夜晚</td>
                <td>小雨</td>
                <td>阴雨连绵，出门带伞</td>
        </tr>
        <tr>
            <td rowspan="2">2022年10月27日</td>
            <td>白天</td>
            <td>晴朗</td>
            <td>天气晴朗，适合出行</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td>晴朗</td>
            <td>天气晴朗，适合出行</td>
        </tr>
        </tBody>
        <tFood>
            
        </tFood>
     </table>     

四、表单input标签

1. <form>:表单最外层容器
2. <input>:标签用于搜集用户信息，根据不同的type属性，展示不同的控件，如输入框、密码框、复选框等
   如下图
   
   

五、表单相关标签

1. <textarea>:多行文本框
2. <select>、<option>：下拉菜单
3. <lable>：辅助表单
4. 

六、表格表单组合实列

七、div与span

1. <div>(块)
   div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>标签也可以嵌套多层<div>,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

2. <span>(内联)
   用来修饰文字，<div>与<span>都是没有任何默认样式的，需要配合CSS才行。
   

八、CSS语法格式

1. 格式：选择器：（属性1：值1；属性2：值2）
2. 单位：px->像素（pixel）、%->百分比
3. 基本样式：width、height、background-color
4. CSS注释：/CSS注释内容/
   

九、内联样式与内部样式

1. 内联（行内、行间）样式
   在html标签上添加style属性来实现的
2. 内部样式
   在<style>标签内添加的样式
   注意：内部样式的优点，可以复用代码
   
   

十、外部样式及两种写法

1. @import语法
   
   
2. <link>标签
   real、href
   

十一、CSS颜色表示法

• 单词表示法
  red、yellow、blue、green等
• 十六进制表示法
• RGB三原色表示法
  rgb(255,255,255);取值范围0~255
  单词表示法适配的范围较小，后两种色域更宽
  

十二、背景样式

1. background-color：背景颜色
2. background-image：背景图片/
   url(背景地址)
   默认：会水平垂直都铺满背景图
3. background-repeat：背景图片的平铺方式
   repeat-x x轴平铺
   repeat-y y轴平铺
   repeat（x，y都进行平铺）
   no-repeat 都不平铺
4. background-position：背景图片的位置
   若x、y为正数，会向右和向下迁移；
   若x、y为负数，会向左和向上迁移。
   x y：number|单词
   x：left、center、right
   y:top、center、bottom
5. backgrounnd-attachment：背景图随滚动条的移动方式
   scroll:默认值（背景位置是按照当前元素进行偏移的）
   fixed（背景位置是按照浏览器进行偏移的）

十三、背景实现视觉差效果

十四、边框样式

• border-style：边框的样式
  solid：实线
  dashed：虚线
  dotted:点线
• border-width：边框地大小
  px····
• border-color：边框的颜色
  red #100····
  注意：针对某一边进行单独设定
  边框也可以针对某一边进行单独设置：border-left-style：中间是方向 left、right、top、bottom

十五·、边框实现三角形

颜色：透明颜色 transparent

十六、family字体类型

• font-family：字体类型
  英文字体：Arial、‘Times New Roman’
  中文字体：微软雅黑（‘Microsoft YaHei）、宋体（SimSun）
• 衬线体与非衬线体
  注意事项：
  1、设置多字体的目的：字体类型能够识别更多的计算机
  2、引号的问题

十七、字体大小粗细样式

• font-size：字体大小
  默认：16px
  写法：number（px）|单词（small large····不推荐使用）
  注：字体大小一般为偶数，用单词法渲染出来的不一定为偶数

• font-weigt：字体粗细
  模式：正常（normal）加粗（bold）
  写法：单词（normal、blod）|number（100 200 300···900；100到500都是正常的，600到900都是加粗的）

• font-style：字体样式
  模式：正常（normal）斜体（italic）
  写法：单词（normal、italic）
  注：oblique也表示斜体，用的比较少，了解即可
  区别
  1、italic所有带有倾斜属性的字体才可以设置
  2、oblique没有倾斜属性的字体也可以设置倾斜操作

• color：颜色

十八、文本修饰与文本大小写

• text-decoration：文本装饰
  下划线：underline
  删除线:line-through
  上划线:overline
  不添加任何装饰：none
  注： 对一文本同时添加多种修饰时中间用空格隔开，不能用逗号
• text-transform：文本大小写（针对英文）
  小写：lowercase
  大写：uppercase
  只针对首字母大写：capitalize

十九、文本缩进与文本对齐

• text-indent：文本缩进
  首行缩进
  ***em单位：相对单位，1em***永远都是和字体大小相同
• text-align：文本对齐方式
  对齐方式：left、right、center、justify（两端点对齐）

二十、文本的行高

• line-height：定义行高
  行高：一行文字的高度，上边距和下边距的等价关系。
  默认行高不是固定值，根据当前字体大小，不断变化。
  取值：
  1、number（px）
  2、scale（比例值，跟文字大小）

二十一、文本间距与英文折行

• letter-spacing：定义字间距
• word-spacing：定义词间距（针对英文）
• 强制折行：（针对英文）
  1、word-break：break-all；（非常强烈的折行）
  2、word-wrap：break-word（不是那么强烈的折行，会产生一些空白区域）

二十二、文本与段落实现个人简介

二十三、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。

复合的写法是通过空格的方式实现的，有的是不需要关心顺序的，如background和border；有的需要关系顺序,如font

• 1、background：red url（） repeat 0 0；
• 2、border：1px red solid：
• font（color不属于font系列）
  注：最少需要有两个值size family
weight style size family正确
  style weight size family正确
  weight style size family/line-height family正确
  注意：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。

二十四、ID选择器及注意事项

• ID选择器
  CSS：#elem{}
  html：id="elem"
  注意：
  1、在一个页面中，ID值是唯一的。
  2、命名规范，字母 -数字（命名的第一位不能是数字）
  3、命名方式
  驼峰式：searchButton（小驼峰）、SearchButton（大驼峰）、searchSmallButton
  下滑线式：search-small-button
  短线式：search_small_button

二十五、CLASS选择器及注意事项

• CLASS选择器
  CSS:elem{}
  html:class="elem"
  注意
  1、class选择器是可以复用的。
  2、可以添加多个class样式。
  3、多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
  4、标签+类的写法