HTML
html5基础
网页:
网站是指在因特网上根据一定的规则,使用html等制作的用于展示特定内容相关的网页集合
网页是网站中的一页,通常是html格式的文件,通过浏览器来阅读
网页是构成网站的基本元素,由众多元素构成
html指的是(hyper text markup language)超文本标记语言是一种用来描述网页的语言
超文本:
它可以加入图片,声音,动画,多媒体等内容
它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接
web标准是由w3c组织和其他标准化组织指定的一系列标准的集合
主要由三部分组成:结构,表现,行为
结构 主要是html
表现 主要是css
行为 交互效果 javascript
三者相互分离
html语法规范
所有的标签都得放在双标签<>里面
比如说<html> </html>结束标签前面加/
单标签少见
标签的关系:
包含关系和并列关系
<html>
<title> </title>
<hand> </hand>
</html>
<html> </html>
html的标签 是页面中最大的标签
叫做根标签
<head> </head>
文档的头部 ,在head标签中我们必须要设置的标签是title
.<title>.</title>
文档的标签让页面拥有一个属于自己的网页标签显示在网页上面
<body> </body>文档的主题 元素包含文档的所有内容,网页的内容基本都是放在body里面的
在vscode里面打一个!加tab键就能完成网页的主体
vscode的快捷键
shift alt +下箭头快捷复制多行
ctrl +d可以选择多个相同的单词
ctrl alt + 上下箭头可以选择多个光标去添加
ctrl + h选择修改全部文字
ctrl + g快速定位到某一行
shift + alt +鼠标光标选择 选择多部分区块
ctrl - + 修改字体大小
网站开发工具
.<!DOCTYPE>文档类型的声明标签,告诉浏览器这个页面采取的是html5版本来显示页面
lang语言种类
en英语
zh-CN中文
字符集character set
在<head>标签内通过<meta>标签的charset属性来规定html文档使用的字符编码
.<meta charset = "UTF-8">
标签语义,标签的含义,在合适的地方添加合适的标签可以让页面结构更清晰.
标题标签
.<h1> - <h6>
.<h1>表示是一级标题
标题独占一行
由大到小依次减小,从重到轻随之变
段落标签
.<p>
把html分割从多个段落 会更具浏览器的大小自动换行
换行标签
单标签遇到强制换行
文本格式化标签
粗体,斜体,下划线
粗体 <strong> 或者 <b>
斜体 <em> 或者<i>
删除线<del> 或者<s>
下划线<ins>或者<u>
.<div>和<span>没有语义,是一个盒子用来装内容的 div大盒子一行只能放一个div标签
span小盒子一行可以放很多个,多个span可以横着放置
图像标签
<img src="图片的地址"/ >单标签
src = "图片地址"
src是<img>标签的必要属性:
alt 替换文本 如果图片显示不出来的时候显示的就是alt的文本
title 提示文本,就是鼠标移到图片上显示的文字
width 图像的宽度
height 图像的高度
broder 图像的边框粗细
图像属性写在标签后面,属性没有顺序之分,属性通过键值对来写
文件夹的第一层是根目录
路径
绝对路径
引用文件所在的位置位基础参考,而建立出的目录路径
同一级路径 直接src=图像名字
下一级路径/ src=下一极文件名/图像名字
上一级路径../ src = ../图像名字
相对路径 从盘符开始直接到图像的路径
超链接标签
<a href="跳转目标" target = "目标窗口的弹出方式">文本或者图像 <./a>
href用于连接目标的url地址
target 用于指定连接页面的打开方式 下划线self为默认值会把外部连接在选择这个网页打开,下户线blank为在新窗口打开方式,原来的页面还存在
外部连接
想要外部网页的地址
内部连接
网页间的相互连接,只需要内部网站的文件名
空链接 "#"来表示空链接
下载链接 href的对应的值是.exe或者是.zip文件点击链接就是下载文件
网页元素链接把img标签放在a标签内部就可以实现图片跳转
锚点链接:
可以在href属性中设置属性为"#名字"的形式,如<a href="#two"> 第二集<./a>
在下面写一个id="名字"就可以直接跳转到id这个锚点这边
注释
<!--开头-->注释里面的文字快捷键ctrl + /
特殊字符
表格标签
表格可以显示,展示数据,使得结构更清晰
.<table> <tr>
<th> </th>
<td> </td> </tr> </table>
table是定义表格的标签
tr标签用于定义表格的行,必须嵌套在table里面
td用于定义表格中的单元格,必须嵌套在tr里面
th是表头功能标签,位于表格第一行,文字会加粗显示
下面表格属性得写在table里面
align 属性值 left,center,right规定表格相对周围元素的对其方 式
broder 属性值1或"" 规定表格单元是否拥有边框默认为"",没有 边框
cellpadding像数值 规定文字距离边框的距离,默认1像素
cellspacing 像数值 规定单元格与单元格之间的空白,默认2像素
width 像数值或百分比 规定表格的宽度
heigth 像数值或百分比 规定表格的高度
.<table align="center" broder="1" cellpadding="20" cellspacing ="" >
表格结构标签
把表格分成两部分<thead>表格的头部区域,<tbody>表格的主题区域,所有的标签都得放在table里面
合并单元格
跨行合并rowspan="合并单元格的个数"
跨列合并clospan="合并单元格的个数"
目标单元格
跨行:最上侧单元格为目标单元格,写合并代码
跨列L最左边单元格为目标单元格,写 合并代码
三部曲
1.先确定是跨行还是跨列
2.找到目标单元格,写上合并方式 = 合并单元格的数量 如<td clospan ="2"> </td>
3.删除多余的单元格
列表标签
列表是用来布局的
列表整齐整洁有序,分为有序列表,无序列表,自定义列表
无序列表
.<ul> <li> <li> </li> </li> </ul>
li里面的东西是没有顺序的是并列的
ul里面只能放li标签
li里面可以放任何元素
有序列表
.<ol> <li> </li> </ol>
ol里面只能放li标签
li里面可以放任何元素
自定义列表
.<dl> <dt> <dd> </dd> </dt> </dl>
dl标签定义列表
dt是列表的头,定义项目,名字
dd是列表的内容,描述每一个项目的名字
dl只能包含dd和dt
dt和dd一般是一个dt对应多个dd,他们两个是并列关系
表单标签
注册账号的时候就可以用表单标签,所有可以通过表单标签来收集用户的信息.
表单由表单域,表单控件,和提示信息三部分组成
表单域
.<form action="url地址" method = "提交方法" name = "表单域名称">会把它的范围里面的表单信息数据送到服务器 </form>
action url地址,用于指定接受并出路表单数据的服务器url地址
method get/post 用于设置表单数据的提交方式
name 名称 用于指定表单的名称,以区分同一页面中的多个表单域
表单控件(表单元素)
input(输入表单元素)用于用户输入用户信息
<input type="属性值"/>是单标签
用户名:<input type="text">
性别:男<input type="radio"> 女<input type="radio">
多个单选框或者复选框得有同一个name才能实现单选的效果
checked按钮可以实现默认勾选
submit提交表单元素给服务器
reset按钮可以还原表单元素的初始内容
file可以打开文件的选择器,用来上传文件
<label>标签为input元素定义的注释
用于绑定一个表单元素,当点击<label>标签内的文本是,浏览器会自动讲光标转到或者选择对应的表单元素上,增加用户的体验
<label for="sex">男</label>
<input type = "radio" name = "sex" id ="sex"/>
for对应的属性要和id属性一样
比如说选择性别,就可以按男而不需要刻意的去按标签
select下拉选择列表
.<select><option>选项1</option> 在option里面selected="selected"默认选项 </select>
textarea文本域元素
用户输入的内容较多的情况下,就用textarea
.<textarea> 文本内容 </textarea>
css3基础
cascading style sheets层叠样式表
css主要是用来美化网页的,布局页面的
css主要用于设置文本内容(字体,大小,对齐方式等),图片的外形以及版面的布局和外观显示样式
css写在 <style>标签类名放在head类名
.<style> 选择器{样式}
p {
color: red;
属性:属性值;
}
</style>
格式要求: 后面留一个空格
选择器和 {}之间也要保留一个空格
基础选择器
标签选择器,就可以把页面所有的相应标签选择出来进行装饰
如果想要差异化选择不同的标签,单独选择一个或者某几个标签,可以使用类选择器
.类名 {
属性: 属性值;
}
.red {
color: red;
}
.<div class='red'> 变红色 </div>
长名或者词组可以使用中横线-来为选择器命名;
尽量使用英文字母,不使用纯数字,中文.
多类名:我们可以给一个标签指定多个类名,从而达到更多的选择目的
在class类名写多个类名,中间通过空格分隔
可以把共性的部分写在一个类里面通过多类名进行传递,便于维护和修改
id选择器
#id名 {
属性1: 属性值1;
....
}
#nav {
color: red;
}
把id为nav元素的内容改为红色
样式通过#定义,结构id调用,id只能调用一次,类选择器可以多次使用
通配符选择器
通过*定义,表示选取页面中所有的标签
字体属性
font-family: 字体;
各种字体之间通过英文的逗号,隔开
多个字体就会从第一个开始,如果浏览器有这个字体就运用,如果没有就跳到下一个字体
常见字体"Microsoft YaHei",tahoma,arial,'hiragino Sans GB';
font-size:字的像素大小
font-size: 12px;(px是像素的意思 )
标题标签是特殊的,想要单独指定文字大小
字体粗细
font-weight: bold;
normal,默认 bold粗体,700 加粗,直接决定加粗或变细的效果normal和数字400等价bold和数字700等价.
文字样式 font-style :normal正常的 italic 斜体
多个font字体设置,按照
font: font-style font-weight font-size font- family;格式来写
font: italic 700 16px 'Microsoft yahei';
可以节省代码
不需要设置的可以省略取默认值,但是font-size和font-family属性必须保留
font: 20px 'Microsoft yahei';
文本属性
定义文字的外观
color 定义文本的颜色 可以用red,green这些来定义最基本的颜色
通过十六进制或者rgb代码来设置高级的颜色,开发中常用
对齐文本
text-align用于设置元素内文本的水平对齐方式
默认left左对齐,right右对齐,center居中对齐
text-decoration 装饰文本,可以给文本添加下划线,删除线,上划线等
none 默认值,没有装饰线,underline 下划线overline 上划线 line- through
链接默认有下划线,可以通过这个来取消这个默认的下划线
文本缩进
text-indent 通常是段落的首行缩进
text-indent: 2em;
建议使用em单位,em是一个相对单位,是相对于当前文字大小的距离
行间距分为:上间距,文本高度,下间距
line-hight控制行间距,控制的是行高(上下行间距)
三种样式表
内部样式表(嵌入式)
把css写在html内部,单独放在style标签里面,style一般放在head标签里
通过这种方式,可以方便控制当前页面中的元素样式设置
代码结构清晰,但是样式和结构并没有完全分离
行内样式表(行内式)
在元素标签内部的style属性中设定css样式.适用于修改简单样式
.<div style= "color: red;font-size: 12px">
青春不常在,抓紧谈恋爱</div> 外部样式表(链接式)
样式单独写在css文件中,之后把css文件引入html页面中使用
1.新建一个后缀名为.css的样式文件,把所有css代码放入此文件中
2.在html页面中,使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
.<hr>水平线标签单标签
chrome 调试工具
按f12或者右键按检查就可以打开调试工具
ctrl+滚轮可以调整开发者工具代码大小
左边是html元素结构,右边是css样式
右边css样式可以改动数值和查看颜色
ctrl+0复原浏览器大小
点击元素,如果右侧没有样式引入,极有可能是类名或者样式引入错误
如果有样式,但是样式前面有黄色感叹号,则是样式属性书写错误
Emmet语法
使用缩写提高html/css的编写速度
1.快速生成html语法
生成标签直接输入标签名按tab键即可
如果要生成多个相同的标签 加上* 如div*3 再按tab键就会生成三个div标签
如果有父子级标签 可以使用 > 如 ul>li 再按tab键就可以了
兄弟关系的标签 使用+就行 如 div+ p 再按tab键
生成带有类名或者id名字的,直接写.demo 或者 #two tab键就可以了
.nav + tab键生成带 class="nav" 的标签,默认是div形式
生成别的标签如p 通过 p.nav +tab键
#banner +tab键生成带 id="banner" 的标签
如果生成的div类名是有顺序的,可以使用自增符号 $
.demo$ 中间的$就是默认的序号排序,从1开始,配合*来创建
如果想要再生成的标签内部写内容可以用{}来表示
如 div{你好} 就会生成.<div>你好</div>
2.快速生产css语法
text-align: center
类似于这个 直接tac＋tab就行
我们只需要写它的首字母就行
复合选择器
建立在基础选择器上,对基础选择器进行组合形成的
复合选择器可以更准确,更高效的选择目标元素
常用的复合选择器包括:
后代选择器
又称为包含选择器,可以选择父元素里面的子元素,器写法就是把外层标签写在前面,内存标签写在后面,中间用空格分隔.当标签发生嵌套时,内层标签就成为外层标签的后代.
如我们要修改ol 里面的li标签里面的东西,我们就再style里面
写ol li {} 就可以只改变ol 里面的li标签
元素1 元素 2 {样式声明}元素1父级,元素2是子级也可以是孙子级,只要是元素1的后代就可以
子代选择器
子代选择器只能选择作为某元素的最近的一级子元素
元素1>元素2 {样式声明}
并集选择器
可以选择多组标签,同时为他们定义相同的样式
div,
p {}这种写法就叫做并集选择器通过英文,逗号分割,竖着写
伪类选择器
用于向某些选择器添加特殊的效果
书写时用:表示
链接伪类选择器
a:link 选择所有未被访问过的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接(鼠标按下未松开的链接)
注意事项 按照lvha的顺序进行书写
a链接再浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
focus 伪类选择器
用于选取获得焦点的表单元素,焦点就是光标一般情况input标签类表单元素才能获取
css的元素显示模式
网页的标签很多,再不同的地方会用到不同的标签,了解他们的特点可以更好的布局我们的网页
html一般分为块元素和行内元素两种类型
块元素
h1~6,div,ul,ol,li等
特点:独占一行,高度宽度外边距一级内边距都可以控制,宽度默认是容器(父级宽度).是一个容器或者盒子,里面可以放行内或者块内元素
文字类的元素内不能使用块级元素
.<p>标签里面不能放块级元素
还有h1~h6
行内元素
a,strong,b,em,i,del,s,ins,u,span
相邻的内元素再一行上,一行可以显示多个
高,宽直接设置是无效的.
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其它行内元素
链接里面不能再放链接
.<a>里面可以放块类元素,但是把a转换成块级模式最安全
行内块元素<img/>,<input/>,<td>同时具有行内元素和块元素的特点
和相邻的行内块元素放一行上,但是他们之间会有空白缝隙,一行可以显示多个,默认宽度就是它本身内容的宽度,高度,行高,外边距都可以控制
元素显示模式的转换
比如说增加链接<a>的触发范围
diaplay:block;写在style里面,转换成块类元素
display:inline;换成行内元素
displau:inline-block;转换成行内块元素
snipaste截图工具,f1截图,同时测量大小,设置箭头,书写文字等.f3左面置顶,点击图片alt可以取色,esc取消图片显示
单行文字垂直居中,让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中
line-height: ;属性值和height:属性值;一样
css背景
背景颜色,图片,平铺,图片位置,图片
background-color:颜色值;默认是transoarent透明的;
background-image: url(地址);非常便于控制位置
background-repeat: repeat|no-repeat|repeat-x|repeat-y;默认是repeat平铺的
背景图片会压住背景颜色
background-position:x y;属性改变图片在背景中的位置
如果xy都是方位名词,则两个值前后顺序无关
如果只指定了一个方位名词,另一个省略,则第二个值默认居中对齐
参数也可以是精确单位,第一个肯定是x坐标,第二个是y坐标
如果只指定一个值那就是x坐标,另一个默认居中对齐
也可以是混合单位,得记住第一个值是x坐标,第二个值是y坐标
背景图像固定
background-attachment: scroll |fixed 默认是滚动的
也可以和前面font一样
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
按照这个顺序来写数值
background:black url() repeat fixed center top;
背景色半透明,可以透过盒子看到后面的内容
background: rgba(0,0,0,0);最后一个参数是alpha透明度
范围是0~1
让盒子背景色半透明,盒子内容不受影响
css的三大特性
重叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖另一个冲突的样式,重叠性主要解决样式冲突的问题
样式冲突:就近原则,那个样式离结构近,就执行哪个样式
样式不冲突的部分就不会层叠
继承性
子标签继承父标签的某些样式,text-font-line-这些元素开头和color元素都可以让子类继承与父类
特殊:行高的继承,行高也可以不跟单位,如 12px/1.5
1.5代表当前文字大小的1.5倍
优先级
同一个元素指定多个选择器,就会有优先级的产生
选择器相同,执行层叠行
不同的话通过选择器权重执行
继承或* < 元素选择器 <类选择器,伪类选择器<id选择器<行内选择器 style=""<!important 重要的
元素选择器,就是选择全部的一个标签
权重叠加 如果是复合选择器,就会进行权重叠加
页面布局三大核心:盒子模型,浮动,定位
盒子模型
网页布局过程
1.先准备号对于的网页元素,基本都是盒子box
2.利用css设置好盒子样式,然后摆放到对应位置
3.往盒子里面装东西
盒子模型就是把html页面中的布局元素看作一个矩形的盒子
border边框,content内容,padding内边距,margin外边距
边框broder:边框粗细,样式,颜色
broder : broder-width | broder-style | broder-color
broder-style 默认是solid实线边框
简写方式 broder: 1px solid red;三个没有顺序之分
边框可以分开写如border-top: 1px solid red;表示只设定上边框
表格的细线边框
broder-collapse 控制相邻单元格的边框
broder-collapse:collapse ;表示相邻边框合并在一起
边框会影响盒子的实际大小,也就是边框是加在盒子外面的,盒子大小不包括边框,加入了边框就会使得盒子实际大小偏大
内边距
padding边框和内容的距离
padding-left|right|top|buttom
padding: 5px;一个值代表上下左右都是5个像素
padding: 10px 5px;两个值代表上下10个像素 左右5个像素
padding:5px 10px 20px;三个值代表上5像素左右10像素下20像素
padding:5px 10px 20px 30px;四个值代表上5像素,右10像素,下20像素,做30像素,顺时针来看
padding也会影响盒子的实际大小也会使得盒子实际变大
合理使用padding就可以让字数不同的盒子大小适合
如果盒子没有指定weight,盒子就和浏览器一样宽这时我们就可以使用padding的适合不会撑开盒子
外边距margin
设置外边距,就是盒子和盒子之间的距离
margin-left|right|top|bottom
margin简写方式和padding一模一样
外边距可以让盒子水平居中显示,得满足两个条件
1.盒子必须指定了宽度(weight)
2.盒子左右的外边距设置为auto就行
但是对于行内元素和行内块元素无效,对于行内元素和行内块元素使用text-align就行
嵌套块元素垂直外边距的塌陷
对于两个嵌套的块元素,父元素右上边距同时子元素也有上边距,此时父元素会塌陷较大的外边距值
也就是子元素上边界实际上作用在了父元素身上
解决方法:给父元素定义一个上边框|给父元素定义内边距|个父元素添加overflow:hidden(推荐)
清楚内外边距
如ul有默认40像素的内边距,body有默认8像素的外边距,默认值可能不同
*{
margin: 0;
padding: 0;
}
就能全部修改
切图工作在ps里面完成
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
