web前端技术教学第二周 10.22

一 列表标签

1 嵌套列表

列表之间可以相互嵌套，形成多层级的列表
示例：

<ul>
   <li>
       辽宁省
       <ul>
          <li>沈阳</li>
          <li>大连</li>
          <li>丹东</li>
      </ul>
   </li>
</ul>

二 表格

1 表格标签

<table>:表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>：定义表格标题

语义化标签：<tHead> ,<tBody>, <tFood>
注意;在一个table中，tBody可以出现多次，但tHead和tFood只能出现一次
示例：

<table>
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th>日期</th>
                <th>天气状况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>2022年10月22日</td>
                <td><img src="  "</td>
                <td>天气晴朗，适合出行</td>
            </tr>
        </tBody>
        <tFood>

        </tFood>
    </table>

2 表格属性

border：表格边框（一般跟在table后面）
cellpadding：单元格内的空间（一般跟在border后面）
cellspacing：单元格之间的空间（一般跟在border后面）
rowspan：合并行
colspan：合并列
align：左右对齐方式（left，center，right）
valign：上下对齐方式（top，middle，bottom）
示例：

<table border="2" cellpadding="30" cellspacing="30"> 

 <tr>
                <td rowspan="2">2022年10月22日</td>
                <td><img src="  "</td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td><img src="  "</td>
                <td>天气晴朗，适合出行</td>
            </tr>

上述代码即可将日期单元格合并

三 表单

1 表单标签

form:表单的最外层容器
input：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件
text：普通的文本输入框
password：密码输入框
checkbox：复选框
radio：单选框
file：上传文件
submit：提交按钮
reset：重置按钮
textarea:多行文本框
select，option：下拉菜单
label：辅助菜单
示例：

 <form action="  ">
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：</h2>
        <input type="password" placeholder="请输入密码">
        <h2>复选框</h2>
        <input type="checkbox">第1项
        <input type="checkbox">第2项
        <input type="checkbox">第3项
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交和重置按钮</h2>
        <input type="submit">
        <input type="reset">
        <select>
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
        </select>
         <h2>多行文本框</h2>
        <textarea cols="30" rows="20"></textarea>

2 表格表单组合

示例：

 <form>
        <table border="2" cellpadding="30" cellspacing="30"> 
            <tr>
                <td>用户名：</td>
                <td><input type="text" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td> <input type="password" placeholder="请输入密码"></td>
            </tr>
</form>

四 div与span

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

span（内联）：
用来修饰文字的，div和span都是没有任何默认样式的，需要配合css才行。

五 CSS

1 CSS基础语法

格式：选择器{属性1，值1；属性2，值2}
基本样式：width，height，background-color
CSS注释：/*注释的内容*/
示例：需放在head标签中

<<style>
        div{width:50px;height:100px;background-color: blue;}

    </style>

2 CSS样式的引入方式

1 内联样式

style属性

2 内部样式

style标签
注意：内部样式的优点是可以复用代码

3 外部样式：引入一个单独的css文件

通过link标签引入外部资源，rel属性指定资源与页面的关系，href属性资源的地址

属性值
alternate 文档的替代版本（比如打印页、翻译或镜像）。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的上一个文档。
contents 文档的目录。
index 文档的索引。
glossary 在文档中使用的词汇的术语表（解释）。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的小节。
appendix 文档的附录。
help 帮助文档。
bookmark 相关文档。
还可以通过@import方式引入外部样式（这种方式存在很多问题，不建议使用）

3 CSS中的颜色表示法

1.单词表示法：red，blue，green…
2.十六进制表示法：#000000（黑） ，#ffffff（白），#ff0000（红）
3.rgb三原色表示法：rgb(0,0,0)(黑色），rgb（255，255，255）（白色）

4 css背景样式

background-color:背景色
background-image：背景图
url：背景地址
background-repeat:平铺方式 repeat-x：x轴平铺 repeat-y：y轴平铺 no-repeat（都不平铺）
background-position：背景位置 x y：number（px，%）| 单词
x：left，center，right y：top，center，bottom
background-attachment：背景图随滚动条移动的方式
scroll：默认值(背景图位置按照当前元素进行偏移）
fixed：（背景位置是按照浏览器进行偏移的
示例：

<style>
        div{width:50px;height:100px;background-color: blue;
        background-image: url(./元素周期表.jpg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-attachment:fixed ;
        ;} 
    </style>

5 边框样式

border-style：边框样式（solid：实线 dashed：虚线 dotted：点线）
border-width：边框大小
border-color：边框颜色 （transparent：透明）
边框也可针对某一条边单独设置，如：border-left-style
示例：

<style>
        div{width:300px;height:300px;border-style: solid;border-color: red;border-width:{10px};}
</style>

6 css文字样式

font-family：字体样式
英文字体：Arial，‘Times New Roman’
中文字体：微软雅黑（’Microsoft YaHei‘，宋体（SimSun）
注意：1.设置多字体的方式 2.引号的问题
示例：

<style>
        div{font-family: 'Times New Roman';}
</style>

7 文字大小粗细样式

1 font-size：字体大小（默认为16px）

xx-small（large）：最小（最大）
x-small（large）：较小（大)
small（large）：小（大）
medium：正常（默认值）

2 font-weight：字体粗细

写法：单词（normal bold）
number：100-900（100-500都是正常，600-900是加粗）

3 font-style：文体样式

模式：正常（normal） 斜体（italic）
示例：

 <style>
        div{font-size: large;font-weight: 300;font-style: initial;}
 </style>

8 段落样式

1 text-decoration:文本装饰

下划线:underline
上划线:overline
删除线:line-through
不添加任何样式:none

2 text-transform:文本大小写(针对英文段落)

小写:lowercase
大写:uppercase
只针对首字母大写:capitalize
示例:

 <style>
       p{text-decoration: line-through overline underline;}
       p{text-transform: capitalize;}
    </style>
</head>

3 text-indent:文本缩进

示例:

 p{text-indent: 2em;}

4 text-align:文本对齐方式

对齐方式:left right center justify(两端点对齐)
示例:

p{text-align:justify;}

5 文本行高

line-height:定义行高（默认行高不是固定值，是根据当前文体的大小不断变化的）
取值：1.number（px） 2.scale（比例值，跟文字大小成比例）
示例：

p{line-height:2;}

6 文本间距与英文折行

letter-spacing：字之间的间距
word-spacing：词之间的间距（针对英文段落）
英文和数字不自动折行的问题：
1.word-break:break-all;(非常强烈的折行）
2.word-wrap:break-word;(非强烈的折行，会产生一些空白区域）
示例：

p{word-break: break-all;word-spacing: 10px;}

9 css复合样式

复合的写法是通过空格的方式实现的。复合的写法有些是不需要关心顺序的，如background，border。有的需要关心顺序，如font
注意：font一定要有两个值 size family
尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式
示例：

div{background:red url(./元素周期表.jpg) no-repeat
    border:2px black solid
    font:bold initial 30px 宋体}

10 css选择器

1 ID选择器（#）

id=“elem”
注意：1.在一个页面中，id值是唯一的
2.命名规范（第一位不能是数字）
3.命名方式，驼峰式，下划线式，短线式
示例：

#div1{background:red}
<div id="div1">这是一句话</div>

2 CLASS选择器（.)

class=“elem”
注意：1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序
4.标签＋类的写法
示例：

.div1{background:red}
<div clss="div1">这是一句话</div>