web前端第一周总结

第一周总结

2021.1.11

web标准的三层结构：框架(HTML框架)，表现(css外观样式)，行为(javascript交互)；
头代码含义：

<!DOCTYPE html > 
 <!-- 按照html 5 版本规范解析 -->
<html lang="en">
    <!-- 语言英文 -->
     <head>
         <meta charset="UTF-8">
         <!-- 字符集编码的存储解析方式 -->
         <title>Document</title>

标签：双标签，单标签；
排序标签：h1~h6标题标签、p段落标签、div块标签、span行内标签、hr(单）分割线标签、br(单）换行标签；
文本格式标签：加粗strong、删除线del、斜体em、下划线ins；
图片标签:

<h1>科比·布莱恩特</h1>
    <img src="科比.jpg"/>
    <h1>带有alt替换文本</h1>
    <img src="科比1.jpg" alt="科比湖人黄色球衣"/>
    <h1>带有title提示文本</h1>
    <img src="科比.jpg" title="科比斯台普斯中心"/>
    <h1>修改图片大小，宽度width,高度height，边框border</h1>
    <img src="科比.jpg" title="科比斯台普斯中心" width="1000" border="10"/>

链接标签：

<h1>外部链接：</h1>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.bilibili.com">哔哩哔哩</a>
    <h1>内部链接：</h1>
    <a href="demo.html" target="_blank">科比比</a>
    <h1>空链接：</h1>
    <a href="#">2021</a>
    <h1>图像链接：</h1>
    <a href="http://www.baidu.com" target="_blank"><img src="baidu.jpg"/></a>

路径：相对路径（上级、同级、下级图片的引用）、绝对路径

<img src="詹姆斯.jpg"/>
    <!-- 上一级路径用../ ,有几个上级用几个../-->
    <img src="../詹姆斯.jpg"/>
    <!-- 绝对的网络地址 -->
    <img src="https://i0.hdslb.com/bfs/archive/63377ed8bdd05ce5d305cef8d3ec77bc5c7cf617.png"/>

拓展内容：
（1）base单标签可设置整体标签的打开状态，注意写在head中<base target="_blank">
（2）瞄点定位：<a href="#1">居民供热换热站运行全部正常</a><br />注意要加#，<h2 style="color: blue" id="1">居民供热换热站运行全部正常</h2>注意id要一致才有效
（3）特殊标签pre：pre中的文本内容的格式直接显示到网页中，也就是说在pre中换行是有效的
特殊字符：空格——&nbsp；<——&lt；>——&gt；

2021.1.12

表格及其属性：注意行tr和每行的单元格替换，特别的有td是表格的第一栏；caption可以设置表格的标题；cellspacing是指单元格与单元格边框之间的间距；cellpadding是指单元格内容与单元格边框的间距；

<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="30">
        <caption>小说排行榜</caption>
        
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>30</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>25</td>
        </tr>

表格结构：通过thead、tbody、tfoot设置表格结构，右键检查页面可以看到
合并单元格：三步走
（1）首先要找到需要合并的第一个单元格；
（2）明确按行合并还是按列合并colspan（行）/rowspan（列）=“要合并的单元格数”；
（3）删除已合并的多余单元格；

<table border="1" cellspacing="0" width="500" height="100">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td rowspan="2">30</td>
        </tr>
        <tr>
            <td colspan="2">李四</td>
            <!-- <td>男</td> -->
            <!-- <td>25</td> -->
        </tr>

列表：有序列表ol、无序列表ul、自定义列表dl；
表单：
input:
（1）type值：文本框text、密码框password、单选按钮ridio、复选框checkBox、普通按钮button、提交按钮submit、重置按钮reset、图片按钮：img（配有src）、文件域：file（选择本机文件按钮）
（2）value值：文本框中表示默认显示内容、按钮表示按钮内容
（3）name值：与后端对接，便于对输入的数据分类
（4）checked=“checked”表示默认选中

<p>用户名：
<input type="text" value="请输入用户名" name="username"><br/>
        密码：<input type="password" name="password"/></p>
    <p>性别：
        男<input type="radio" name="sex"/>
        女<input type="radio" name="sex" checked="checked"/>
    爱好：
        打篮球<input type="checkbox" name="hobby"/>
        跑步<input type="checkbox" name="hobby"/>
        敲代码<input type="checkbox" name="hobby"/></p>
        <!-- button必须有value值才能显示 -->
        <p><input type="button" value="获取短信验证码" name="sex"/>
            <input type="button"  />
            <input type="submit" value="获取短信验证码" />
            <input type="reset" value="重置所填" />
            <input type="image" src="images/微信登录.png" />

label：

<h2>label标签用法：</h2>
    <h2>1.label直接包含表单</h2>
    <label>用户名：<input type="text" /></label>
    <h2>2.通过for和id来控制</h2>
    <label for="nc">昵称：</label><input type="text" id="nc" />

textarea：文本域，用户留言，框大小可变

<p>用户留言：
        <textarea></textarea>
    </p>

select：下拉列表，含多个option

<select>
        <option>--请选择省份--</option>
        <option selected="selected">北京</option>
        <option>山西</option>
        <option>河南</option>

表单域：大框框住表单

<!-- 表单域 -->
    <!-- get可换做post -->
    <form action="" method="get">
        用户名：<input type="text" name="username" /><br />
        密码：<input type="password" name="pass" /><br />
        <input type="submit">
        <input type="reset">
    </form>

2021.1.13

css标签选择器：div{}
类选择器：<div class="hellow">喜欢男生还是女生</div>

.hellow {
    
    
            width: 100px;
            height: 100px;
            background-color: red;

多类名选择器：<div class="box hellow">貂蝉</div>

.box {
    
    
            width: 150px;
            height: 100px;
            font-size: 30px;
        }
        .red {
    
    
            color: grey;
        }

id选择器：<div id="pink">科比·布莱恩特</div>

 #pink {
    
    
            color: yellow;
            background-color: purple;
        }

通配符选择器：

* {
    
    
            font-size: 50px;
        }

字体属性：font:font-style font-weight font-size font-family;字体：倾斜样式、字体粗细(直接数字即可）、字体大小（像素）、字体（复合属性，顺序不能颠倒）font: italic 700 30px "Microsoft yahei";
文本属性：
color: rgb(255,0,0);颜色color：预定义颜色值deeppink、skyblue；十六进制表示法#d617c6（两两一组，红绿蓝）；RGB代码red（255，0，0）。

text-align: center;对齐文本；/* center,left,right*/
text-decoration: underline;装饰文本/* line-through，overline，none*/
text-indent:2em;
line-height: 50px;/* 行间距：文本高度，上间距和下间距*/

样式表：行内样式表、内部样式表、外部样式表

<!-- 内部样式表：<style></style>中放样式，结构与样式相分离，适用于样式较少的情况-->
<!-- 行内样式表：直接在<div></div>中放简单样式，只能控制该标签-->
<!-- 外部样式表：适用于样式较多的情况，完全实现结构与样式相分离，另建一个单独的CSS样式文件 -->
<!-- 外部样式表 样式文件的引入-->
    <link rel="stylesheet" href="style.css">

2021.1.14

emmet语法：

`<!-- div*10+tab键 -->`
 `<!-- ul>li+tab键 包含关系 -->`
<!-- div+p+tab键 兄弟关系 -->
 <!-- .类名/#id名，可为div直接加类名（默认为div） -->
 <!-- p.a/li#grey,可为其他类型的标签加类名 -->
 <!-- .demo$*3表示同时添加多个按序递增的类名 $表示自增符号-->
 <!-- div{
    
    }表示默认在标签中添加文字 -->
 <!-- div{
    
    }*2表示添加多个相同标签内容 -->
 <!-- div{
    
    $}*3 -->

emmet快速生成css样式：w100、h200；
复合选择器：

/* 后代选择器 空格隔开，选择所有被包含的子选择器（儿子、孙子、干儿子（同名选择器的子集） */
        ol li {
    
    
            color: pink;
/* 用类名区分 */
        .nav li a {
    
    
            color: green;
        }
/* 子元素选择器，用>隔开，只能选择亲儿子 */
        .choose>li {
    
    
            color: #6868;
        }

并集选择器：

/* 并集选择器，用逗号隔开，适用于所有类型的选择器（后代、子元素） */
        div,p,.she li {
    
    
            text-align: center;
        }

伪类选择器：

/* 链接伪类选择器,用冒号隔开,注意LVHA的顺序不能颠倒*/
        /* a:link选择所有未被访问的链接 */
        /* a:visited选择所有已被访问的链接 */
        /* a:hover选择鼠标位于其上的链接 */
        /* a:active选择鼠标点击还未弹起的链接 */
        /* focus伪类选择器，为选中的表单加样式 */

css显示样式：块元素；行内元素；行内块元素；

<!-- html标签可分为块元素，行内元素 -->
    <!-- 块元素，常见块元素有h1~h6,p,div(最典型),ul,ol,li等 -->
        <!-- 特点：
        1.独占一行
        2.高度宽度外边距内边距都可以控制
        3.宽度默认是容器（父级宽度）的100%
        4.是一个容器及盒子，里面可放行内元素或块级元素 -->
        <!-- 注意：
        1.文字类元素内不能放块级元素
        2.p h标签（文字类标签）里面不放块级元素 -->
    <!-- 行内元素，常见行内元素a,strong,b,i,del,s,ins,u,span等 -->
        <!-- 特点：
        1.相邻元素一行显示
        2.宽和高直接设置是无效的
        3.默认宽度为它本身内容的宽度
        4.行内元素只能容纳文本或其他行内元素 -->
        <!-- 注意：
        1.链接中不能再放链接
        2.a中可以放块级元素 -->
    <!-- 行内块元素：常见的img,input,td同时具有块元素和行内元素的特点 -->
        <!-- 特点：
            1.同一行显示，中间有间隙
            2.默认为其本身内容的宽度和高度
            3.高度、宽度、外边距及内边距都可以控制 -->

显示模式的转化：display: block; display: inline; display: inline-block;

2021.1.15

css背景：

div {
    
    
            width: 1000px;
            height: 2000px;
            /* 背景颜色不设置相当于默认transparent(透明) */
            background-color: pink;
            /* 背景图片，网页中logo或者超大的图片或者小的装饰图片 */
            /* 注意图片如果太大，与盒子宽高比例不符合的话是不会显示的 */
            background-image: url(images/zhu.jpg);
            /* 背景平铺 默认平铺*/
            /* background-repeat: repeat; */
            background-repeat: no-repeat;
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */
            /* 背景颜色和背景图片可以同时添加，但图片会压盖图片 */
            /* 背景图片的位置 */
            /* 1.如果是方位名词与顺序无关 */
            /* 
            /* 垂直top,center,bottom
            水平right,center,left */
            /* background-position: center right;  */
            /* background-position: right center; */
            /* 如果只指定一个参数，那么另一个参数你默认垂直居中 */
            /* background-position: top; */

            /* 2.如果是精确单位 第一个一定是x,第二个一定是y */
            /* background-position: 10px 20px; */
            /* 只指定一个值，一定是x坐标 y默认垂直居中*/
            /* background-position: 10px; */

            /* 3.混合单位，精确单位和方位名词混合使用，第一个一定是x */
            background-position: 40px center;
        }

背景固定：

/* 背景固定：scroll（滚动）/fixed（固定） 默认是随文字滚动*/
            background-attachment: fixed;

背景半透明：

/* 背景颜色半透明写法 */
            background: rgba(0, 0, 0, 0.3);

背景属性复合写法：

/* 背景属性的复合写法 */
            background: pink url(images/rongyao1.jpg) no-repeat center top 14px fixed;

2021.1.17

css三大特性：层叠性、继承性、优先级；
层叠性：就近原则，属性冲突时后面把前面的覆盖，使用条件：相同选择器属性冲突
继承性：子承父业inherited from 只能继承文字相关样式，有简化代码的效果
行高的继承：

body {
    
    
            font: 12px/1.5 'Microsoft yahei';
        }

div {
    
    
            /* 子元素继承了body的行高1.5 即当前文字大小的1.5倍 1.5*20=30*/
            font-size: 20px;
        }

优先级：!important>行内样式style="">ID选择器>类选择器，伪类选择器>元素选择器>继承或者* 注意：继承的优先级时0，尽管父级有!important也还是自己的颜色
复合选择器的优先级：

/* 复合选择器会有权重叠加的效果 */
        ul li {
    
    
            /* 权重为0,0,0,0,1+0,0,0,0,1=0,0,0,0,2 */
            color: purple;
        }

        li {
    
    
            /* 权重为0,0,0,1 */
            color: orange;
        }

web前端第一周总结

第一周总结

2021.1.11

2021.1.12

2021.1.13

2021.1.14

2021.1.15

2021.1.17

猜你喜欢