本文介绍了HTML中的元素显示模式，包括块元素、行内元素和行内块元素的特性，并展示了如何创建和样式化表格。同时，提到了CSS的引入方式、选择器应用以及字体样式。此外，还讨论了表单的基本结构及其常见元素，如文本框、单选框和多选框。
元素显示模式
元素显示模式
块元素：独占一行 div 宽、高、内外边距可以设置
行内元素：一行多个 span 宽、高、内外边距不可以设置
行内块元素：一行存在多个 宽、高、内外边距可以设置
<div>我是一个盒子</div>
<span>我是span</span>
以下是块元素
<ul>
<li></li>
</ul>
表格
<table>
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计四人</td>
</tr>
</tfoot>
</table>
表格标签属性
边框 <table border="1px" cellspacing="0"></table>
border为边框（边框更改粗细只能更改外围） cellspacing为单元格间的距离
表格整体宽高<table width="900px" height="400px"> 值是底线，只高不低
表头属性 <thead height="200px" align="center" valign="top">
height可更改行高
align可更改水平方向对齐 left right center
valign可更改垂直方向对齐 top middle bottom
内容属性 <tbody height="600px" align="center" valign="middle"></tbody>
脚注属性相同
行属性相同
单元格合并
<td rowspan="2"></td>
rowspan为跨行合并单元格 后跟行数
<td colspan="5"></td>
rowspan为跨列合并单元格 后跟列数
details
<details>
<summary>123</summary>
123456
</details>
details为详情标签，配合summary使用
tabindex
<input type="text">
<a href="#">去百度</a>
<div>1盒子</div>
<div tabindex="0">2盒子</div>
<div>3盒子</div>
<div>4盒子</div>
tabindex 可是原本不能聚焦的元素聚焦 可以为负数，0，正数，0不能聚焦，1为第一个聚焦
表单的基本结构
网页交互区，收集用户信息
<form action="https://www.baidu.com/s" method="get(或者填post,用于表明提交方式)">
<input type="text" name="wd">
<button>提交</button>
</form>
action 将数据交给谁处理
name 必有属性
常见的表单元素
<form action="#">
<!-- 文本框 -->
用户名：<input type="text" name="user" value="gouxin " maxlength="6">
<!-- 密码 -->
密码： <input type="password" name="pwd"><br>
<!-- 单选框 -->
<input type="radio" name="gender" value="nan">男
<input type="radio" name="gender" value="nv">女
<!-- 多选框 label标签 checked默认选中-->
<input type="checkbox" name="food" value="liulian"><label for="liulian">吃榴莲</label>
<label><input type="checkbox" name="food" value="choudoufu">吃臭豆腐</label>
<input type="checkbox" name="food value="feirou"">吃肥肉
<!-- 隐藏域 -->
<input type="hiden" name="hid" value="拉克斯基电话发给">
<!-- 确认按钮 -->
<input type="submit">
或
<button>提交</button>
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button">
<!-- 文本域 （可以设置最大长度）-->
<textarea cols="20" rows="10">
</textarea>
<!-- 下拉菜单 -->
<select name="jiguan" id="">
<option value="南京">南京</option>
<option value="西安">西安</option>
<option value="成都" selected>成都</option>(默认选中)
</select>
</form>
text 文本框 value为默认输入值 maxlength最大长度
password 输入文本框的内容不可见
radio 单选框 name相同为一组
checkbox 多选框 name相同为一组
label 定位
hiden 隐藏域 网页中不可见
submit 确认按钮
reset 重置按钮
button 普通按钮
textarea 文本域 cols rows设置长宽
html的全局属性
身份证号，在一个页面中只能出现一次
<div id="one"></div>
<style>
.pink{
color:pink;
}
</style>
class 一类
<div class="pink" style="font-size：40px;">我是一个盒子</div>
<div class="pink">我是一个盒子</div>
<div class="pink">我是一个盒子</div>
<div class="pink">我是一个盒子</div>
accesskey 设置快捷键
<form action="#">
<input type="text" name="a" id="">
<button accesskey="s">提交</button>
</form>
css
css三种引入
基本结构
选择器{
属性名:属性值;
属性名:属性值;
}内部样式
<head>
<style>
.box1{
width:300px;
height:300px;
background-color:pink;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>行内样式<body>
<div style="width:300px;height:300px;basckground-color:green;"> </div>
</body>
外部样式
<link rel="stylesheet" href="./样式.css">
样式.css
.box2{
width:300px;
height:300px;
background-color:pink;
}
基本选择器
<style>
标签选择器 选中所有p标签
p{
color:aqua;
}
id选择器
#box1{
color:pink;
}
类选择器
.box2{
color:blueviolet;
}
通配符选择器(选中所有选择器)
*{
background-color:pink;
}
</style>
包含选择器
<style>
子代选择器 选中亲生儿子
.a>li {
background-color: pink;
}
后代选择器 找到后代所有要找的元素
.a li {
color: blueviolet;
}
</style>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</ul>
</body>
字体的样式
<style>
<div>{
字体大小：font-size:40px;
字体粗细：font-weight:bold;
100-900 400==normal 800==bold 越来越 粗
字体倾斜：font-style:italic/normal;
字体： font-family:"微软雅黑"
font:italic 900 70px "微软雅 黑"
}
</style>
复合选择器
<style>
/* div {
color: pink;
}
p {
color: pink;
}
span {
color: pink;
} */
div,
p,
span {
color: red;
}
</style>
属性选择器
<style>
input {
background-color: pink;
}
输入内容不可见
input[type="password"] {
background-color: aquamarine;
}
div[id] {
width: 300px;
height: 300px;
background-color: blue;
}
type^="te"以te开头
input[type^="te"] {
background-color: red;
}
input[type$="l"] {
background-color: green;
}
type*="e" type值里边包含e
input[type*="e"] {
background-color: chartreuse;
}
</style>
<body>
<input type="text"><br />
<input type="password"><br />
<input type="search"><br />
<input type="url"><br />
<input type="number"><br />
<div id="aquamarine">1</div>
<div>2</div>
</body>
首行
<style>
p {
字体大小：font-size: 20px;
首行缩进：text-indent: 2em;
}
</style>
<p>
戕害美的行径，在人类社会中从未消失过，只是从未像今天这样严峻：
</p>
扫一扫
2977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
