Web前端学习2

一、嵌套列表

列表之间可以互相嵌套形成多层级列表。

<ul>
        <li>
            辽宁省
            <ul>
                <li>沈阳</li>
                <li>大连</li>
                <li>丹东</li>
            </ul>
        </li>
        <li>
            山东省
            <ul>
                 <li>济南</li>
                <li>青岛</li>
                <li>烟台</li>
             </ul>
        </li>
    </ul>
<dl>
        <dt>中国</dt>
        <dd>
            <dl>
                <dt>辽宁省</dt>
                <dd>沈阳</dd>
                <dd>大连</dd>
                <dd>丹东</dd>
            </dl>
            <dl>
                <dt>山东省</dt>
                <dd>济南</dd>
                <dd>青岛</dd>
                <dd>烟台</dd>
            </dl>
        </dd>
        <dt>美国</dt>
        <dd>洛杉矶</dd>
        <dd>纽约</dd>
    </dl>
    

效果：

二、表格标签

<table> : 表格的最外层容器
<tr> : 定义表格行
<th> : 定义表头
<td> : 定义表格单元
<caption> : 定义表格标题
注:之间是有嵌套关系的，要符合嵌套规范。
语义化标签:

<tHead>、<tBody>、<tFood>

注:<tBody>是可以出现多次的，但是<tHead>、<tFood>只能出现一次。

 
 <table>
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th>日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tbody>
            <tr>
                <td>2019年1月1日</td>
                <td><img src="./img/tianqi_1.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td>2019年1月2日</td>
                <td><img src="./img/tianqi_2.jpg" alt=""></td>
                <td>有小雨，出门前请带伞</td>
            </tr>
        </tbody>
        <tFood>

        </tFood>
    </table>

效果：

三、表格属性

<border>: 表格边框
<cellpadding> : 单元格内的空间
<cellspacing> : 单元格之间的空间
<rowspan> : 合并行
<colspan> : 合并列
<align>:(ieft、center、right) 左右对齐方式
<valign> :(top、middle、bottom) 上下对齐方式

<table border="1" cellpadding="30" cellspacing="30">
    <caption>天气预报</caption>
    <tHead>
        <tr align="right" valign="top">
            <th colspan="2">日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </tHead>
    <tBody>
        <tr valign="top" >
            <td rowspan="2">2019年1月1日</td>
            <td>白天</td>
            <td><img src="./img/tianqi_1.png" alt=""></td>
            <td>天气晴朗，适合出行</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td><img src="./img/tianqi_1.png" alt=""></td>
            <td>天气晴朗，适合出行</td>
        </tr>
        <tr valign="bottom">
            <td rowspan="2">2019年1月2日</td>
            <td>白天</td>
            <td><img src="./img/tianqi_2.jpg" alt=""></td>
            <td>有小雨，出门请带伞</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td><img src="./img/tianqi_2.jpg" alt=""></td>
            <td>有小雨，出门请带伞</td>
        </tr>
    </tBody>
    <tFood>

    </tFood>
</table>

效果：

四、表单input标签

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

<form action="http://www.baidu.com">
        <h2>输入框:</h2>
        <input type="test" placeholder="请输入用户名">
        <h2>密码框:</h2>
        <input type="password" placeholder="请输入密码" >
        <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox" checked >香蕉
        <input type="checkbox" disabled>葡萄<!--disabled 禁止使用-->
        <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">
    </form>

五、表单相关标签

<textarea> : 多行文本框
<select >、<option> : 下拉菜单
<label> : 辅助表单

<h2>多行文本框</h2>
    <textarea cols="30" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select>
        <option selected disabled>请选择</option>
        <option>北京</option>
        <option>上海</option>    
        <option>杭州</option>
    </select>
    <select size="3">
        <option>北京</option>
        <option>上海</option>    
        <option>杭州</option>
    </select>
    <select multiple>
         <option>北京</option>
        <option>上海</option>    
        <option>杭州</option>
    </select>
    <input type="file" muitiple>
    <input type="radio" name="gender" id="man"><label for="man">男</label>
    <input type="radio" name="gender" id="woman"><label for="woman">女</label>

效果：

六、表格表单组合实例

<form action="">
        <table border="1" cellpadding="30">
            <tBody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名:</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码:</td>
                    <td><input type="password" placeholder="请输入密码"</td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            </tBody>
        </table>
    </form>

效果：

七、div与span

1.div(块)

div全称为division，"分割、分区"的意思，

标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在

中还可以嵌套多层

，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

2.span(内联)

用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。

 <div style="border:1px gray solid;">
        <h2><a href="#"><span style="color:red">千锋</span>-web大前端培训-好口碑前端培训机构-数万IT人的选择-</a></h2>
        <a href="#"><img src="https://feed-image.baidu.com/0/pic/240552903_1988378445_677626377.jpg" alt=""></a>
        <p>学费优惠：千锋周年庆,web前端学费优惠高达3000,仅限本周内咨询学员
            前端师资：千锋web前端拥有百人教学天团，名副其实前端培训界扛把子
            班型/课程：面授班/线上班/好程序员班供学员选择,课程紧贴企业需求</p>
            <a href="#">14天免费试学300人讲师团队18个城市开班企业项目实战点击咨询
            www.mobiletrain.org</a>
     </div>

效果：

八、CSS语法格式

CSS基础语法

1.格式

选择器{属性1 : 值1 ；属性2 : 值2 }

2.单位

px -> 像素(pixel)、% -> 百分比
外容器 -> 600px 当前容器 50% -> 300px
外容器 -> 400px 当前容器 50% -> 200px

3.基本样式:

width、height、background-color(背景色)
CSS注释:
/* CSS注释的内容 */

 <style>
        div{ width : 100% ; height : 100px ; background-color : red}
        span{ background-color: blue;}
 </style>
</head>
<body>
    <div>111111</div>
    <div>111111</div>
    <span>222222</span>
</body>

效果：

九、内联样式与内部样式

1.内联(行内、行间)样式

在html标签上添加style属性来实现的

2.内部样式

在<style>标签内添加的样式
注:内部样式的优点，可以复用代码、符合W3C的规范标准，进行让结构和样式分开处理。

<style>
        div{width:100px;height:100px;background-color:red}
    </style>
</head>
<body>
    <!-- <div style="width:100px;height:100px;background-color:red">这是一个块</div>
    <div style="width:100px;height:100px;background-color:red">另外一个块</div> -->
    <div>这是一个块</div>
    <div>另外一个块</div>
</body>

效果：

十、外部样式及两种写法

1、外部样式

引入一个单独的CSS文件，name.css

2、<ink>标签

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

3、@import

注:这种方式有很多问题，不建议使用。
link与@import区别

十一、CSS颜色表示法

1.单词表示法

red、blue、green、yellow······

2.十六进制表示法

0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f

3.rgb三原色表示法

rgb(255,255,255);
取值范围: 0 ~ 255

<style>
        /* div{background-color:#ff0000 } */
        /* div{background-color:#000000 } */
        div{background-color:rgb(0,0,0); }
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

提取颜色的下载地址：http://www.baidufe.com/fehelper

十二、背景样式

1.background-color : 背景颜色
2.background-image : 背景图片
url(背景地址)
默认: 水平垂直都铺满背景图
3.background-repeat : 背景图片的平铺方式
repeat-x
repeat-y
repeat ( x ，y 都进行平铺，默认值)
4.background-position : 背景图片的位置
x y : number(px、%) | 单词
x: left、center、right
y: top、center、bottom
5.background-attachment : 背景图随滚动条的移动方式
scrol : 默认值 (背景位置是按照当前元素进行偏移)
fixed(背景位置是按照浏览器进行偏移的)

<style>
    body{height : 2000px}    
        div{ width:1440px;height:800px;background-color:red; 
            background-image:url(./img/tianqi_1.png) ;
            background-repeat: no-repeat;
            /* background-position: 100px 50px; */
            /* background-position: right bottom; */
            /* background-position: center center; */
            background-position: 50% 50%;
            /* background-attachment: scroll; */
            background-attachment: fixed;
        }
         </style>
</head>
<body>
    <div></div>
</body>

效果：

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

<style>
        #div{width:1400px; height:800px; background-image: url(./img/1.jpg);background-attachment: fixed;}
        #div{width:1400px; height:800px; background-image: url(./img/2.jpg);background-attachment: fixed;}
        #div{width:1400px; height:800px; background-image: url(./img/3.jpg);background-attachment: fixed;}
        table{background-color: white;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>

十四、CSS边框样式

1.border-style : 边框样式

solid : 实线
dashed: 虚线
dotted : 点线

2.border-width : 边框的大小

px···

3.border-color : 边框的颜色

red #f00 ···
注: 针对某一条进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom

<style>
        /* div{ width:300px; height:300px; border-style: solid; border-color:red; border-width: 1px;} */
        /* div{ width:300px; height:300px; border-style: dashed; border-color:red; border-width: 30px;} */
        /* div{ width:300px; height:300px; border-style: dotted; border-color:red; border-width: 30px;} */
        div{ width:300px; height:300px; border-right-style: dotted; border-right-width: 10px; border-right-color: green;
            border-top-style: solid; border-top-width: 10px; border-top-color: red;}
</style>
</head>
<body>
    <div></div>
</body>

十五、边框实现三角形

颜色 : 透明颜色 transparent

 <style>
        body{ background-color: green;}
        div{ width:0px; height:0px;
            border-top-color:transparent;
            border-top-style:solid;
            border-top-width: 30px;;
            border-right-color:red;
            border-right-style:solid;
            border-right-width: 30px;;
            border-bottom-color:transparent;
            border-bottom-style:solid;
            border-bottom-width: 30px;;
            border-left-color:transparent;
            border-left-style:solid;
            border-left-width: 30px;;}
        </style>
    </head>
    <body>
        <div></div>
    </body>

效果：

十六、family字体类型

1.font-family : 字体类型

英文字体 : Arial,‘Times New Roman’
中文字体 : 微软雅黑，宋体

2.中文字体的英文名称

微软雅黑: ‘Microsoft YaHei’(非衬线体)
宋体: SimSun(衬线体)

3.衬线体与非衬线体

注意点: ==
1.多个字体类型的设置目的
2.引号的添加目的

<style>
        /* div{ font-family:'Times New Roman';} */
        /* div{ font-family:宋体;} */
        div{ font-family :华文彩云， Algerian,'New Roman', SimSun , 微软雅黑;}
    </style>
</head>
<body>
    <div>我只想睡觉</div>
    <p>我只想睡觉</p>
    <div>I  just want to sleep</div>
    <P>I just want to sleep</P>
</body>

效果：

十七、文本文字样式

1、字体大小

front-size : 字体大小
(1).默认大小 : 16px
(2).写法 : number(px) | 单词 ( small large ··· 不推荐使用)

 <style>
        div { font-size:30px }
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
</body>

效果：

2、字体取值参考表

3、字体粗细

font-weight:字体粗细
模式：正常（normal） 加粗（bold）
写法：单词（normal，bold），数字（100~900）

 <style>
        div { font-weight:bold}
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
</body>

4、字体样式

(1)font-style:字体样式
模式：正常（nomal）斜体（italic&oblique）
写法：单词（normal、italic）
(2)color:字体颜色

 div{ font-style: italic;color}
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>这是一段文字</div>
    <p>这是一段文字</p>

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

1.rext-decoration : 文本装饰

下划线(underline)、删除线(line-through)、上划线(overline)、不添加任何装饰(none)
取值
注: 添加多个文本修饰 : line-through under-line overline
效果：

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

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

 <style>
        /* p{ width: 300px; text-decoration: underline line-through overline;} */
        p{ text-transform: capitalize;}
 </style>
</head>
<body>
    <p>
    本作人设依旧由《你的名字。》《天气之子》的 田中将贺 担当，本作将在2022年秋季在日本上映。
本作将讲述 17岁少女铃芽遇见了为了寻找“门”而踏上旅途的青年。追随着青年的脚步，铃芽来到了山上一片废墟之地，在这里静静伫立着一扇古老的门，仿佛是坍塌中存留的唯一遗迹，铃芽仿佛被什么吸引了一般，将手伸向了那扇门…不久之后，日本各地的门开始一扇一扇地打开。据说，开着的门必须关上，否则灾祸将会从门的那一边降临于现世。在神秘之门的引导下，铃芽踏上了关门的旅途。
    </p>
    <p>Another building of note is Rosenborg Palace. Rosenborg was used as a royal 
        residencendoubtedly until the early 1700s but is now used as a museum to house
         the Danish Crown Jewels. </p>
</body>

效果：

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

1.text-indent : 文本缩进

首行缩进
em单位: 相对单位 ，1em永远跟字体大小相同

<style>
        p{ text-indent:2em；font-size：18px;}
 </style>
</head>
<body>
    <p>
    本作人设依旧由《你的名字。》《天气之子》的 田中将贺 担当，本作将在2022年秋季在日本上映。
本作将讲述 17岁少女铃芽遇见了为了寻找“门”而踏上旅途的青年。追随着青年的脚步，铃芽来到了山上一片废墟之地，在这里静静伫立着一扇古老的门，仿佛是坍塌中存留的唯一遗迹，铃芽仿佛被什么吸引了一般，将手伸向了那扇门…不久之后，日本各地的门开始一扇一扇地打开。据说，开着的门必须关上，否则灾祸将会从门的那一边降临于现世。在神秘之门的引导下，铃芽踏上了关门的旅途。
    </p>
    <p>Another building of note is Rosenborg Palace. Rosenborg was used as a royal 
        residencendoubtedly until the early 1700s but is now used as a museum to house
         the Danish Crown Jewels. </p>
</body>

2.text-align : 文本对齐方式

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

<style>
        p{ text-align:left ;}
        /*p{text-align：right;}*/
        /*p{text-aligan:right}*/
        /*p{text-aligan:ceter}*/
        /*p{tenxt-alian:justify}*/ 
 </style>
 </head>
 <body>
     <p>
         本作人设依旧由《你的名字。》《天气之子》的 田中将贺 担当，本作将在2022年秋季在日本上映。
本作将讲述 17岁少女铃芽遇见了为了寻找“门”而踏上旅途的青年。追随着青年的脚步，铃芽来到了山上一片废墟之地，在这里静静伫立着一扇古老的门，仿佛是坍塌中存留的唯一遗迹，铃芽仿佛被什么吸引了一般，将手伸向了那扇门…不久之后，日本各地的门开始一扇一扇地打开。据说，开着的门必须关上，否则灾祸将会从门的那一边降临于现世。在神秘之门的引导下，铃芽踏上了关门的旅途。  </p>
</body>

二十、文本的行高

line-height : 定义行高
取值: 1. number( px ) | scale(比列值，跟文字大小成比列的 )
行高: 一行文字的高度， 上边距和下边距的等价关系。
默认行高: 不是固定值，而是变化的。根据当前字体的大小再不断的变化。

<style>
        /* p{ line-height: 40px;} */
        p{ line-height: 2;} 
</style>

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

1.letter-spacing : 定义字间距
2.word-spacing : 定义词间距(针对英文)
3.强制折行: (针对英文)
word-break : break-all；(非常强烈的折行)
word-wrap : break-word; (不是那么强烈的折行，会产生一些空白区域)

<style>
 /* p{ letter-spacing: 10px;} */
        div{ width: 300px; height: 300px; border: 1px solid red; 
        word-break: break-all;}
    </style>
</head>
<body>
<!-- <div>
                本作人设依旧由《你的名字。》《天气之子》的 田中将贺 担当，本作将在2022年秋季在日本上映。
本作将讲述 17岁少女铃芽遇见了为了寻找“门”而踏上旅途的青年。追随着青年的脚步，铃芽来到了山上一片废墟之地，在这里静静伫立着一扇古老的门，仿佛是坍塌中存留的唯一遗迹，铃芽仿佛被什么吸引了一般，将手伸向了那扇门…不久之后，日本各地的门开始一扇一扇地打开。据说，开着的门必须关上，否则灾祸将会从门的那一边降临于现世。在神秘之门的引导下，铃芽踏上了关门的旅途。  
    </div> -->
    <div>
        Another building of note is Rosenborg Palace. Rosenborg was used as a royal 
        residencendoubtedly until the early 1700s but is now used as a museum to house
        the Danish Crown Jewels.house. 
    </div>
</body>

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

 <style>
        div{ width:800px;}
        h1{ text-align: center; color:#ff6600;}
        h2{ color:#00a0ff;  text-indent: 2em;}
        #p1{ font-style: italic; font-weight:bold ; text-indent: 2em;}
        #p2{ color:#66ff00; line-height: 30px; text-indent: 2em;}
        #p3{ color: #00ffff; text-decoration: underline; font-style: italic; text-indent: 2em;}
        #p4{ font-weight: bold; letter-spacing: 10px; line-height: 30px; text-indent: 2em;}
        #p5{ color:#cc00cc; line-height: 30px; text-indent: 2em;}
    </style>
</head>
<body>
    <div>
        <h1>Angelababy</h1>
        <h2>基本信息</h2>
        <p id="p1">略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略</p>
        <P id="p2">略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略
            略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略
            略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略</P>
        <h2>早年经历</h2>
        <p id="p3">略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略</p>
        <h2>个人生活</h2>
        <p id="p4">略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略</p> 
        <p id="p5">略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略  </p>
    </div>

效果：