元素显示模式:
块元素:独占一行 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>