html是什么 html（Hypertext Markup Language）—— 结构 超文本 标记 标签 <> 标签对 单标签 在标签中间—— 标签名 语言
css
凡是写在标签名后面的都是标签的属性
可以自动刷新浏览器
属性名称 = “属性值”
border
<!--
border
边框的粗细（宽度）
边框的样式 solid dotted dashed
边框的颜色
英文单词 red
十六进制 #8c8c8c
rgb() red green blue
-->
border 区域会不会显示背景图(会显示)
<style>
.box{
width:300px;
height:200px;
border:10px d #0c0c0c;
background: url("img/14.jpg") repeat-y;
margin:40px 30px 20px 10px;
}
</style>
</head>
<body>
<p class="box"></p>
</body>
border-color 边框颜色
border-style 边框样式
border-width 边框宽度
border-top
border-top-color
border-top-style
border-top-width
border-bottom-style: dashed; dashed 虚线 dotted 点线
background 参数不受顺序影响
背景色 background-color
背景图 background-image
背景图平铺 background-repeat
1: repeat 平铺（默认值）；
2: no-repeat 不平铺
3: repeat-x 横向平铺
4： repeat-y 纵向平铺
背景图定位 background-position
背景图定位 如果只给X轴的值(一个值) 那么Y轴会默认center
第一个值 x轴 （num center left right）
第二个值 y轴 （num center left right）
背景图是否滚动 background-attachment
fixed 固定
位置是以浏览器的可视区域来定位
不会随着页面的滚动而改变自身的位置
scroll 滚动
位置是以容器来定位
会随着页面的滚动而改变自身的位置
- 背景图背景色
background: #0b9380 url(img/email.png) no-repeat 0 0 fixed ; 颜色写在前面
font
文字复合样式
font: bold italic 50px '宋体';
font:
第一二个值（文字着重和文字样式）
第三个值 font-size( 文字大小 )
第四个值 font-family( 文字字体 )
font-weight
1: bold 加粗
2: normal (正常，不加粗) 默认值
3: 100 -700
4: border(比较级)
相对于父级更粗一点，并且只有两个状态，一个是正常（normal）一个是加粗 (bold)
文字大小 font-size
文字样式 font-style
italic(倾斜)
normal（正常）
font-family: ‘宋体’,’Arial’, “微软雅黑”,’microsoft yahei’;
文字颜色 color
文本对齐方式 text-align
: letf 左对齐
: right 右对齐
: center 居中对齐
首行缩进 text-indent
<style>
#box{
border:1px solid #0b9380;
width:400px;
font-size:44px;
text-indent: 2em;
}
</style>
<body>
<p id="box">
邮件地址
</p>
<!--
px 像素
em 相对单位
text-indent
文字缩进
-->
</body>
text-decoration 文本修饰
<style>
text-decoration:underline;
<style>
<!--
text-decoration 文本修饰
underline 下划线
line-through 中划线
overline 上划线
-->
文字间距
letter-spacing字母间距
word-spacing 单词间距（是以空格为解析单位）
强制不换行 white-space
white-space:
nowrap 不换行
normal 正常
padding
padding 内边距 内填充
占位宽 border padding width margin
<!--
padding:一个值
四个方向
padding:两个值
第一个值 上下
第二个值 左右
padding:三个值
第一个值 上
第二个值 左右
第三个值 下
padding:四个值
上，右，下，左
-->
margin
1.两个相邻的同级别元素上下margin会叠压
解决方案： 1: 给这个2个元素加 float
2: 转换为行内块 display: inline-block
2.margin的上下传递(父子级元素)
解决方案：01：给父级加overflow:hidden 或者 加边框 border 或者给 子级加 position:absolute;
邮件
<a href="mailto:test@miaov.com">发邮件</a>
<a href="tel:01029837492">打电话</a> // 手机端可用
1
2
标签
锚点
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
height:30px;
background: #0b9380;
color: #fff;
margin-bottom: 1000px;
}
</style>
</head>
<body>
<a href="#box1" target="_blank"></a>
<a href="#box2">box2</a>
<a href="#box3">box3</a>
<p class="box" id="box1">box1</p>
<p class="box" id="box2">box2</p>
<p class="box" id="box3">box3</p>
</body>
a标签target 属性；
_blank 在新窗口中打开被链接文档。
_self 在被点击时的同一框架中打开被链接文档（默认）。
_parent 在父框架中打开被链接文档。
_top 在窗口主体中打开被链接文档。
a 伪类；
a:link{ color: yellow; }
link 未访问过
hover 鼠标悬停
active 鼠标按下
visited 访问过后
常用标签
<header>页眉，主要用于页面的头部的信息介绍，也可用于板块头部</header>
<nav>导航 （包含链接的的一个列表）</nav>
<footer>页脚 页面的底部 或者 版块底部</footer>
<section> 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节<section>
<article>用来在页面中表示一套结构完整且独立的内容部分</article>
<aside>侧边栏、广告</aside>
<time>用来表现时间或日期</time>
<h1>这个是h1标签</h1>
<h2>这个是h2标签</h2>
<h3>这个是h3标签</h3>
<h4>这个是h4标签</h4>
<h5>这个是h5标签</h5>
<h6>这个是h6标签</h6>
<p>这个是p标签</p>
<p>段落</p>
<strong>强调</strong>
<b>强调</b>
<em>强调</em>
<ul>
</ul>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<dl>
<dt>列表头</dt>
<dd>列表项</dd>
<dd>列表项</dd>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
<mark>h1标签在一个页面上最好只出现一次 并且，用在logo身上</mark>
选择器
群组选择器 .name，span，em
包含选择器 .name span em
通配符 选中页面上所有的标签 *
id 选择器
class 选择器
选择器 优先级 style > ID > class > 标签
css_reset 清除默认样式
有默认margin的元素
body,h1~h6,p,ul,ol,dl,dd
有默认padding的元素
ul,ol
ul,ol身上都有默认的list-style
在清除的时候，可以直接清除li身上的list-style
但是要记住，默认的list-style是在谁身上产生的
块元素
块元素的特征
1,默认独占一行
2,支持所有css样式
3,没有宽度的时候，默认撑满父级的宽
行内元素
内嵌(内联、行内)的特征
1、同排可以继续跟同类的标签(一行可以显示多个同类型的标签)
2、内容撑开宽度(所有的标签都是内容撑开高度)
3、不支持宽高
4、不支持上下的margin
5、代码换行被解析(解析成空格 —— 一个空格的大小)
行内块
内联块特性：
1、让块在一行显示；
2、让行内元素支持宽高；
3、没有宽度的时候内容撑开宽度
如对本文有疑问， 点击进行留言回复！！
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
我要评论
网友评论