文章目录
HTML认知
网页的基本组成和本质
- 网页是由文字,图片,音频,视频,超链接组成的,是网站中的一页。后缀文件是.html或者.htm
- 网页背后的本质是前端程序员的代码
- 前端的代码通过浏览器的转化(解析和渲染)成用户眼中的网页
- 浏览器是网页显示运行的平台,是前端开发的必备工具。
- 浏览器是有渲染引擎的,专门对代码进行解析渲染。
- 渲染引擎不同,导致解析相同的代码的时候的速度,性能,效果不同。所以一个页面在不同的浏览器打开可能效果也不一样。
- web标准:不同浏览器的渲染引擎不同,对于相同代码解析的效果存在差异。所以web标准分三个部分构成。
- 网站是因特网根据一定规则使用html指定的展示特定内容的网页集合。
- 浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方法和显示界面。
构成 | 语言 | 说明 |
---|---|---|
结构 | HTML | 页面元素和内容 |
表现 | CSS | 网页元素的外观和位置的页面形式 |
行为 | JavaScript | 网页模型的定义和页面交互 |
HTML初始概念
- HTML中文意思是超文本标记语言,不是编程语言而是标记语言,如果将记事本的后缀,txt改成.html,就可以在网页中打开。点击右键在记事本中打开后,可以通过下面加粗。
<strong>我爱你<\strong>
- 网页类似于一篇文章,有固定的结构,是通过特点的HTML标签进行描述的。
- 超文本是说可以加入图片,声音,动画和多媒体等等内容,超越文本限制。并且它还可以从一个文件跳到另外一个,和世界各地的主机相连(超级链接文本)。标签中有包含关系和兄弟关系。
<html>//根标签
<head>
<title>我是帅哥</title>//网页标题
</head>
<body></body>
</html>
- 按住!再按一个tab就会自动显示html的骨架。ctrl+s可以保存。Alt+B可以直接打开默认网页。注释ctrl+/。
- 标签是由< > /,英文单词或者字母组成。并且把标签<>包括起来的英文单词或者字母称为标签名
- 常见标签是由俩部分构成,需要开始和结束,俩部分包着内容。如果只需要一部分,仅仅使用单标签就可以。
- HTML的标签和标签之间可以分为俩类,一类是父子关系,或者并列关系。
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>
</head>
<body>
写代码是快乐的事情
</body>
</html>
<!DOCTYPE html>:文档类型声明,告诉浏览器使用哪种的html版本显示网页
//不是html标签,是给整个文档做声明
lang:定义当前文档的显示语言
//en:英语 zh-CN:中文 英文和中文网站都可以互写,用来起到警示作用
字符集charset:字符的集合,以便于计算机能够识别和存储文字。
<meta charset="UTF-8">
UTF-8:万国码(不会出现乱码)
- 标题标签:文字加粗,文字逐渐变小,独占一行,共六级
<h1>真好</h1>//一级标题
<h2>啊</h2>//二级标题
- 段落标签:段落之间存在间隙,独占一行
<p>好呢</p>
- 换行标签:break,只会改变行距,不改变段落距离。
<br />
- 水平线标签
<hr>
- 文本格式化标签的介绍
以下俩套语法,只是在语义上显示更加重要,并没有太多区别。
b | 加粗 |
---|---|
u | 下划线 |
i | 倾斜 |
s | 删除线 |
strong | 加粗 |
---|---|
ins | 下划线 |
em | 倾斜 |
del | 删除线 |
- 图片标签
(1)单标签,img标签需要展示对应的效果,需要借助标签的属性进行设置。
(2)src叫做属性名,‘’“叫做属性值。src”"叫做标签属性。
(3)标签里面可以有多个属性,但是标签名和属性之间要用空格隔开。属性没有先后顺序之分。
(4)
alt是替换文本。只有当图片加载失败的时候,才会加载alt中的内容。
title属性:当鼠标悬停的时候才出现的图片
width和height属性:如果只设置一个的时候,另一个也会跟着等比例缩放。只需要写一个值就行了。
border设置边框的粗细
<img src=""alt="">
(5)图像标签可以有多个属性,必须写在标签名的后面,属性之间不分顺序,必须用空格隔开。属性采用键值对的格式,key=“value”,属性=属性值。
- 路径:页面要加载图片,需要先找到对应的图片。路径也就是找东西的方法。可以分为绝对路径和相对路径。
绝对路径指的是目录下的绝对位置,可以直接到达目标的位置,通常从盘符开始的路径。包括完整的网址或者D:\等等。(可以复制网页上图片的绝对路径连入)
相对路径(常用):从当前文件开始出发去找目标文件。相对文件分为同级目录,下级目录,上级目录。图片相对于html界面的位置
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图像文件相对于html在同一级<img src="baidu.gif"> | |
下一级路径 | / | 图像文件相对于html文件的下一级<img src="images/baidu.gif"> |
上一级路径 | …/ | 图像文件相对于html文件的上一级<img src="../baidu.gif"> |
- 目录文件夹:普通文件夹。 根目录:目录文件夹的第一层
<img src="目标文件.gif">
<img src="./目标文件.gif">
<img src="文件名/目标文件.gif">//进入下一级
<img src="../目标文件.gif">//..有几层就是向下面走几层
- 音频标签
<audio src="" controls></audio>
音频格式目前支持三种:MP3,Wav,Ogg
src | 音频的路径 |
---|---|
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
---|---|
loop | 循环播放 |
- 视频标签
谷歌浏览器可以配合muted aupoplay静音播放
<video src="" controls></video>
- 链接标签(a标签,超链接,锚链接)
1.当我们不知道文件跳转到哪里的时候,可以写一个空链接href的值书写#空链接。href的作用是跳转的地址,是一个必须属性。
2.链接的target是指按照什么方式打开网页。target属性默认为_self,在当前页面中跳转,覆盖原网页。_blank在新窗口跳转,保留原网页。
3.外部链接:”http://www.qq.com"
内部链接:网站内部界面之间的相互链接(直接写网页的名称)
下载链接:如果href里面的地址是一个文件(.exe)或者压缩包(.zip),会下载这个文件。
锚点链接:当我们点击链接的时候,可以快速定位到页面的某个位置。
(设置属性值为<a href="#名字“>
)(给目标位置的标签,添加一个id属性=刚才的名字<h3 id="名字”>好啊</h3>
<a href="jieshao.html"></a>
<a href="www.zip"></a>
<a href="./目标文件">目标文件</a>
<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
HTML基础
列表
- 使用:场景(在网页中按照行显示相关联的内容,比如”新闻列表,排行榜,账单")。
特点:按照换行的方式,整齐显示内容。其目的是用来布局的,不是显示数据。
种类:无序列表,有序列表,自定义列表。 - 无序列表:比如写新闻列表
ul标签里面只允许包含li标签,直接在里面输入内容是不被允许的。li里面可以包含任意内容。
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
有序列表:比如放手机性能的排序,排名类的列表
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ol>
自定义列表:一个主标题下有好多小标题。用于对术语和名词进行解释和描述,定义列表的列表项前面没有项目符号。
dl | 表示自定义列表的整体,用于包裹dt/dd标签 |
---|---|
dt | 表示自定义列表的主题 |
dd | 表示自定义列表的针对主题的每一项内容 |
<dl>
<dt>账户管理</dt>
<dt>购物指南</dt>
</dl>
表格
用于展示显示数据,因为它可以使得数据显示的非常规整,可读性很好,不是布局的。
- table:表格整体,用于包裹多个tr
- tr:表示每行,用于包裹td
- td:表格单元格,用于包裹内容,指的是表格数据,也就是数据单元格的内容。
- 嵌套关系:table>tr>td
表格相关属性:
- th表示表头单元格,位于表格的第一行或者第一列,表头单元格中的文本内容加粗居中显示。
- 表格属性:
属性名 | 属性值 | 描述 |
---|---|---|
align | left,right,center | 规定表格相对周围元素的对齐方式 |
border | 1或者“” | 规定表格单元是否有边框,默认为“”没有边框 |
cellpadding | 像素值 | 规定单元格与内容之间的空白,默认2像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或者百分比 | 规定表格的宽度 |
- 合并单元格
- 合并单元格:
分类:跨行合并(竖直合并)跨列合并(水平合并) - 合并单元格的步骤:
(1)左上原则:如果是上下合并,只保留最上面的。如果是左右合并,只保留最左边的。
(2)跨行合并rowspan=“合并的个数”
跨列合并colspan="合并的个数“
(3)删除多余的单元格
<td rowspan="2">100</td>
border | 数字 | 边框宽度 |
---|---|---|
width | 数字 | 表格宽度 |
height | 数字 | 表格高度 |
- 为了让表格的内容结构分组,突出表格的头部(不是表头单元格),主体,底部。
thead | 表格头部 |
---|---|
tbody | 表格主题 |
tfoot | 表格底部 |
<table border="1" width="500">
<caption><strong>学生成绩单</strong></caption>
<thead>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td>100</td>
<td>好看</td>
</tr>
</tbody>
</table>
表单
- 能够使用表单相关标签和属性,实现网页中表单类网页结构搭建,比如注册页面和搜索页面。表单可以做到收集用户的信息,和用户进行交互。
- 一个完整的表单包含表单域,表单控件(表单元素),提示信息三部分
- 表单域是一个包含表单元素的区域,
<form>
会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
表单元素:
1.input输入表单元素,单标签,根据取值的不同,展示出不同的效果。
属性 | 属性值 | 描述 |
---|---|---|
name | 用户自定义 | 定义input元素的名称 |
type | ||
value(placeholder) | 用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符最大长度 |
<input type="text">
type的取值:
标签名 | type属性值 | 说明 |
---|---|---|
input | text | 文本框,用于输入文本 |
input | password | 密码框,用于输入密码 |
input | radio | 单选框,用于多选一 |
input | checkbox | 用于多选多 |
input | file | 文件选择,用于之后上传文件。定义输入字段和”浏览“按钮,供文件上传 |
input | submit | 提交按钮,用于提交,把表单域的内容送给服务器 |
input | reset | 重置按钮,用于重置 |
input | placeholder | 占位符,用于提示用户加入提示文字 |
input | button | 定义可点击按钮(多数情况下,通过javaScript启动脚本) |
<input type="file" multplay> //上传多个文件
<input type="text" placeholder="请输入用户名">
//name是表单元素名字,这里性别单选按钮必须有相同的名字name才能实现多选一
性别:<input type="radio" name="sex">男 <input type="radio" name="sex">女
name和value是每个表单元素都有的属性值,主要给后台人员使用。
name是表单元素的名字,要求单选按钮和复选框要有相同的name值。
submit | 提交按钮,提交之后给了服务器 |
---|---|
reset | 重置按钮,点击之后恢复表单默认值 |
button | 普通按钮,默认无功能,之后配合js添加功能 |
2.textarea文本域标签 双标签
场景:提供可输入多行文本的表单控件,常见于留言板评论等等。常见的cols规定了文本域的可见宽度,rows规定了文本域的可见行数。
<textarea cols="50" rows="5">
文本内容
</texyarea>
3.label标签:
<label>
标签为input元素定义标注,绑定内容与表单标签的关系。当点击这个标签的时候,浏览器会自动转到对应的表单元素上。
(法一)使用label标签包裹内容,在label标签的for属性设置对应的id属性值,然后在input里面设置相应的id.for里面的值和id里面的值要一模一样。
(法二)直接把lable绑定
<input type="radio" name="sex" id="nan"> <lable for="nan">男</lable>
<lable><input type="radio" name="sex"> 女</lable>
4.select下拉表单元素
场景:页面中有多个选项让用户选择,但是想要去节约控件,可以使用<select>
来下拉列表。
<select>
<option>选项1</option>
<option>选项2</option>
</select>
<option selected="selected">火星</option>
//默认选中项
语义化标签
没有语义化的标签:实际网页开发会用到-div和-span标签,只是一个盒子,用来装内容
div:独占一行的标签——>大盒子
span标签:一行可以显示多个——>小盒子
有语义化的标签:做手机端网页。
字符实体
网页不认识多个空格,只认识一个。若想要实现多个空格,可以添加字符实体的标签,来显示特殊的符号效果。并且有一些符号不太容易显示,所以可以使用某些标签代替。
CSS基础
基础认知
- CSS是一种重叠样式表,作用是把网页变得更漂亮。
- 写法:选择器+属性声明 (选对人,做对事)
- 位置:
<head><style></style></head>
- 引入方式:内嵌式(CSS写在style标签里面)+外联式(CSS单独写在一个.css文件夹里面 通常通过link标签在head中引入)+行内式(CSS写在标签的style属性中)
p {
color: red;
font-size: 12px;
}
//外联式在html中引入:
<link rel="stylesheet" href="css文件路径">
选择器
根据不同的需求选出不同的标签。就是选择标签的作用。
基础选择器:由单个选择器组成,包括以下四类:
- 标签选择器 ( 结构名{css属性名:属性值;} )
- 类选择器先定义再去选择 .类名{css属性名:属性值;}
注意标签上都有class属性,class的属性值称为类名.类名可以由数字,字母,下划线,中划线组成.一个标签可以有多个类名,类名之间以空格隔开。类名可以重复,一个类选择器可以选中多个标签。
样式点定义,结构类使用 一个或多个 开发最常用 - #id选择器
为标有特定id的html元素指定特定样式。
html元素中以id属性设置id选择器,css中id选择器以”#“来定义。
(1)只能调用一次,别人切勿使用。
(2)id选择器一般用于页面唯一性的元素上,经常和js搭配使用。
4.通配符选择器:找到页面中的所有标签,设置样式。
用”*“定义,选取页面中的所有元素(标签)
<style>
.red{
color:red;
}
.bb{
font-size:29px;
}
</style>
<p class="red bb">222</p>
#red{
color:red;
}
<div id="red">id选择器</div>
*{
color:red;
}
文字字体
- 文字基本格式:
1.粗细font-weight:normal(正常)加粗(bold) 纯数字(100–900的整数)
2.字体font-family:微软雅黑,宋体
(1)各种字体之间用英文,隔开
(2)每个字体加引号
3.倾斜font-style:normal,italic.
4.大小font-size:px是默认的单位,谷歌默认16px.不同浏览器显示的字号大小不一致,尽量有一个明确的大小。
5.文字的复合属性
font:style,weight,size/line-height,family;
(1)不能更换顺序。
(2)必须保留font-size和font-family俩个属性,否则font属性不起作用。
6.文字垂直居中:文字的行高等于盒子的高度。
height=line-height
font:italic 700 66px 宋体;
-
文本属性:
-
1.文本缩进 text-indent :数字px或者数字em(1em=当前标签font-size的大小)
常用于文本第一行的缩进(通常是段落的首行缩进) -
2.文本水平对齐方式text-align:可以让文本,span标签,a标签,input标签,img标签所在的盒子水平居中对齐。
left | 左对齐 |
---|---|
center | 居中对齐 |
right | 右对齐 |
- 3.文本颜色:取值可以是预定义颜色值,十六进制或者是RGB代码。
开发中最常用十六进制的颜色。
div {
color:pink;
}
- 4.文本修饰:text-decoration
underline | 下划线(常用) |
---|---|
line-through | 删除线 |
overline | 上划线 |
none | 无装饰线 |
- 5.行间距:line-height
取值:数字+px或者倍数。
1)行间距=上间距+文本高度+下间距
2)单行文本垂直居中设置文字中元素高度。line-height:1取消上下间距加粗样式。
Emmet语法
生成标签:直接输入标签名按tab即可
div*3
父子级标签:ul>li
兄弟级标签:div+p
生成带有类名或者id名的:.demo/#two(默认生成盒子)
div有顺序:自增符号$
CSS进阶
复合选择器
复合选择器是由俩个或者多个基础选择器组成的,可以准确高效选择目标元素。
后代选择器
后代选择器又称包含选择器,可以选择父类中的元素,其写法就是外层标签写在前面,内层标签写在后面,中间用空格隔开。
(可以有子代,可以有孙代)
语法:父代选择器1 子代选择器2{css语句}
结果:在选择器1中找到其包含的选择器2
div p {
color:red;
}
子代选择器
只能选最近一级的元素(亲儿子))
div>a {
color:red;
}
并集选择器
作用:同时选择多组标签,设置相同的格式。
语法:选择器1,选择器2{ css文本 }
注意:
(1)并集选择器中的每组选择器之间通过,分离。
(2)并集选择器的每组选择器可以是基础选择器或者复合选择器。
div,p,.pig li{
color:red;
}
交集选择器
选中页面中同时满足多个选择器的标签。选择器1选择器2{css}
p.box {
color:red;
}
伪类选择器
作用:选择鼠标悬停在元素上的状态
注意点:
1.伪类选择器选中的元素的某种状态。
2.任何标签都可以添加伪类。
1)链接伪类选择器:
a:linked | 选择未被访问的链接 |
---|---|
a:visited | 选择已经被访问的链接 |
a:hover | 选择鼠标指在它上面的链接 |
a:active | 选择活动链接(鼠标按下未弹起的链接) |
(2)顺序插入(LVHA)–>love hate
(3)因为a链接在浏览器中有默认样式,所以实际工作中需要给链接单独设定样式。
a:hover {
color:red;
}
2):focus伪类选择器
选取获得焦点的表单元素。
焦点就是光标,一般情况下input表单元素才能获取,因此这个主要针对于表单元素。
input:front {
back-ground:yellow;
}
背景的相关属性
- 背景颜色:background-color 取值:关键字,rab表示法,raga表示法,十六进制。背景的默认颜色是透明。
div{
background-color:pink;
}
- 背景图片:属性名background-image(bgi)
常见于logo的制作,装饰性的小图片,超大的背景图片
(便于控制位置)
div{
background-image:url(路径);
}
- 背景平铺:属性名background-repeat(bgr)
repeat | 默认水平和竖直方向都平铺 |
---|---|
no-repeat | 不平铺 |
repeat-x | 沿着水平方向平铺 |
repeat-y | 沿着竖直方向平铺 |
- 背景位置:使用背景相关属性装饰元素格式。
属性名:background-position(bgp)
取值:top left center right
(1)如果是方位名词则xy的先后顺序效果等价
(2)省略其中一个,另外一个默认居中对齐
(3)如果写的是坐标单位,第一个一定是x坐标,第二个一定是y坐标。
如果只写一个参数的话默认是x,另外一个垂直居中对齐。
(4)混合单位的使用必须有顺序
background-position:center center;
-
背景固定:background-attachment
默认是scroll,背景随着内容滚动。但是fixed可以使得背景图像固定。 -
背景相关属性的连写
1)background: color image repeat attachment position
2)可以按照要求省略。
3)在pc端,如果盒子大小和背景图片的大小一样,此时可以直接写成background: url()。
4)img标签和背景图片的区别:img用于实现比较重要的图片。 -
背景颜色半透明:background:rgba(0,0,0,0.3);
最后一个是alpha透明度,取值范围是在0-1之间。
元素的显示模式
块级元素:独占一行+宽度默认是父元素的宽度,高度默认由内容展开+可以设置宽高+是一个盒子,里面可以放行内或者块级元素。div p h系列
但是:p h等文字类标签里面不能再放div盒子
行内元素(内联元素):一行可以显示多个+宽度和高度默认由内容展开+不可以设置宽高,尺寸和内容的大小相同+行内元素内部只能容纳文本或者其他行内元素。 a span b u系列。
行内块元素:一行可以显示多个+默认宽度是它本身内容的宽度+高度行高外边距等等都可以控制。input,textarea,button,img系列。
元素显示模式转换:
属性 | 效果 | 使用频率 |
---|---|---|
display:block | 转换成块级元素 | 较多 |
display:inline-block | 转换为行内块元素 | 较多 |
display:inline | 转换为行内元素 | 极少 |
a {
width:400;
display:block;
}
块级元素一般作为大容器,可以嵌套:文本,块级元素,行内元素,行内块元素。但是p标签不要嵌套div,p,h等块级元素。
a标签可以嵌套任意元素,但是a不要嵌套a标签。
CSS特性
- 继承性
子承父业,父类的文字的控制属性都可以被子类继承,
(1)原则:如果有我就生成自己的,自己没有的才去继承。
(2)行高的继承性:行高可以跟单位也可以不去跟
body {
font:12px/1.5;
}
div {
font-size:12px;
}
//表示行高是文字大小的1.5倍即21
- 层叠性
给相同的选择器设置相同的样式,后面的属性覆盖前面的属性。层叠性解决样式冲突的问题。
原则(1):样式冲突,就近原则(哪个样式离结构近,就执行哪个样式)
后来者居上。
原则(2):样式不冲突,不会层叠 - 优先级
1当同一个元素指定多个选择器的时候,优先级高的选择器样式会覆盖优先级低的选择器样式。
2.公式:继承<通用符选择器<标签选择器<类选择器<id选择器<行内模式<!important.(谁更精准优先级越高)
选择器 | 权重 |
---|---|
继承或者* | 0.0.0.0 |
元素选择器 | 0.0.0.1 |
类选择器(伪类选择器) | 0.0.1.0 |
id选择器 | 0.1.0.0 |
行内模式 | 1.0.0.0 |
!important | 无穷大 |
div {
color:pink !important
}
note:
(1)权重是有四位数字组成的,但是不会出现进位。
(2)判断权重的时候,从左向右判断大小
3.复合选择器:权重叠加
按顺序比较行内样式的个数,id选择器,类选择器,标签选择器个数。
div ul li:0,0,0,3
.nav ul li:0,0,1,2
a:hover 0,0,1,1
.nav a:0,0,1,1
(1)权重虽然会叠加,但永远不会产生进位的问题。
(2)继承的权重是0
!important如果不是继承,则权重最高,天下第一!