Learning html css plus

Front-end learning

1.html:页面架构
2.css:页面布局
3.javascript:页面交互  (python)
4.jquery:js的工具包     (相当于python里面的一个库)
5.bootstrap:快速页面搭建的框架

所谓的前端:写网页-(指的是用户能看到的一切的交互页面)-网页、app、小程序

HTML

1.什么是html: 超文本标记语言
    什么是超文本:文本,图片,音频,视频,超链接
    什么是标记:符号,标签,=--=(没有逻辑可言)
2组成:转义字符,指令,标签

3学习目的:完成页面架构的搭建,什么样的标签,完成什么样的标签嵌套关系

instruction

"""
指令:  
    被<>包裹的  以!开头
    
    注释:<!-- -->

    文档类型:<!doctype>
"""

Escape character:

"""
转义字符:被 & + ;包裹,内容为特殊的字母加数字组成
<: &lt;
>: &gt;
空格:&nbsp;
版权:&copy
"""

label

"""
标签: 被<> 包裹,以字母开头,可以包含数字加减号  并非下划线

系统标签:h1~h6、p、span、div、i、a、b、img、hr、br、table、form、input
自定义标签:满足合法命名的所有标签

注释:html语言中,系统建议只使用系统标签,不建议使用自定义标签
"""

Active for the first time to play

<!--注释:doctype 必须出现在页面的最上方,规定该文档采用的是html版本类型-->
<!doctype html>
<!--html语言不区分大小写-->
<!--页面标签:包含所有页面内容,只有head和body两个子标签-->
<html>
    <!--头标签:样式,脚本,后勤操作:页面编码,页面标签标题图标-->
    <head>
        <meta charset="utf-8">
        <title>第一次</title>
        <style></style>
        <script></script>
    </head>
    <!--体标签:页面显示内容存放区域,样式,脚本-->
    <body>
        你好,html是我第一次使用,也是我的第一个页面的
        <style></style>
        <script></script>
    </body>
</html>
&nbsp   代表空格

label

1.<h1></h1>
    |       标题,页面的主标题
<h6></h6>

2.<br>  换行
3.<p>     字段---------自带换行 有段落间距
4.<span>一般用来嵌套文本类型标签  x<sup>2</sup>   h<sub>2</sub>o</span>
5.<b></b>  加粗
6.<i></i>  斜体
7.<a href ="https://www.baidu.com" target ="_blank">前往百度</a>
        _blank 重新打开一个新的链接
8.<img title="鼠标悬浮的文本提示" src="链接" alt="img标签资源加载失败">
9.<!--列表标签:无需ul>li 有序ol>li-->
    常用操作 ul>li{第$列}*5
10.表格标签
<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <td></td>
   
        </tr>
    </thead>
    <tbady>
         <!--(tr>td{单元格}*3)*2-->
         <!--rowspan:合并行-->
         <!--colspan:合并列-->
        <tr>
           <td></td>
        </tr>
    </tbady>
    <tfoot>
        <tr>
            <td>表尾</td>

        </tr>
    </tfoot>
        
</table>
   

Forms

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单标签</title>
</head>
<body>
    <!--1、form的作用:完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->
    <form action="">
        <p>
            <!--label作为input的文本解释标签,for绑定id-->
            <!--value属性是表单标签的内容,就是提交给后台的-->
            <!--name是提交给后台的key,value是值-->
            <!--placeholder是文本占位符-->
            <!--type是决定标签的类型本质(input|button)-->
            <!--multiple,checked布尔类型属性,不需要写值,multiple多选 checked默认激活-->
            <label for="username">账号:</label>
            <input id="username" type="text" value="Owen" name="usr">
        </p>
        <p>
            <label for="password">密码:</label>
            <input id="password" type="password" placeholder="请输入密码" name="pwd">
        </p>
        <p>
            <input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
        </p>
        <p>
            <input type="file" name="file" multiple>
            <!--复写框架-->
        </p>
        <p>
            男<input type="radio" value="male" name="sex" checked>
            女<input type="radio" value="female" name="sex">
            <!--单选框-->
        </p>
        <p>
            男<input type="checkbox" value="male" name="hobby" checked>
            女<input type="checkbox" value="female" name="hobby" checked>
            哇塞<input type="checkbox" value="other" name="hobby">
            <!---多选框-->
        </p>
        
        <p>
            <button type="button">普通按钮</button>
            <button type="reset">重置按钮</button>
            <button type="submit">提交按钮</button>
        </p>
        <p>
            <textarea cols="30" rows="10"></textarea>
        </p>
        <p>
            <input type="button" value="按钮" />
            <input type="reset" value="重置" />
            <input type="submit" value="登录" />
        </p>
    </form>
</body>
</html>

Classification and labeling

    <!-- 1、是否自带换行 -->

<!--带换行:h1 p div table form tr ul li -->
<!--不带换行:span i b a img input button label textarea-->

    <!-- 2、单双标签 -->
<!--单标签(主功能):br hr input img link -->
<!--双标签(主内容):html head body h1 p span div a label button -->
<!-- / 代表标签的结尾,但是单标签可以省略 -->

    <!--3、简单和组合标签-->
<!--组合:ul>li table>tr>td|th form>input -->

External files css files

/*css/样式引入.css*/

Css directly introduced three kinds of priority

<!--1、行间式-->
    <!--书写位置:在标签的style属性中书写样式-->
    <!--优缺点: 可读性差,没有复用性,书写直接-->
        
<!--2、内联式-->
    <!--书写位置:在head标签中的style标签内-->
    <!--css语法:css选择器 { 样式1; 样式2; } -->
    <!--优缺点: 可读性强,有复用性,样式被html页面绑定了,不能提供给其它html页面使用-->
        
<!--3、外联式-->
    <!--书写位置:在外部css文件中,在html文件中通过link标签引入css文件-->
    <!--css语法:css选择器 { 样式1; 样式2; } -->
    <!--优缺点: 可读性强,有复用性,适合团队开发(文件级别的复用性)-->

priority:

1 between the outer inline no priority associated with the difference, since the html interpretative language, written below the patterns will cover the top of the

2-line takes precedence above all else

css foundation selector

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css基础选择器</title>
    <style>
        /*优先级:可以从作用范围来判断 - 作用范围越精确,优先级越高 */
        /*1、统配选择器*/
        * {
            color: pink;
            font-size: 12px;
        }
        /*2、标签选择器*/
        h1 {
            font-size: 20px;
        }

        /*3、类选择器*/
        .h {
            font-size: 30px!important;
        }

        .h2 {
            font-size: 40px;
        }

        .h.h2 {
            font-size: 50px;
        }

        /*4、id选择器*/
        #hhh {
            font-size: 100px;
        }

        /*优先级:!important > 行间式 > id > class > 标签 > 统配 */
    </style>
</head>
<body>
    <h1 class="h">1标题</h1>
    <h2 id="hhh" class="h h2" style="font-size: 12px">2标题</h2>
</body>
</html>

Guess you like

Origin www.cnblogs.com/zhuyuanying123--/p/11266310.html