HTML必须掌握知识
重要属性
id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名
style：规定元素的行内样式（CSS样式）
基本标签
| 标签 | 意义 |
|---|---|
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link/> | 引入外部样式表文件 |
| <meta/> | 定义网页原信息 |
div与span标签
div是块级标签，占一行，span不是块级标签，是行内标签不需要另起一行
基本标签
1 <b>加粗</b> 2 <i>斜体</i> 3 <u>下划线</u> 4 <s>删除</s> 5 6 <p>段落标签</p> 7 8 <h1>标题1</h1>
img标签
1 <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签（超链接）
1 <a href="http://www.oldboyedu.com" target="_blank" >点我</a>
无序列表u1标签
1 <ul type="disc"> 2 <li>第一项</li> 3 <li>第二项</li> 4 </ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
有序列表ol：
1 <ol type="1" start="2"> 2 <li>第一项</li> 3 <li>第二项</li> 4 </ol>
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
标题列表dt
1 <dl> 2 <dt>标题1</dt> 3 <dd>内容1</dd> 4 <dt>标题2</dt> 5 <dd>内容1</dd> 6 <dd>内容2</dd> 7 </dl>
标签分类
块级标签：
h1~h6
div
p
内联标签
a
img
u
s
i
b
span
嵌套原则：
块级标签能包含内联标签，但是内联不能包含内联标签
注意：p标签不能包含块级标签（包括p标签）
form表单：
用于向服务器传输数据，包含input、textarea、select、fieldset和 label标签
属性：
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
input：
input属性：
text：
<input name="name" type="text" value="小强">
“placeholder”
<input name="name" type="text" placeholder="faker" >
passworld
<p>密码: <input name="password" type="password">
所有属性如下：
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
注意：
1.checked：radio和checkbox默认被选中的项
<p>爱好: <input checked name="hobby" type="checkbox" value="basketball">篮球 <input name="hobby" type="checkbox" value="football">足球 <input checked name="hobby" type="checkbox" value="doublecolorball">双色球 </p>
2.readonly：text和password设置只读
3.disabled:不可以写，适用于input，select
<input name="name" type="text" placeholder="小强" disabled>
select标签
<select name="from1" id="s1"> <option value="bj">北京</option> <option value="sh" selected>上海</option> <option value="sc">四川</option> </select>
selected默认被选择，如下图：
<select name="from1" id="s11" multiple> <option value="bj">北京</option> <option value="sh">上海</option> <option value="sc">四川</option> </select>
multiple：布尔属性，设置后为多选，否则默认单选（需要按住ctrl）如下图：
label标签
<label> 标签为 input 元素定义标注
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
注意，p标签和label区别：
textarea多行文本
<p><textarea name="info" id="t1" cols="30" rows="10"></textarea></p>
CSS基础知识点
元素选择器
p {color: "red";}
ID选择器
#i1 { background-color: red; }
类选择器
.c1 { font-size: 14px; } p.c1 { color: red; }
通用选择器
* { color: white; }
后代选择器
/*li内部的a标签设置字体颜色*/ li a { color: green; }
儿子选择器
儿子选择器 /*选择所有父级是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; }
后面的了解一下
毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin: 5px; }
弟弟选择器
/*i1后面所有的兄弟p标签*/ #i1~p { border: 2px solid royalblue; }
分组
div,
p { color: red; }
解释：div与p同时设置为同一个样式。推荐分行写选择器,但是要注意一定要加逗号
伪元素选择器
first-letter 常用的给首字母设置特殊样式
p:first-letter { font-size: 48px; color: red; }
before
/*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; }
after
/*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; }
选择优先级：
选择器的优先级
1. 越靠近标签的优先级越高(就近原则)
2. 权重的计算
1. 内联样式1000
2. ID选择器100
3. 类选择器10
4. 元素选择器1
CSS属性！！！！
文字属性：
1. font-family 文字字体
body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } /*如果浏览器不支持第一个字体，则会尝试下一个*/
2. font-size 字体大小
3. font-weight 设置字体的字重（粗细）
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
4.color 字体颜色
rgb(255, 255, 255)
#f00
red
文本属性
1. text-align
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
2. text-decoration 给文字添加特殊效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
a { text-decoration: none; } /*去掉a超链接下划线*/
背景属性
1. background-color 背景颜色
/*背景颜色*/ background-color: red; /*背景图片*/ background-image: url('1.jpg'); /* 背景重复 repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 */ background-repeat: no-repeat; /*背景位置*/ background-position: right top; /*background-position: 200px 200px;*/
background: url("huluwa.png") no-repeat 50% 50%;
2. background-image 背景图片
边框属性
1. border
边框属性
- border-width
- border-style
- border-color
#i1 { border-width: 2px; border-style: solid; border-color: red; }
#i1 { border: 2px solid red; } /*常用写法*/
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
2. border-radius: 50%; 将边框变为圆形
display属性
1. inline
2. block 菜单里面的a标签可以设置成block 默认占满整个页面宽度
.c2 { background-color: green; display: block; width: 1000px; } <span class="c2">span</span>
3. inline-block
4. none (隐藏)
CSS盒子模型(从外到内)
1. content (内容)
2. padding (内填充) 调整内容和边框之间距离时使用这个属性
3. border (边框)
4. margin (外边距) 多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)
* { /*一般情况下按照如下设置去掉浏览器默认的设置*/ margin: 0; padding: 0; }
将弹框位于浏览器中心：
.modal { width: 600px; //我们设置的弹框的大小是：宽为600，高为400 height: 400px; background-color: white; position: fixed; //固定 left: 50%; //使我们设置的弹框左边位于浏览器左边的正中心 top: 50%; //使我们设置的弹框上边距位于浏览器上下的正中心 margin-left: -300px; //此时弹框没位于中中心，所以我们需要将浏览器向左位移宽的一半 margin-top: -200px; }
第一步：
第二步：
float(浮动)
浮动的意思是让两个块的数据能在一行显示而不是跳到下一行
例如，不加浮动的两个div：
加了浮动后：
1. 多用于实现布局效果
1. 顶部的导航条
2. 页面左右分栏
.left { width: 20%; height: 1000px; background-color: rgb(76, 77, 76); position: fixed; left: 0; top: 0; } .right { height: 100%; width: 80%; float: right; background-color: rgb(238, 237, 237); } /*(博客页面:左边20%,右边80%)*/
注意！！！： 任何标签都可以浮动,浮动之后都会变成块级 a标签float之后就可以设置高和宽
清除浮动(清除的是浮动带来的负面效果-->父标签塌陷(撑不起来))
浮动的元素脱离文档流
<head> <meta charset="UTF-8"> <title>清除浮动示例</title> <style> #d1 { border: 1px solid black; } .c1, .c2 { float: left; height: 100px; width: 100px; } </style> </head> <body> <div id="d1"> 父标签 <div class="c1">c1</div> <div class="c2">c2</div> </div> </body> </html>
通过上面代码可以知道div父标签有1px的矩形边框，但是看到效果图没有显示出来，原因是浮动的元素不能撑起父标签（没有浮动标签可以），。
解决办法如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>清除浮动示例</title> <style> #d1 { border: 1px solid black; } .c1, .c2 { float: left; height: 100px; width: 100px; } .c3 { height: 100px; <!--第一种方法，添加一个没有浮动的标签，固定一个高度，缺点就是高度固定了，不灵活--> } #d1:after { <!--第二种方法，用一个伪元素，意思是在div后面父标签添加一个无内容的，且左边没有浮动标签的东西，于是跳到了下一行，最终把父标签支撑起来了--> content: ""; clear: left; <!--左边不能有浮动--> display: block; } </style> </head> <body> <div id="d1"> <div class="c1">c1</div> <div class="c2">c2</div> <div class="c3"></div> </div> </body> </html>
.clearfix:after { content: ""; display: block; clear: both /*左右都没有浮动元素*/ }
overfloaw 文档内容太多溢出了
当内容超过了父标签所设置的边框会出现如下效果：
解决办法：
.c1 { width: 120px; height: 120px; border: 1px solid black; overflow: hidden; /*将超出的内容隐藏掉*/ }
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
position 定位属性
1. static(默认)
2. relative(相对定位 --> 相当于原来的位置)
3. absolute(绝对定位 -->相当对于定位过的前辈标签)
4. fixed (固定 --> 返回顶部按钮示例)
生成任意大小图片网站
z-index:
Z轴数值，从屏幕里到外的值,值越大，z轴值越大，放的位置在z轴上更前
1. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
2. 按照index值大小决定哪个标签放到哪个标签前面
3. z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
opacity(不透明度)
1 取值0~1
2 和rgba区别：
opacity 改变标签内所有元素的透明度
rgba 只改变背景颜色的透明度
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>透明度示例</title> <style> .c1, .c2{ height: 400px; width: 400px; color: red; } .c1 { background-color: black; opacity: 0.5; //与下面代码比较没设置背景颜色透明度，但是展现效果是，背景颜色和字体透明度都改变了 } .c2 { background-color: rgba(0,0,0,0.5); } </style> </head> <body> <div class="c1">我是有c1类的div标签</div> <div class="c2">我是有c2类的div标签</div> </body> </html>
补充:
脱离文档流的3种方式
float
absolute
fixed
浙公网安备 33010602011771号