首页 > 编程札记 > 编程

一起嗨前端

阅读：评论：0

一起嗨前端

准备工具

Sublime Text （开发工具）

google chrome （浏览器）

Web标准

结构--用于对网页元素进行整理分类，HTML

表现--用于设置网页元素的版式、颜色、大小等外观样式，CSS

行为--网页模型的定义及交互的编写，JavaScript

HTML

<html><head><title>网页标题</title></head><body>第一个网页</body>
</html>

HTML标签分类

1.双标签：< 标签 > 内容 < /标签 > <head></head>

2.单标签（极少）：<标签 /> <br/>

/ -- 关闭符

HTML标签关系：

<html>

</html>

html与head为父子级；head与body 并级。

常见标签：

<h1></h1>--<h6></h6> 标题（共6组，从大到小）

<p></p> 段落

<hr /> 水平线

<br /> 换行

<div></div> 布局用一个占一行

<span></span> 布局用一行放多个

文体格式化标签：

<strong></strong> 文字加粗显示

<em></em> 文字斜体显示

<del></del> 文字上加删除线

<u></u> 文字加下划线

图像标签：

<img />

<img src="图像路径" alt="图像不显示时的替换文字" title="鼠标悬停时显示的内容" widtd="图像宽度" height=“图像高度” border="图像边框"/> ps:宽度或高度选其一，图像会等比例缩放。

链接标签：

<a></a>

<a href="" target="_blank">百度</a> 超链接 target默认覆盖当前网页，_blank 表示在新页面打开链接。

锚点定位：快速定位到目标内容。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>锚点定位</title>
</head>
<body><h2>目录</h3><hr /><a href="#znjl">1.早年经历</a><br /><a href="#yyjl">2.演艺经历</a><br /><a href="#grsh">3.个人生活</a><br /><a href="#zyzp">4.主要作品</a><br /><a href="#shhd">5.社会活动</a><hr /> <h3 id="znjl">早年经历</h3> <p>123<a href="#ml">返回目录</a></p><h3 id="yyjl">演艺经历</h3><h3 id="grsh">个人生活</h3><h3 id="zyzp">主要作品</h3><h3 id="shhd">社会活动</h3></body>
</html>

base标签：

写在head里，表示所有的链接都在新窗口打开。

<head><base target="_blank"/>
</head>

特殊字符（部分）：

空格—— 
< —— <
> ——>
&——&
￥——¥
© ——©

注释标签：

<--! -->

相对路径：

1，图片文件与html文件在同一文件夹 <img src="1.jpg" />

2，图片文件位于html文件的下一级文件夹 <img src="images/1.jpg" />

3，图片文件位于html文件的上一级文件夹 <img src="../1.jpg" /> 上两级：../../

绝对路径：

完整的地址（极少用）。复制其他网站的图片 <img src=".jpg" /> 连接网络才能显示

无序列表 : ul （ul 下建议只包含 li ；li 下可以放其他标签）

<ul><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eee</li>
</ul>

有序列表：ol

<ol><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eee</li>
</ol>

表格 table （通常显示数据）

<table border="1" cellpadding="0" cellspacing="0" width="500" align="center"><caption>小说排行榜</caption><tr>   <!-- 行 --><thead><th>排名</th>    <!-- 表头 --><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></thead></tr><tr><td>1</td><td>鬼吹灯</td><td>A</td><td>876</td><td>7731</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>2</td><td>盗墓笔记</td><td>V</td><td>776</td><td>6731</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr></table>

align 设置表格在网页中的水平对齐方式。left、center、right ,默认为left；

cellspacing 单元格之间的距离；

cellpadding 单元格内容与边框的距离；

一般情况下三参为0： border 、cellspacing、cellpadding 为0。

合并单元格：

跨行合并--rowspan 跨列合并--colspan 合并后删除其他单元格，只有同一个结构标签中的单元格才能合并，不能跨（thead、tbody、tfoot）

<table width="300" border="1" cellpadding="0" cellspacing="0"><caption>测试</caption><tr><td>123</td><td>abc</td><td rowspan="2">ABC</td>   rowspan--合并行   2--两行</tr><tr><td>123</td><td>abc</td></tr><tr><td>123</td><td colspan="2">abc</td>  colspan--合并列  2--两列</tr></table>

表单：包含表单控件，提示信息，表单域；

input 控件：

<input /> 单标签。

text:单行文本输入框

password : 密码输入框

radio ：单选按钮

checkbox：复选框

button：普通按钮

submit：提交按钮

reset：重置按钮

image：图像形式的提交按钮

label标签：

用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。

<label>用户名： <input type="text" name="">
</label>

textarea 控件（文本域）

<textarea cols="20"  rows="5"><!-- cols--列 数字越大越宽 rows--行 数字越大越高 -->
</textarea>

select 下拉表单：

下拉选择框，selected表示默认显示;

<td>籍贯</td>
<td><select><option selected="selected">北京</option><option>上海</option><option>杭州</option></select>
</td>

表单域：

<form action="提交到url地址" method="提交方式get和post" name="表单名称,区分页面中的多个表单">
各种表单控件：input ......
</form>

查文档：

W3C : / 非官方

MDN : / 国外网站

CSS（层叠样式表）

1、行内样式表

2、内部样式表

<head>
   <style type="text/css">
       h4 {
           color: blue；

}
</style>
</head>

<body>

</body>

3、外部样式表

<head>

</head>

CSS文件里不用写 <style> </style>

CSS基础选择器：

1、标签选择器：可以把某类标签全部选择。div , h4 , a

2、类选择器：上面点声明，下面class调用。最大的优势是可以为一个或多个元素对象定义相同的样式。使用最多。

<style>

.abc {

color:blue;

}

<style>

多类名选择器： <div calss=" abc def"></div > 样式显示效果与HTML元素中的类名先后顺序无关，受CSS样式书写的上下顺序有关；各个类名中间用空格隔开。

3、id选择器：不得重复，只能使用一次。可以和类选择器一起使用。

<style>

# abc { }

</style>

<body>

</body>

4.、通配选择器： * 代表所有标签。

<style>

* { }

</style>

CSS复合选择器

1、后代选择器：P是div的后代

<style>

div p { }

</style>

<div>

</div>

2、子代选择器：

选中 li 的子代，一级菜单

<head><title>子代</title><style type="text/css">ul li > a {color: red;}</style>
</head>
<body><ul><li><a href="#">一级菜单</a><div><a href="#">二级菜单</a><a href="#">二级菜单</a><a href="#">二级菜单</a></div></li></ul></body>

3、交集选择器：div 标签下的类名为aa下的

<head><title>交集</title><style type="text/css">div.aa {color: red;}</style>
</head>
<body><div>交集选择器</div><div class="aa">交集选择器</div><p>交集选择器</p><p class="aa">交集选择器</p>
</body>

4、并集选择器：用逗号隔开，适合于相同样式集体声明。

<head><title>并集</title><style type="text/css">div, .aa, span {color: red;}</style>
</head>
<body><div>并集选择器</div><p  class="aa">并集选择器</p><span>并集选择器</span><h1>并集选择器</h1><a href="#">并集选择器</a></body>

5、伪类选择器：下面顺序不能换位置。

a:link 未访问过的链接

a:visited 已访问过的链接

a:hover 鼠标经过链接的样子

a:active 鼠标按下的样子

CSS字体样式：

font-size ：16px; 字体大小

font-family : "微软雅黑" ， Arial ; 中文和字体名中包含空格或特殊字符则需要加引号。根据本地浏览器已有字体依次选择，都未找到，使用默认字体。建议使用字体Uniccode。

font-weight : bold / 700 ; 字体加粗。

normal / 400 ; 正常字体。建议用数字。

font-style : italic / normal 字体风格斜体/正常

字体连写 font : style weight size/line-height family;

font : { 400 20px "微软雅黑" } 必须按顺序，必须保留font-size和font-family。

CSS文本外观属性：

color : red / #FF0000 / rgb(255,0, 0) 文本颜色

line-height : 24px; 行高

text-align: left / center / right 文字水平对齐方式

text-indent : 2em；中文段落首行缩进, 1em就是一个字的距离

text-decoration : none / underline / line-through 装饰线无 / 下划线 / 贯穿线

line-height : height 设置行高=自身高度值

开发者工具（chrome）

排错---F12

背景颜色：

background-color: #000;

背景图片：

background-image: url(../images/11.jpg);

background-repeat: no-repeat;不平铺，只显示一张图

background-repeat: repeat; 平铺，在一定尺寸内复制图片（默认）

background-repeat: repeat-x; 横向平铺

background-repeat: repeat-y; 纵向平铺

背景位置：

background-position: right top; 右上角

background-position: center ; 居中

background-position: 50 -50; 只显示在盒子里边，超出盒子不显示；

background-image: url(../images/11.jpg);

背景复合属性：属性不分前后顺序

background:pink url(../imgaes/11.jpg) no-repeat center;

img标签和背景图片的区别：

img 标签是一个标签，不设置宽高默认会以原尺寸显示，用来实现比较重要的图片

背景图片需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

元素（标签）显示模式：

块级元素：

独占一行；宽度默认是父元素的宽度，高度默认由内容撑开；可以设置宽高。

行内元素：

一行可以显示多个；宽度和高度默认由内容撑开；不可以设置宽高。

行内块元素：

一行可以显示多个；可以设置宽高。

元素模式转换：

display : block; 转换成块元素

display : inline-block; 转换成行内块元素

display : inline; 转换成行内元素

CSS特性：

1、继承性：子元素有默认继承父元素的特点。

文字控制属性都可以继承。color、font-style、font-weight、text-indent、.（不是控制文字的都不能继承）。注意：a标签的color会继承失效；h系列标签的font-size会继承失效。

2、层叠性：

（1）给同一个标签设置不同的样式--样式会层叠叠加--会共同作用在标签上

（2）给同一个标签设置相同的样式--样式会层叠覆盖--写在最后的样式会生效

注意--当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {display: inline-block;  转换为行内块width: 50px;height: 50px;background-color: red;   背景颜色color: #fff;    文字颜色text-decoration: none;text-align: center;   文字水平居中line-height: 50px;  文字垂直居中}a:hover {background-color: yellow;   鼠标放置转黄色}</style>
</head>
<body><a href="#">导航1</a><a href="#">导航2</a><a href="#">导航3</a><a href="#">导航4</a>
</body>
</html>

CSS布局

优先级：

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式。

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 <！important

!important 写在属性值的后面，分号的前面

!important不能提升继承的优先级，只要是继承优先级最低

不建议使用

权重叠加计算

如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效。

第一级：行内样式个数；第二级：id选择器个数；第三级：类选择器个数；第四级：标签选择器。（0，0，0，0）位置对应四个级，个数多权重高。如果数字相同，比较层叠性，排在下面的优先。

盒子模型

1、页面中的第一个标签都可以看做是一个“盒子” ，通过盒子的视角更方便的进行布局。

2、浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象称之为盒子。

CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成。

边框：border 属性

border : 1px solid red; 宽度 / 实线 / 红色边框会撑大盒子

border - left /right / bottom / top

新浪导航

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新浪导航</title><style>.box {height: 40px;border-top:3px solid #ff8500 ;border-bottom: 1px solid #edeefe;}.box a {display: inline-block;width: 80px;height: 40px;color: #4c4c4c;text-align: center;text-decoration: none;line-height: 40px;font-size: 12px;}.box a:hover {background-color: #edeefe;color: #ff8400;}</style>
</head>
<body><div class="box"><a href="#">新浪</a><a href="#">新浪</a><a href="#">新浪</a><a href="#">新浪</a></div>
</body>
</html>

内边距： padding 也会撑大盒子

width=width-border -padding

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内边距padding</title>
</head><style>div {width: 300px;height: 300px;background-color:pink;padding:20px;  4个方向的值都是20pxpadding:10px 20px 30px 40px   上右下左padding: 10px 20px 30px;上，左右，下padding: 10px 20px;   上下，左右}</style><body><div>内边距</div>
</body>
</html>

padding 自动内减

box-sizing : border-box ; 加这一行代码，浏览器会自动计算多余大小，自动在内容中减去。

margin : 外边距，写法与padding 一致。

清除默认内外边距：

* {

padding : 0 ;

margin : 0;

}

版心居中

margin : 0 auto ;

新闻列表：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.new {width: 500px;height: 400px;border: 2px solid #ccc;margin: 50px auto;padding: 40px 30px 0;}.new ul {list-style: none;}.new a {text-decoration: none;}.new h2 {border-bottom: 1px solid #ccc;font-size: 30px;padding-bottom: 9px;line-height: 30px;}.new li {border-bottom: 1px dashed #ccc;padding-left: 28px;height: 50px;line-height: 50px;}</style>
</head>
<body><div class="new"><h2>最新文章/New Articles</h2><ul><li><a href="#">北京招聘网页设计，平面设计，php</a></li><li><a href="#">jquery世界来临</a></li><li><a href="#">网页设计师的梦想</a></li><li><a href="#">jquery中的链式编程是什么</a></li></ul></div>
</body>
</html>

外边距塌陷现象：

互相嵌套的块线元素，子元素的margin-top 会作用在父元素上，导致父元素一起往下移动。

解决方法：1、给父元素设置border-top或者padding-top (分隔父子元素的margin-top)

2、给父元素设置overflow : hidden

3、转换成行内块元素

4、设置浮动

行内元素padding 、margin 垂直位置无法生效问题：

增加行高：line-height

结构伪类：

E：first - child { } 匹配父元素中第一个子元素，并且是E元素 li : first - child { }

E：last - child { } 匹配父元素中最后一个子元素，并且是E元素 li : last - child { }

E : nth - child(n) { } 匹配父元素中第n个子元素，并且是E元素 li : nth - child(3) { }

E : nth - last - child(n) { } 匹配父元素中倒数第n个子元素，并且是E元素 li :nth-last- child(2) { }

通过 n 可以组成常见公式

偶数 2n、even

奇数 2n+1、2n-1、odd

找到前5个 -n+5

找到从第5个往后 n+5

伪元素（伪标签）：

由CSS模拟出的标签效果，一般页面中的非主体内容可以使用伪元素。

:: before 在父元素内容的最前添加一个伪元素

:: after 在父元素内容的最后添加一个伪元素

必须设置content 属性才能生效；默认是行内元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪元素</title><style>.khb {width: 100px;height: 100px;background-color: pink;}.khb::before {content: '大';display: inline-block;width: 50px;height: 50px;background-color: blue;}.khb::after {content: '端';}</style>
</head>
<body><div class="khb">前</div>
</body>
</html>

标准流：

又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。

浮动：

用来网页布局。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动</title><style>div {width: 100px;height: 100px;}.one {background-color: pink;float: left;}.tow {background-color: blue;float: right;}</style>
</head>
<body><div class="one">one</div><div class="tow">tow</div>
</body>
</html>

浮动特点：

1、浮动元素会脱离标准流，在标准流中不占位置，相当于飘在空中；

2、浮动元素比标准流高半个级别，可以覆盖标准流中的元素（文字无法覆盖）；

3、浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动；

4、浮动元素有特殊的显示效果----一行可显示多个、可设置宽高。

CSS书写顺序 : 浏览器执行效率更高

1、浮动 / display

2、盒子模型 margin border padding 宽高背景颜色

3、文字样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米产品--左右结构</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.box {margin: 0 auto;width: 1226px;height: 614px;background-color: pink;}.left {float: left;width: 234px;height: 614px;background-color:#800080;}.right {float: right;width: 978px;height: 614px;background-color: green;}ul {list-style: none;}.right li {float: left;margin-right: 14px;margin-bottom: 14px;width: 234px;height: 300px;background-color: skyblue;}.right li:nth-child(4n) {margin-right: 0;      /*第4个和第8个无右边距 */}</style></head>
<body><div class="box"><div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>导航----浮动</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.nov {margin: 50px auto;width: 640px;height: 50px;background-color: pink;}.nov li {float: left;list-style: none;}.nov li a {display: inline-block;text-decoration: none;text-align: center;line-height: 50px;width: 80px;height: 50px;color: #fff;}.nov li a:hover{background-color: green;}</style>
</head>
<body><div class="nov"><ul><li><a href="#">链接</a></li><li><a href="#">链接</a></li><li><a href="#">链接</a></li><li><a href="#">链接</a></li><li><a href="#">链接</a></li><li><a href="#">链接</a></li><li><a href="#">链接</a></li><li><a href="#">链接</a></li></ul></div>
</body>
</html>

清除浮动

含义：清除浮动带来的影响。

如果子元素浮动了，此时子元素不能撑开标准流的块级父元素。子元素浮动后脱标，不占位置。需要父元素有高度，从而不影响其他网页元素的布局。

方法：1、直接设置父元素高度；

2、在父元素内容的最后添加一个块级元素，给添加的块级元素设置样式clear：both 。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动两种方法</title><style>.top {width: 1000px;/* height: 300px; */background-color: pink;margin: 0 auto;}.bottom {height: 200px;background-color: skyblue;}.left {float: left;width: 200px;height: 300px;background-color: #ccc;}.right {float: right;width: 790px;height: 300px;background-color: blue;}.clearfix {clear: both;}</style>
</head>
<body><div class="top"><div class="left"></div><div class="right"></div><div class="clearfix"></div></div><div class="bottom"></div>
</body>
</html>

3、单伪元素清除法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动两种方法</title><style>.top {width: 1000px;/* height: 300px; */background-color: pink;margin: 0 auto;}.bottom {height: 200px;background-color: skyblue;}.left {float: left;width: 200px;height: 300px;background-color: #ccc;}.right {float: right;width: 790px;height: 300px;background-color: blue;}.clearfix::after {content: "";display: block;   /*伪元素为行内元素，转成块元素*/clear: both;}</style>
</head>
<body><div class="top clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>
</body>
</html>

4、给父元素设置 overflow:hidden

本文发布于:2024-02-03 06:45:55，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170691395549329.html

上一篇：黑马前端三大件

下一篇：坐拥两大国字头超算中心广东大数据产业“近水楼台”

标签：

留言与评论（共有 0 条评论）