HTML笔记
<!doctype html>
</head>
<body>
<!--网页主体-->
<h1>web前端开发之div/CSS基础知识整理</h1>
<hr />
<h2>html骨架</h2>
html>head(title)+body
<hr />
<div>
<h2>标题标签</h2>
h1>h2>h3>h4>h5>h6 [字体从h1→h6依次变小]
<hr />
举例：》》标题具有权重性；只能用于标题
<h1>我是h1标签</h1><!-- h1主标题一个页面仅能出现一次 -->
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
</div>
<hr />
<h2>段落标签</h2>
<h3>p标签</h3>
<p>p自带换行效果</p>
<i>i斜体文本标签</i><br />
<em>em斜体文本强调标签</em><br />
<span>span行标签</span><br />
<strong>strong文本加粗强调标签</strong><br />
<b>b文本加粗标签</b><br />
CO<sub>2 sub下标标签</sub><br />
O<sup>2 sup上标标签</sup>
<pre>
pre预格式文本标签
<html>
<head></head>
</html>
</pre>
<h2>a标签</h2>
<a href="#">点击跳转</a>
锚点：<a href="#要达到的地点id"> <!-- href：跳转链接地址，路径
-->
<h2>列表标签</h2>
<h3>无序列表ul</h3>
<h3>有序列表ol</h3>
<ol type='1' start='2'> <!--type默认选项为数字1 start从某序数开始 -->
<li>往后？</li>
<li>往前？</li>
<li>驻足不动？</li>
</ol>
<h3>无序列表</h3>
<ul type =''><!-- type默认选项为实心圆
circle 空心圆 square 方块 -->
<li>往后？</li>
<li>往前？</li>
<li>驻足不动？</li>
</ul>
<h3>自定义列表</h3>
<dl> <!-- dl:自定义列表 dt：列表标题 dd：列表项 -->
<dt>你</dt>
<dd>好</dd>
</dl>
<h2>图片标签</h2>
<img src="" alt="" width="" height="" title=""/> <!-- src：url资源地址（路径：相对/绝对） alt：替代文本 SEO抓取 当图片无法加载的解释文字 title:鼠标悬停图片上的解释说明 非图片标签四要素 -->
<h2>表格</h2>
<h3>表格基础</h3>
<h3>合并单元格</h3>
<h3>三个划分区域的语义标签</h3>
<h3>form标签</h3>
form将前端的数据发送的后端
action="后端地址"
method="get" / "post"
使用控件发送数据的时候，数据必须有名字(name)
input控件。不同于type标签属性，使input的意义不同
type="submit" / "image"提交按钮
text 单行文本框
password 密码框
radio 单项选择按钮框
hidden 隐藏框
value ="" 让表单有默认的实际值
placeholder="" 让表单有提示文字
<--------------------------------br></--------------------------------br>
label关联选择
<input type="radio" id="gg"/>jia d
<label for="gg">加深</label>
<h3>input标签</h3>
<h4>单行文本框</h4>
<h4>密码框</h4>
<h4>单选框</h4>
<h4>多选框</h4>
<h4>文本域</h4>
textarea ：name="" cols="" rows=""
<h4>下拉菜单</h4>
stlect name="" id="" >option*3 (子项)
<h4>按钮</h4>
<h2>html注释</h2>
<h2>废弃标签</h2>
<h2>实体字符</h2>
<hr />
<h2>CSS初识</h2>
<h3>CSS概念</h3>
<h3>CSS作用</h3>
<h3>CSS样式</h3>
<h3>CSS书写位置</h3>
<h2>选择器</h2>
布局定位属性 自身属性 文本属性 其他属性 CSS3属性
<h3>基础选择器</h3>
* 通配符
id
class
tag(标签名称)
div,p,a 群组选择器
用空格隔开的就是隔代选择器
选择器优先级：
<h3>高级选择器</h3>
<h2>CSS特性</h2>
<h3>继承性</h3>
<h3>层叠性</h3>
<h2>CSS属性</h2>
<h3>color</h3>
表示方法：16进制法 #fff000 英文法 red blue green
rgb(): 三原色 r：红色 0-255 g：绿色 0-255 b：蓝色 0-255
rgba() a:透明度 0-1
<h3>font</h3>
<h4>font-size 文字大小</h4>
<h4>font-family 文字字体</h4>
<h4>font-height</h4>
<h4>font-weight</h4>
<h4>font-style</h4>
<h4>font复合写法</h4>
<h3>text</h3>
<h4>text-indent</h4>
<h4>text-align</h4>
<h4>text-decoration</h4>
<h3>background</h3>
background-attachment:背景固定；
scroll 滚动，随盒子滚动
fixed 固定
background-color:颜色；
background-image:图片；
background-repeat:排列方式；默认 平铺
no-repeat 不平铺
repeat-x 水平
repeat-y 垂直
background-position:定位；
x： 正值往右
center 水平居中
right
left
y：正值往下
center 垂直居中
top
bottom
默认位置： left top / 0 0
若只定义了一个方向的位置，则另一个默认我center。
位置属性可为负值
background-size:背景大小；
x auto
y auto
若只定义宽度，高度则按比例缩放，反之亦然。
复合样式：地址，位置，大小，排列
<hr />
<h2>盒模型初识</h2>
div：块元素 默认的宽度和父级一样
<h3>padding</h3>
内边距 top right bottom left 4值 top right&left bottom 3值
<h3>margin</h3>
外边距 top&bottom right&left 2值 行内元素上下值无效 auto自动化
<h3>border</h3>
边框 width： 粗细 style：样式 （solid 实线 dashed 虚线）
会增加盒子的大小
<hr />
<h2>盒模型深入</h2>
在文档流中的块元素，如果他们之间的垂直方向的外边距相遇了，就会合并。
合并后的边距谁大就听谁的，合并之后的外边距共同拥有。
</body>
position ：relative 绝对 absolute 相对 fixed 固定
CSS3属性：
border-radius 圆角 左上 右上 右下 左下
box-shadow 水平位移值 垂直位移值 阴影范围值 (推移加深边缘值) 颜色值 方位值 (inset 向内)
ie透明兼容：filter:alpha(opactity:透明比);
vertical-align:;
<!doctype html>
浙公网安备 33010602011771号