【原】1、web前端基础

夜猫速读 2022-05-05 发布于湖北

展开全文

HTML

HyperTextMarkupLanguage 超文本标记语言,
作用: 负责搭建页面结构和准备页面内容

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*通过选择器找到标签后添加样式*/        /*标签名选择器 选择页面中所有同名标签*/        h2{            color: blue;        }        h3{            color: pink;        }</style>    <!--引入外部css文件-->    <link rel="stylesheet" href="my.css"></head><body><!--内联样式--><h1 style="color: red">内联测试1</h1><h1 style="color: red">内联测试2</h1><h2>内部测试1</h2><h2>内部测试2</h2><h3>外部测试1</h3><h3>外部测试2</h3></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*id选择器 选择页面中的某一个元素*/        #smy{            color: red;        }        /*class选择器 选择页面中的多个元素*/        .c1{            color: green;        }        /*分组选择器,将多个选择器合并成一个*/        h3,#smy,.c1{            background-color: yellow;        }        /*任意元素选择器*/        *{            /*border边框: 边框粗细 样式(实线) 颜色 */            border: 1px solid red;        }        /*属性选择器*/        input[type='text']{            background-color: purple;        }</style></head><body><input type="text"><input type="password">

<h3>我是h3</h3><!--无序列表标签--><ul>    <li>诸葛亮</li>    <li id="smy">司马懿</li>    <li>吕布</li>    <li class="c1">貂蝉</li></ul><!--有序列表标签--><ol>    <li>吃饭</li>    <li >睡觉</li>    <li class="c1">撸代码</li></ol></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        h1{background-color: green}        #zxy{color: red}        .c1{color: blue}        h2,#zxy{background-color: yellow}        *{border: 2px solid green}        input[type='button']{background-color: pink}</style></head><body><ul>    <li class="c1">刘德华</li>    <li id="zxy">张学友</li>    <li>郭富城</li></ul><h1>苹果</h1><h1>香蕉</h1><h1 class="c1">榴莲</h1><h2 class="c1">洗衣机</h2><input type="submit" value="提交按钮"><input type="button" value="普通按钮"></body></html>

CSS

CasecadingStyleSheet层叠样式表
作用:负责美化页面

h3{    color: green;}

CSS的引入方式

引入方式:指如何在html页面中添加css样式代码
有三种引入方式:

内联: 在标签的style属性里面添加css样式代码,弊端:不能复用
内部: 在head标签里面添加style标签,在标签体内写样式代码, 可以在当前页面复用, 弊端:不能多页面复用.
外部:在单独的css样式文件中写样式代码, 在html页面中通过link标签引入,可以实现多页面复用, 工作中使用的最多

引入方式优先级: 内联优先级最高, 后执行生效.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #lb{background-color: pink}        .c1{color: green}        li,a{background-color: blue}        a:link{color: green}        a:visited{color: blue}        a:hover{color: red}        a:active{color: yellow}        input[type='text']{color: red}        input[type='password']{background-color: green}        div div p{color: green}        body>div>div>p{background-color: red}</style></head><body><div id="lb">刘备</div><div>关羽</div><div class="c1">张飞</div><span>刘备</span><span>关羽</span><span>张飞</span>
<p>悟空</p><p>八戒</p><p class="c1">沙僧</p><ul>    <li>水煮鱼</li><li>红烧肉</li><li class="c1">黄焖鸡</li></ul><input type="text"><input type="password"><div>    <p>p1</p>    <div><p>p2</p></div>    <div>        <p>p3</p>        <div><p>p4</p></div>    </div></div><a href="http://www.baidu.com">百度</a></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            width: 611px;            height: 376px;            background-color: #e8e8e8;            background-image: url("http://doc./tstore_v1/images/itemCat/study_computer_img1.png");            background-repeat: no-repeat;            background-size: 318px 319px;            /*通过横向和纵向的百分比控制位置*/            background-position: 90% 70%;        }</style></head><body><div></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            width: 375px;            height: 376px;            background-color: #e8e8e8;            background-image: url("http://doc./tstore_v1/images/itemCat/study_computer_img2.png");            background-size: 292px 232px;            background-repeat: no-repeat;            background-position: 80% 90%;        }</style></head><body><div></div></body></html>

css选择器

标签名选择器: 选择页面中所有同名标签

格式: 标签名{样式代码}

id选择器: 通过元素的id属性选择元素, 当需要选择页面中某一个元素时使用.

格式: #id{样式代码}

class选择器: 通过元素的class属性值选择元素, 当需要选择页面中多个元素时,给多个元素添加相同的class属性值即可

格式: .class{样式代码}

分组选择器 : 可以将多个选择器合并成一个选择器

格式: h3,#id,.class{样式代码}

任意元素选择器: 选取页面中所有的元素

格式: *{样式代码}

属性选择器: 通过元素的属性值选取元素

格式: 标签名[属性名='值']{样式代码}

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            width: 200px;            height: 40px;            border: 1px solid red;            /*水平对齐方式 left/right/center*/            text-align: center;            /*文本修饰 underline下划线            overline上划线 line-through删除线 none去掉线*/            text-decoration: line-through;            /*文本行高,多行文本可以控制行间距 单行文本可以控制垂直居中*/            line-height: 40px;            /*文本阴影:颜色 x偏移值 y偏移值 浓度 */            text-shadow: red -5px -5px 3px;            /*字体大小 默认大小为16px */            font-size: 20px;            /*字体加粗*/            font-weight: bold;        }        a{            text-decoration: none;/*去掉自带下划线*/        }        h1{            font-weight: normal;/*去掉自带的加粗效果*/            font-style: italic;/*斜体*/            /*font-family: cursive*/;/*设置字体*/            font: 15px cursive;/*设置字体大小和字体*/        }</style></head><body><b>加粗标签</b><i>斜体标签</i><u>下划线标签</u><s>删除线标签</s><h1>我是h1</h1><a href="">我是超链接</a><div>文本字体测试</div></body></html>

选择器练习:
1.修改所有水果背景色为绿色
2.修改张学友字体红色
3.修改刘德华 榴莲 洗衣机字体蓝色
4.修改洗衣机和张学友背景黄色
5.给所有元素添加2个像素的绿色边框
6.普通按钮背景粉色pink

子孙后代选择器: 通过元素之间的关系选择元素

body div div p{样式代码} 匹配body里面的div里面的div里面的所有p(包括后代p)

子元素选择器:通过元素之间的关系选择元素

body>div>div>p{样式代码} 匹配body里面的div里面的div里面的子元素p

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        h1{            color: red;/*颜色单词*/            color: #0000ff;/*6位16进制*/            color: #0f0;/*3位16进制*/            color: rgb(255,255,0);/*3位10进制*/            color: rgba(255,0,255,0.5);/*4位10进制 最后一位透明度*/        }        div{            width: 200px;            height: 200px;            background-color: purple;            /*设置背景图片*/            background-image: url("a.jpg");            /*设置背景图片尺寸*/            background-size: 100px 100px;            /*设置背景图片不重复*/            background-repeat: no-repeat;            /*设置背景图片位置*/            background-position: 50px 30px;        }</style></head><body><div>背景测试</div> <h1>颜色测试</h1></body></html>

分区标签

什么是分区标签?

分区标签可以理解为一个容器,将多个有关系的标签添加到分区标签里面可以进行统一管理.

一个页面一般至少分为三大区: 头/体/脚每个大区里面又有n个小的分区

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            width: 100px;            height: 100px;            border: 1px solid red;        }        span{            /*行内元素默认不能修改宽高 如果非要改需要修改display*/            display: block;            width: 100px;            height: 100px;            border: 1px solid blue;        }        img{            width: 100px;            height: 100px;        }</style></head><body><div>div1</div><div>div2</div><div>div3</div><span>s1</span><span>s2</span><span>s3</span><img src="a.jpg" alt=""><img src="a.jpg" alt=""><img src="a.jpg" alt=""></body></html>