元素显示模式：
块元素：独占一行 div 宽 高 内外边距可以设置
行内元素：一行多个 span
行内块元素：同时拥有以上两个属性
表格标签：
<table border="边框" width="宽度" height="高度" cellspacing="单元格间距">
<caption>学生信息</caption>------表头
<thead height="高度" align="center"(水平居中) valign="middle"（垂直居中）>---没有width,thead（height）是底线，只高不低
<tr>
<th>姓名</th>-------首个单元格
<th></th>
<th></th>
</tr>
</thead>
<tbody height="高度" align="center" valign="middle">
<tr>
<td rowspan="2"(跨行合并两个（向下合并）)>姓名</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>姓名</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
<tfoot height="高度" align="center" valign="middle">
<tr>
<td colspan="5"(跨列合并5格（水平合并）)>共计4人</td>
</tr>
</tfoot>
</table>
详情:
<ditails>-----详情
<sumary>有志青年</sumary>
我们这里都是有志青年
</ditails>
Tabindex---让本不能tab遍历获取焦点的元素能够遍历
<Input type="text">
<a href="#">去百度</a>
<div>第一个地狱</div>
<div tabindex="1">第二个地狱</div>
<div>第三个地狱</div>
表单：网页交互区，收集用户信息
Action:将数据交给谁处理（提交到自己的页面用#）
name：必有属性
method：提交方式
<form action="链接">
<input type="text" name="wd">
<button>提交</button>
</form>
<form action="#">
文本框：
<input type="text" name="user" value="wenli" maxlength="6"(最大长度)>
<input type="pass" name="pwd"><br/>
单选框：
<input type="radio(选项为圆形)" name="gender" value="nan">男
<input type="radio" name="gender" vlaue="nv">女<br/>
多选框 label标签：
<input type="checkbox(选项为正方形)" name="food" id="liulian"><label for="liulian">吃榴莲<label>
<input type="checkbox" name="food">吃荔枝
<input type="checkbox" name="food">吃火龙果
隐藏域：
<input type="hidden" name="hid" value="afafa">
确认按钮：
<input type="submit">----将值提交到链接栏
<button type="submit">提交</button>
重置按钮：
<input type="reset">
普通按钮：
<input type="button">dianji
文本域：
<textarea cols="200" rows="10">
</textarea>
下拉菜单：
<select name="jiguan" id="">
<option value="南京">南京</option>
<option value="成都" checked(默认选中)>成都</option>
<option value="西安">西安</option>
</select>
</form>
默认选中：checked（多选框） selected（下拉菜单）
html的全局属性：
Id:id如同身份证号，一个页面唯一
<div id="one"></div>
Class:一类，可以出现多个
<div class="pink">一个苹果</div>
<div class="pink">苹果</div>
<div class="pink">苹果</div>
<div class="pink">苹果</div>
accesskey：设置快捷键
<form>
<input type="text" name="a" id="">
<button accseekey="s">提交</button>
</form>
Style:
Data-*:自定义属性
css的三种引入方式：
外部样式：
<link rel="stylesheet" href="代码链接">
内部样式---style
行内样式-----style="color：pink"
<style>
Box1{
width：300px；
height：300px；
Background-color：pink；
}
</style>
css基本结构：
选择器{
属性名： 属性值
属性名： 属性值
}
基本选择器：
<head>
<style>
标签选择器：
P {
Color: aqua;
}
#box1(id选择器){
color: pink;
}
.box2（类选择器） {
color: blueviole
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一
<div class="pink">我是盒子一</div>
</body>
包含选择器：
子代选择器（选择亲儿子）：
.a>li {
Backgroud-color: pink;
}
后代选择器（招到后代所有的元素）：
.a li {
color：blueviolet；
}
<body>
<ul class="a">
<li>1<li>
<li>1<li>
<li>1<li>
<ul>
<li>1<li>
<li>2<li>
<li>3<li>
</ul>
</body>
字体的样式：
<head>
<style>
div {
font-size: 40px;-------字体大小
font-weight: bold;-----字体粗细
font-weight: 900;
(100-900 400==normal 800==bold 100-900越来越粗 )
font-style: italic/normal;
font-family: "微软雅黑"；
font:italic 900 70px "微软雅黑"
}
</style>
</head>
<body>
<div>
我的是图图小淘气，面对世界很好奇
</div>
</body>
逗号选择器：
div，
P,
Span {
color: red;
}
属性选择器：
Input[type="password"]{
backgroud-color: 颜色
}
Div[id]{
width: 300px;
height: 300px;
background-color: blue;
}
以te开头：
Input[type^="te"]{
backgroud-color: 颜色
}
以l结尾：
Input[type$="l"]{
backgroud-color: 颜色
}
*包含e：
Input[type*="e"]{
backgroud-color: 颜色
}
首行缩进：
<sytle>
p{
text-indent: 32px;-------缩进
font-size: 20px;
text-indent: 2em;--------em代表当前字体大小
}
</sytle>
2927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
