前端三剑客:
html超文本标记语言 -->
超文本: 比普通的文本更强大更厉害.可以带图片,表格表单.音乐,视频,超链接
标记语言: 里面的代码是以标签带的形式书写.在网页显示.类似于一块块拼图
css层叠样式表 -->
美化网页内容(排版.颜色.大小.性能优化)
让网页看起来更好看,性能更好
JavaScript --> 编程语言/脚本语言 --> 主要做动态样式/前后端网页交互
学习内容: 前端三剑客 + jQuery + bootstrap
html里的代码称为标签.
标签分为两种:
1.单标签: 一般用来实现特定功能 <标签名>
<hr> 分割线
<br> 换行
<img> 图片
<link> 导入
2.双标签:一般是用来包裹内容.会有一个闭合符号/. 写在结束标签里 <标签名>内容</标签名>
a,b,p,span,strong,em,i,ul,div
网页的三大核心标签:
<html></html> : 网页的核心标签.网页内容都写它里面
<head></head> : 头标签.里面写的内容主要是给浏览器看的.网页信息.网页名字.属性设置
<body></body> : 身体标签 .给用户看的内容都写里面
写在head标签里的辅助标签:
<meta>: 元标签.主要写网页的说明信息.设置信息
<link>: 链接标签.用来连接外部文件(css)
<title>: 标题标签
写在body里的内容:
1.文本标签:
<h1> - <h6> 1-6级的标题标签
<p> 段落标签.自带换行
<span> 文本标签.没有语义性.不会换行.一般结合css加样式
<b>&<strong> 粗体标签
<i>&<em> 斜体标签
<u>&<ins> 下划线标签
2.功能标签
<hr> 分割线
<br> 换行
3.超链接a标签
a标签的作用就是可以让网页跳转到一个指定的位置
1.一个指定的网址(百度,B站,cxy521)
2.当前页面的其他位置
3.指定的文件
<a href='跳转位置'>描述文本</a>
可以通过给标签设置id.然后通过id锚点跳转到指定的位置
<a href='#memeda'>点我mua一个</a>
<p id = 'memeda'>么么哒</p>
a标签打开网页的方式可以通过target值修改(一般不用改):
1.在当前页面: _self
2.在新建页面: _blank
4.图片标签:
img的四要素
src: 图片路径
alt: 图片的描述
width: 图片的宽
height: 图片的高
<img src='图片路径' alt='图片描述'>
写案例的时候尽量用相对/网络路径
5.列表标签:
在网页里面显示一些有关联性的数据
有序/无序列表的子元素是li.内容是写在li里的.不要写在ul/ol里
ul>li -- 无序列表 -- 默认样式为黑点
<ul>
<li></li>
<li></li>
</ul>
ol>li -- 有序列表 -- 默认样式为数字.可以通过设置type属性修改
<ol>
<li></li>
<li></li>
</ol>
dl>dt>dd -- 自定义列表.没有样式.但是dd带一个缩进.
dl = 大容器
dt = 小容器
dd = 列表内容
<dl>
<dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dt>
</dl>
6.div盒子标签:
div盒子本身没有语义性.主要作用是划分网页区域
更好的实现布局: 左中右/上中下
盒子标签默认是没有宽高,颜色.是看不到的.需要开发人员设置样式才可以
width: 宽度,常用单位为像素px
height: 高度,常用单位为像素px
background-color: 背景颜色
margin: 外边距
padding: 内边距
设置盒子居中: margin 任意值 auto;
css:
层叠样式表 --> 让网页更好看,加特效做排版
html是写了个网页.css是找到网页里的内容.加特效:
1.怎么找
2.加什么样式
选择器 --> 找到标签的方式.
*: 通配符选择器.选中所有的标签
标签
标签选择器: 选中指定的标签
类名选择器: 给标签设置class类名.在样式表通过.class名 的方式指定
id选择器: 给标签设置id名. 在样式表通过 #id名 的方式指定
样式表的写法:
1.行内样式表 -- 把样式写到标签里.权重最高
2.内部样式表 -- 把样式写到head标签里的style标签中
3.外部样式表 -- 把样式写在专门的.css文件里.再通过link标签引入
文本样式:
color: 字体颜色
font-size: 字体大小
font-family: 字体
text-indent: 首行缩进
text-align: 设置内容对齐
line-height: 设置行高,文本的上下位置
font-weight: 设置粗线
font-style: 设置文本样式
背景样式:
background
background-color: 背景颜色
background-image: 背景图片 url(图片路径)
background-repeat: 背景内容是否重复
background-position: 背景位置
background-size: 背景大小 cover 等比例缩放
边框样式:
border: 1px solid #096;
border-weight: 边框粗细
border-style: 边框样式
border-color: 边框颜色
border-radius: 边框圆角
margin: 外边距
padding: 内边距
边框,内外边距都可以单独的写四个方向的值
top-上 right-右 bottom-下 left-左
比如 margin-left padding-top border-bootom
标签属性:
1.块元素(block): 独占一行.有独立的宽高地盘.默认宽度为100%,高度为内容大小. div,p,h1-h6,ul,li,ol,dl
2.行内元素(inline): 没有独立的地盘.宽高就是自身的大小.行内元素,都是挤在一起. span b img a
3.行内块元素(inline-block): 兼具了两者的优点特点
display: 类型转换
display: 类型名;
display:inline-block;
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
