文章目录
Html语法
块级元素
div
特点：
1.独占一行
可以看见第一行后面的位置还很充裕；但还是有了第二行。
<body>
<div id="" >
今天天气不错！
</div>
<div id="" style="">
确实不错。
</div>
</body>
2.设置宽高有效
设置的div的宽高后，可以明显的看见第一行和第二行的间距变大了；
<body>
<div id="" style="height: 200px;width: 200px;">
今天天气不错！
</div>
<div id="" style="">
确实不错。
</div>
</body>
效果
p
特点：
<p>文本</p>
标题
注意：标题只有1-6级；h1-h6 可以看做是在p标签的基础上完成的
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
列表
有序列表
默认情况
<ol>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ol>
以第二个大写字母开始
<ol type="A" start="2">
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ol>
注：
type 值
1 数字序号
A 大写字母序号
a 小写字母序号
i 小写罗马数字
I 大写罗马数字
start值：
序号从第几个开始；
去掉序号显示
style="list-style: none;"
<ol type="i" start="2" style="list-style: none;">
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ol>
效果
无序列表
- 无序列表默认格式
- 无序列表更改小黑点为空心圆
type="circle" - 无序列表更改小黑点为实心正方形
type="square" - 无序列表去掉小黑点
style="list-style: none;"
<body>
<h3>无序列表默认格式</h3>
<ul class="uls">
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
<h3>无序列表更改小黑点为空心圆</h3>
<ul class="uls" type="circle">
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
<h3>无序列表更改小黑点为实心正方形</h3>
<ul class="uls" type="square">
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
<h3>无序列表去掉小黑点</h3>
<ul class="uls" style="list-style: none;">
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
</body>
效果
自定义列表`
形成一个层级的列表
<body>
<dl class="dl_s" >
<dt>1</dt>
<dd>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
</dd>
<dt>2</dt>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
</dl>
</body>
效果
table表格
注：
1.设置表格为单实线
cellspacing="0"
2.合并列
<th colspan="3">操作</th>
3.合并行
<td c>1</td>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.tab{
margin: 0 auto;
/* background: linear-gradient(red,50%,black,50%); */
opacity:0.7;
width: 80%;
}
th,td{
border: 1px solid black;
margin: 1px;
/* border-collapse: collapse; */
}
table{
border: 1px solid ;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="tab">
<!-- boder设置的是外部边框 cellspacing设置线为一条 不再是双线-->
<table border="1px" cellspacing="0" cellpadding="">
<tr>
<th>ID</th>
<th>商品名</th>
<th>商品类型</th>
<th>商品价格</th>
<th>商品库存</th>
<th>说明</th>
<th colspan="3">操作</th>
</tr>
<tr>
<td>1</td>
<td>袜子</td>
<td>日用品</td>
<td>5.00</td>
<td>45</td>
<td>这是一双性价比优秀的袜子</td>
<td>添加</td>
<td>修改</td>
<td>删除</td>
</tr>
<tr>
<td>2</td>
<td>袜子</td>
<td>日用品</td>
<td>5.00</td>
<td>45</td>
<td>这是一双性价比优秀的袜子</td>
<td>添加</td>
<td>修改</td>
<td>删除</td>
</tr>
<tr>
<td>3</td>
<td>袜子</td>
<td>日用品</td>
<td>5.00</td>
<td>45</td>
<td>这是一双性价比优秀的袜子</td>
<td>添加</td>
<td>修改</td>
<td>删除</td>
</tr>
</table>
</div>
</body>
</html>
form表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
/* 图片资源注意更改路径 */
background: url(../image/august2.webp);
}
.content{
margin: 0 auto;
width: 80%;
height: 800px;
}
#resigter{
/* 渐变色 */
background:linear-gradient(to bottom left,#2ac2d1 30%,#e64438 78%);
opacity:0.7;
margin-top: 26%;
}
input{
margin: 0 auto;
}
.input_c{
width: 300px;
height: 30px;
background-color: white;
border-radius: 18px;
border: 3px solid red 30%,#343434 78%;
transition: background 0.3s ease-in-out;
}
input:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
form{
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<div id="resigter">
<form action="../yt0831/work.html" class="te" method="get" target="_search">
用户名：<input type="text" id="" class="input_c" name="id" value="" placeholder="用户名"><br />
密码：<input type="password" id="" class="input_c" name="pwd" value="" placeholder="密码"><br />
<!-- 单选框 设置name为一个值 checked设置为默认值 这是省略了=后面的 因为属性和值相同时可以不写值 -->
<div>
<input type="radio" id="" class="" name="sex" value="男" checked>男
<input type="radio" id="" class="" name="sex" value="女">女<br />
</div>
<!-- 复选框 -->
<input type="checkbox" id="" class="" name="" value="篮球">篮球
<input type="checkbox" id="" class="" name="" value="足球">足球
<input type="checkbox" id="" class="" name="" value="排球">排球<br />
<!-- 下拉选项框 -->
<select name="select" id="" style="width: 150px;" class="input_c">
<option value="四川">四川</option>
<option value="上海">上海</option>
<option value="西藏">西藏</option>
</select>
<br />
<textarea rows="3" cols="10" style="min-height:150px;min-width:150px;max-height:150px;max-width:150px;">
</textarea><br />
下拉列表：<input type="text" list="text" />
<datalist id="text">
<option value="四川" >sc</option>
<option value="上海" >sh</option>
<option value="西藏" >xz</option>
</datalist>
<br />
<input type="submit" id="" class="input_c" value="提交" style="width: 50px;">
<input type="reset" id="" class="input_c" value="重置" style="width: 50px;">
<input type="button" id="" class="input_c" value="按钮" style="width: 50px;">
<br />
</form>
</div>
</div>
</body>
</html>
特点：
- 独占一行：在没有设置其他属性时，他们是从上到下排列的；就算有未使用的部分也会空着；
- 宽和高可设置(宽，高，行高，内边距，外边距，边框都可设置)
行内元素
a
span
和div有点类似
del
b
i
u
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="font-size: 30px;"> 块级元素</div>
<!-- ul[type][start]>li*4 -->
<ul type="circle">
<li><a href="https://pixabay.com/" target="_search">a标签 图片网站 </a></li>
<li> target设置是在哪里打开</li>
<ol type="1">
<li > target="_blank" 设置其他页打开</li>
<li> target="_parent" 设置当前页打开</li>
</ol>
<li>231 <span style="color: pink;font-size: 25px;">span用于行内部分字体的设置</span></li>
<li><b>b标签加粗</b></li>
<li><del>del标签</del></del></li>
<li><i>i标签斜体</i></li>
<li><u>u标签下划线</u></li>
</
</body>
</html>
特点：
1.在一行显示
2.设置宽高无效
行内块级元素
img
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div><img src="../image/2.png" ></div>
</body>
</html>
input
一般不会单独使用，会配合form表单使用
即使单独使用也会是输入文本
输入文本<input type="text" name="" id="" value="" />
特点：
- 宽高可以设置（包括其他很多效果 边框）
元素是可以相互转换的
1.转换为行内块级元素
display: inline-block;
2.转换为行内元素
display: inline;
3.转换为块级元素
display: block;
转换后就可拥有相应的特点：
比如行内元素（a，span，del，b，i，u）转换为块级元素后：设置宽高也有效了
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
/* 将div转换为行内块级元素 */
display: inline-block;
/* 将div转换为行内元素 */
display: inline;
}
.input_a{
/* 将input转换为块级元素 */
display: block;
}
</style>
</head>
<body>
输入文本<input type="text" class="input_a" id="" value="" />
<div class="div1"></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
