Python Day 46 前端、HTML5介绍、HTML标签、标签的嵌套规则、CSS3介绍、CSS代码中书写位置（重点）、CSS基础选择器、 - Icon-Liang

Python Day 46 前端、HTML5介绍、HTML标签、标签的嵌套规则、CSS3介绍、CSS代码中书写位置（重点）、CSS基础选择器、

　　##前端导读

“”“
接下来我们进入前端知识的学习，前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面，前端分为HTML5、CSS3、JavaScript三大部分，我们学习内容共分为HTML5、CSS3、JavaScript、jQuery前端框架及Bootstrap前端框架五个课程内容来介绍。
http://lupython.gitee.io/
”“”

#1、前端三剑客

1、html5：页面结构框架    内容
    标签 => 学会标签的嵌套结构

2、css3：页面布局与样式  外观

3、javaScript：页面的交互逻辑   动作

#2、浏览器输入网址发送了几件事？
1.输入网址
2.朝服务端发送请求
3.服务器接收请求并查询浏览器想要的数据返回给浏览器
4.浏览器拿到数据展示页面

#3、前端解题思路：

架构分析---页面样式与布局--内容展示--页面逻辑交互

　　##HTML5

#1、HTML5是什么
HTML5就是html语言，数字5是该语言的版本号；html语言开发的文件是以.html为后缀，制作运行在浏览器上展现给用户使用的前端界面，采用的语言是超文本标记语言(HyperText Mark-up Language)。

#2、HTML5如何学习
学习方向：掌握转义字符、指令和标签三大组成部分

学习目的：通过标签知识完成搭建页面整体架构

#2-1、转义字符（了解）
由 &与;包裹，可以使10进制数字组合，也可以使特殊单词缩写组合
1. 空格：&nbsp;
2. 字符"：&quot;
3. 字符&：&amp;
4. 字符<：&lt;
5. 字符>：&gt;

#2-2、指令
被<>包裹，以!开头的特殊符号，称之为指令。
指令中不区分大小写，前端需要掌握文档指令和注释指令两个即可
1. 文档指令：<!DOCTYPE html>
    -- 需要出现在一个html文件的最上方，代表该文件采用html5语法进行编写文件的
2. 注释指令：<!-- -->
    单行注释
    <!-- 这里书写的就是html5语法下的注释，不会被浏览器解析展现给用户看 -->
    多行注释
        <!--
        这是多行注释
        -->

#2-3、标签（重点）
        由<>包裹字母开头，可以结合数字和合法字符的能被浏览器解析的标记  --  字母 数字 -
    标签有语义：<br> 换行
    标签有作用范围：<h1>中间就是标签的作用范围，由标签来控制，具有默认样式</h1>
    标签可以修改内容样式：<xyz style="color: red">000</xyz>

        单双标签之分：单标签无需内容，主功能，可以省略结束符/；双标签主内容，需要有作用域，必须明确结束标签<a></a>

　　##标签

#1、页面结构相关的系统标签
1. 页面根标签：<html></html>
2. 页面头标签：<head></head>
3. 页面体标签：<body></body>
4. 页面标题标签：<title></tile>
5. 元标签：<meta />
6. 链接标签：<link />
7. 样式标签：<style></style>
8. 脚本标签：<script></script>

#2、简单的系统标签
1. 标题标签：<h1></h1> ... <h6></h6>
2. 段落标签：<p></p>
3. 换行标签：<br />
4. 分割线标签：<hr />
5. 行文本标签：<span></span>
6. 斜体标签：<i></i>
7. 加粗标签：<b></b>
8. 图片标签：<img />
　 <!-- 图片标签: src：图片源  alt：资源加载失败的文本提示 title：鼠标悬浮的文本提示 -->

9. 超链接标签：<a></a> 7. "架构"标签：<div></div>

　　<!--超链接: target: _self _blank-->

#3、复杂的系统标签 1. 无需列表标签：<ul><li></li></ul> 2. 表格标签：<table><!-- 包含大量的表格子标签 --></table> 3. 表单标签：<form><!-- 包含大量的表单子标签 --></form>

#3-1、无序列表

<ul>
    <li>列表项</li>
    <!-- 多少列表项就可以出现多少个li标签 -->
    <li>列表项</li>
</ul>
<!-- 无需列表只需要掌握ul与li的嵌套关系，样式的调整会在CSS3详细介绍 -->

#3-2、表格标签（了解）

<!--
标签部分：
1. table表格标签
2. caption表格标题标签
3. thead表格头部区域标签，tbody表格主体区域标签，tfoot表格尾部区域标签，均可以省略别写
4. tr表格行标签
4. th表格标题单元格标签，td表格普通单元格标签

全局属性部分：
1. border表格的边框宽度
2. cellspacing单元格直接的间距
3. cellpadding单元格内部的间距
4. rowspan合并行单元格
5. colspan合列行单元格
-->

#3-3、表单标签（重点，后期前后台交互时重点讲）

<form actio="" method="" enctype="">
    <label></label>
<input type="text" name="user">
<input type="password" name="pwd">
<select name="list">
  <option value="val1">列表项</option>
  <option value="val2">列表项</option>
</select>
<textarea></textarea>
<button type="button">按钮</button>
<input type="submit" value="提交">
</form>
<!--

标签部分：
1. form表单标签
2. 普通文本标签
3. input输入标签，通过全局属性type的值来确定具体是什么类型的输入标签
4. select表单中的列表标签，option列表项标签
5. textarea文本域标签
6. button按钮标签

form全局属性
1. action：提交表单数据给后台的地址
2. method：提交数据的方式(get或post)

　　get: 不安全的提交数据，高效
　　post: 安全的提交数据，低效
　　前台都可以给后台提交数据，后台一定会给前台一个反馈结果
3. enctype：提交数据的编码格式

form子标签全局属性
1. type：标签的类型
2. name：将该标签提交给后台标识数据的key (不设置name的标签的内容无法提交给后台)
3. value：该标签提交给后台的数据或是该标签的显示内容

input标签tpye属性值与分类
1. text：普通文本输入框
2. password：密文文本输入框
3. radio：单选框，该类型input标签有个全局属性checked，属性值省略，代表单选框默认选中状态
4. checkbox：复选框，该类型input标签也有个全局属性checke用同单选框，多个复选框用name值来标识属于同一组复选框，如都代表爱好的复选框的name都应该叫hobby
5. file：文件输入，该类型input标签有个全局属性multiple，属性值省略，代表同时可以选取多文件提交给后台
6. submit：提交表单信息给后台，用value设置提交按钮的显示内容

button标签tpye属性值与分类
1. button：不同按钮，默认点击后无任何操作
2. reset：重置按钮，默认点击后会还原表单的所有操作
3. submit：提交按钮，和type为submit的input标签功能一样，将表单信息提交给后台
-->

　　#标签的嵌套规则

<!-- w3c分析 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面架构</title>
</head>
<body>
    <div class="site">
        <div class="top">
            <div>
                <img src="" alt="">
                <form action=""></form>
            </div>
            <ul>
                <li></li>
                ...
                <li></li>
            </ul>
        </div>
        <div class="mian">
            <!--.left+.center+.right-->
            <div class="left"></div>
            <div class="center">
                <div class="box1">
                    <h2></h2>
                    <div>
                        <p></p>
                        <p></p>
                    </div>
                    <h3></h3>
                </div>
            </div>
            <div class="right"></div>
        </div>
        <div class="foot"></div>
    </div>
</body>
</html>

　　##CSS3

#1、CSS3是什么
CSS3就是css语言，数字3是该语言的版本号；css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中），采用的语言是级联样式表 （Cascading Style Sheet），也属于标记语言。

#2、CSS3如何学习
学习方向：从css代码书写位置、css选择器和css具体样式设置三部分进行学习

学习目的：完成页面样式布局和位置布局

　　##CSS代码中书写位置（重点）

css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。

#三种书写位置案例  .代表找class  #找id
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <style>
        /* css语法下的注释语法 */
        /* 设置页面中所有h2标签宽高背景颜色 */
        h2 {
            width: 50px; 
            height: 50px; 
            background-color: orange;
        }
        /* 设置页面中所有h3标签宽高背景颜色 */
        h3 {
            width: 100px; 
            height: 100px; 
            background-color: red;
        }
        .dd {
            width: 200px;
            height: 200px;
        }
        .d1 {
            background-color: yellow;
        }
        .dd.d2 {
            background-color: red;
        }
        .d2 {
            background-color: brown;
        }

    </style>

    <link rel="stylesheet" href="./css/4.样式.css">
</head>
<body>
<h2></h2>
<h3></h3>
<!-- 标签的宽度会适应父级，高度由内容撑开 -->
<!--1、行间式：直接，可读性差-->
<div style="width: 200px; height: 200px; background-color: pink;"></div>
<div style="width: 300px; height: 200px; background-color: greenyellow;">123</div>

<!--2、内联式：可读性增强，复用性(文件内部复用) head->style标签-->
<div class="dd d1"></div>
<div class="dd d2"></div>
<div></div>

<!--3、外联式：团队开发，复用性(文本级别复用) head->link->外部css文件-->
<div class="pp p1"></div>
<div class="pp p2"></div>
<div></div>
</body>
</html>

#三种书写位置总结
行间式控制样式最直接，但是样式多了直接导致页面可读性变差，且样式相同的标签样式也需要各自设置，复用性差；

内联式可以用一套样式块同时控制多个标签，具有样式的复用性，但是css样式代码还是写在html文件中，在项目开发下，代码量剧增，导致html文件变得臃肿，不利于代码维护；

外联式将css样式移到外部css文件中，不仅避免项目开发下html文件的臃肿问题，同时具有一套代码块控制多个标签，一个css样式文件服务于多个html两种复用性的好处，但是在学习阶段代码量不大时，样式不需要服务于多个html页面时，前面两种方式显然显得更便利。

在行间式中，写在标签内部的样式自然是用来控制该标签的样式，那写在内联式和外联式中的样式又是通过什么样的联系来控制对应页面中标签的样式呢？答案就是用于建立css与html之间联系的css选择器。

　　##CSS基础选择器

#基础选择器：注意各个选择器的优先级**********
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        /*优先级：按作用域大小区分，作用域越小优先级越高*/
        /* !important > 行间式 > id > class > 标签 > 统配 */
        /*重点： class选择器 - 单类名 多类名 */

        /*1.统配选择器*/
        /* 特定标识符 星号(*) -- 可以表示页面所有标签的名字 */
        /* 通配选择器控制页面中所有的标签(不建议使用) */
        * {
            font-size: 30px;
            color: brown;
        }
        /*2.标签选择器：标签名*/
        /* 特定标识符 标签名 */
        /* 标签选择器控制页面中标签名为标签选择器名的所有标签*/
        div {
            color: orange;
        }
        span {
            color: darkcyan;
        }

        /*3.类选择器：.类名*/（提倡使用）
        /* 特定标识符 点(.) 页面中class属性值为box的标签都能被匹配*/
        /* class选择器控制页面中标签全局属性class值为class择器名的所有标签*/
        .aa {
            color: indigo;
        }

        /*4.id选择器：#id名*/
        /* 特定标识符 井号(#) 页面中id属性值为box的唯一标签备匹配，id具有唯一性：一个页面中所有标签的id属性值不能重名*/
        /* id选择器控制页面中标签全局属性id值为id择器名的唯一标签*/
        
        #bb {
            color: green;
        }

        /*组合使用：找id为bbclass为aa的div*/
        div#bb.aa {
            color: red;
        }

        .aa {
            color: red!important;
        }
    </style>
</head>
<body>
    <div class="aa" id="bb" style="color: gold!important;">d1</div>
    <div class="aa">d2</div>
    <div>d3</div>
    <span class="aa">s1</span>
    <span>s2</span>
    <span>s3</span>
</body>
</html>

posted on 2019-06-28 20:41 Icon-Liang 阅读(206) 评论(0) 编辑收藏举报

刷新页面返回顶部