文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--几级标签-->
<h1>tigerwang</h1>
<h3>sdkfsldkf</h3>
<!--段落标签 <b> 加粗-->
<p>哈哈哈哈哈</p>
<p><b>好好学习,天天向上</b></p>
<hr color="black" width="100%" size="30px" align="left">
<font color="red" size="5" face="楷体">小王同学</font><br>
<hr>
<span><b>春眠不觉晓</b></span><br>
<span><i>处处闻啼鸟</i></span><br><!--<i>斜体-->
<span>夜来风雨声</span><br>
<center> <span>花落知多少</span></center>
</body>
</html>
图片标签
src中路径,可以写绝对路径,也可以是相对路径。这里需要注意的是相对路径中../
表示上一级目录,本目录下直接加/
。alt
里面的是如果访问失败,就会显示alt
里面的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--相对路径-->
<img src="../img/1.jpg" alt="好美的图片" width="400px" height="600px" align="left">
<!--绝对路径-->
<img src="https://goss.veer.com/creative/vcg/veer/800water/veer-150325295.jpg" alt="好美的图片" width="400px" height="600px" align="left">
</body>
</html>
列表标签
列表标签中又分为有序,无序和自定义标签:
有序列表
type
里面可以确定用什么来确定顺序,start
里面确定从哪个开始
<h3>有序列表</h3>
<ol type="A" start="B">
<li>小明</li>
<li>小花</li>
<li>小华</li>
<li>小强</li>
</ol>
无序列表
type
中有disc,square,circle这些属性来改变前面的标志
<ul type="circle">
<li>古力娜扎</li>
<li>迪丽热巴</li>
<li>玛尔扎哈</li>
<li>噗哒噗哒</li>
</ul>
自定义列表
<st>
<cl>A</cl>
<cl>B</cl>
<cl>C</cl>
</st>
超链接标签
<a>
标签为超链接标签,可以跳转到其他地方。里面有两个属性:
href
:点击跳转的资源路径
target
: _self 当前窗口打开, _blank 新开一个窗口打开
<a href="https://www.baidu.com" target="_blank">我可以跳转到百度的,你点我试试看</a>
表格标签
border="1" 边框,单位是像素px
cellspacing="0" 单元格外边距,通常设置为0,用于消除td之间的间距
cellpadding="10" 单元格内边距:单元格的边框和内部文本的距离,通常设置为10,可以撑大表格,显示清晰美观
align="center"
1.作用在table标签上:整个表格在对窗口居中显示
2.作用在tr标签上:表示当前行的文本内容在单元格中居中显示
表头使用th :具有 加粗 和 文本内容居中显示的功能
普通表格
<table border="1px" cellpadding="10" cellspacing="0" align="center">
<caption><h2>职工表</h2></caption>
<tr>
<th>部门编号</th>
<th>职工标号</th>
<th>职工薪资</th>
</tr>
<tr>
<td>001</td>
<td>20200303</td>
<td>2000</td>
</tr>
<tr>
<td>002</td>
<td>20200323</td>
<td>3000</td>
</tr>
<tr>
<td>003</td>
<td>20200603</td>
<td>2500</td>
</tr>
</table>
合并行或者列的表格
跨行
1.从上到下
2.第一个单元格保留,剩下的删除
3.给第一个单元格一个属性 rowspan="3" 包含自己在内的总行数
跨列
1.从左到右
2.第一个单元格保留,剩下的删除
3.给第一个单元格一个属性 colspan="4" 包含自己在内的总列数
举个例子:
<table bgcolor="green" border="1px" cellpadding="10" cellspacing="0" align="center">
<caption><h2>职工表</h2></caption>
<tr>
<th rowspan="4">部门编号</th>
<th>职工标号</th>
<th>职工薪资</th>
</tr>
<tr>
<!--<td>001</td>-->
<td colspan="2">20200303</td>
</tr>
<tr>
<!--<td>002</td>-->
<td>20200323</td>
<td>3000</td>
</tr>
<tr>
<!--<td>003</td>-->
<td>20200603</td>
<td>2500</td>
</tr>
</table>
form表单标签
表单提交的方式:post和get
这里面试可能会问两者的区别:
1.get请求方式会把提交的数据显示在浏览器的地址栏,post不会显示
2.get方式提交的数据有大小和长度的限制,post没有
3.get不安全,post安全
具体的使用,看下面的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单标签</title>
</head>
<body>
<form action="跳转到的页面.html" method="get">
<label for="s">文本:</label><input id="s" type="text" placeholder="文本输入框"><br>
<label for="a">密码:</label><input id="a" type="password" placeholder="密码输入框"><br>
性别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女 <br>
兴趣:<input type="checkbox" name="check" value="旅游">旅游
<input type="checkbox" name="check" value="吃货">吃货
<input type="checkbox" name="check" value="学习">学习
<input type="checkbox" name="check" value="编程">编程 <br>
文件:<input type="file"><br>
<input type="submit" value="确定提交"><br>
按钮:<input type="button" value="点我"><br>
<input type="hidden"><br>
取色器: <input type="color"><br>
日期:<input type="date"><br>
时间:<input type="datetime-local"><br>
邮箱:<input type="email"><br>
数字:<input type="number" style="width: 40px"><br>
下拉框:<select name="se" id="sese">
<option value="你好">你好</option>
<option value="他好">他好</option>
<option value="很好">很好</option>
</select>
<br>
文本域:<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
</body>
</html>
上面的例子中需要注意的如下:
1.text 文本输入框
2.password 密码输入框
3.radio 单选
3.checkbox 复选框
4.file 文件引入按钮
5.submit提交按钮
6.button 普通按钮,本身不具备任何功能
7.image 图片提交
8.hidden 隐藏域 提交默认的数据
扩展:
9.color 取色器
10.date 日期
11.dateTime_local 日期和时间
12.email 邮箱,有@校验功能
13.number 数字
1.以上所有的表单项都应该有name和value属性,
radio和checkbox必须要有name和value
text和password可以省略value
2.text和password还有一个placeholder输入提示属性,不会对输入的值造成干扰
3.radio和checkbox 要实现单选和复选,name属性值必须一致 ,checked 关键字表示默认选中
CSS 指层叠样式表 (Cascading Style Sheets)
作用:
1**.三种结合方式**
内联样式(不推荐使用)
<div style="color: red; font-style: revert; background-color:greenyellow;">
<span>你好!世界;我会非常努力的</span>
</div>
直接在标签体里面写style,这样不利于后期维护,所以不建议这样写
内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS三种结合方式</title>
<style>
#div2{
color: #000;
font-size: revert;
background-color: orange;
width: 600px;
height: 90px;
}
</style>
</head>
<body>
<div id="div2">
<span>这是内部样式</span>
</div>
</body>
</html>
这种是利用选择器,在head
标签里面写一个style
标签,里面用选择器写样式
外部样式
单独创建一个css文件,将样式都写在里面,然后在HTML中用<link rel="stylesheet" href="../css/a.css">
,将css文件引入,这也是当下最流行的写法了,方便维护和多人协作。强烈建议使用这个
常见的选择器
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 “#” 来定义。
注意:id选择器只能选择一个。
<style>
#mt01{
color: red;
font-size: 20px;
border: 1px solid black;
}
</style>
<div id="mt01">
<span>
Hello World!!!
</span>
</div>
类选择器
类选择器以一个点号显示。
注意:只要有同一类名的class都会被选择,它不像id选择器,这个可以重名
<style>
.mt02{
color: green;
font-size: 20px;
border: 1px solid darkolivegreen;
}
</style>
<div class="mt02">
<span>
Hello World!!!
</span>
</div>
<div class="mt02">
<span>
Hello ketty!!!
</span>
</div>
属性选择器
为拥有指定属性的 HTML 元素设置样式
为带有 title 属性的所有元素设置样式
[title]
{color:red;}
[type]{
border: 1px solid red;
}
<input type="text">
<input type="text">
<input type="text">
上面例子中所有的type都被选中了。
并集选择器
可以同时使用多个标签或多个选择器中间使用逗号分开。
p,h1{
color: blue;
}
<p>nihasdfsdl</p>
<h1>szhdkkflds</h1>
这个用的也比较多
标签选择器
直接通过标签名称来进行选择,这个是最简单的一种,就不举例子了。
常用的属性
字体属性
字体属性的功能:设置页面字体的显示样式。常用的如下:
font-family 设置使用的字体
font-style 设置字体的样式,是否斜体
font-variant 设置字体的大小写
font-weight 设置字体的粗细
font-size 设置字体的大小
颜色和背景属性
颜色和背景属性的功能:设置页面元素的颜色和背景颜色.常用的如下:
color 设置元素前景色
background-color 设置元素背景色
background-imge 设置元素背景图案
background-repeat 设置背景图案的重复方式
background-position 设置背景图案的初始位置
background-size 设置背景大小
文本属性
文本属性的功能:设置页面的显示效果。常用的如下:
text-align 设置文本的对齐方式
text-indent 设置文本的首行缩进
line-height 设置文本的行高
a:link 设置链接未访问的状态
a:visited 设置链接访问过的的状态
a:hover 设置链接的鼠标激活状态
边框属性
边框属性是设置页面内边框元素的显示效果
border: 1px solid red;
块属性
块属性是设置元素之间的距离,常用的如下:
margin
两个容器之间的距离称为margin
即从边框开始往外的距离
padding
容器内部的边距称为padding
即从边框开始往里的距离
设置padding会增加宽,高,不想增加的话,要加上box-sizing: border-box;
margin-top 设置顶边距
margin-right 设置右边距
padding-top 设置顶端填充距
padding-right 设置右侧填充距
层属性
一个容器可以嵌套另一个容器
设置页面内元素的定位方式:
块元素和内联元素
块元素
自己单独占一行,就像一个段落,常见的有
ul
li
form
h1-h6
hr
p
div
内联元素
概念:不会自己独立占一行,就好像一个单词,一直往后排
特点:宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和 外边距的top/bottom(margin-top/margin-bottom)都不可改变。
常用的有
a
big
br
em
img
input
label
selelct
span
textarea
两者的转化
内联元素---->块元素
display:block – 显示为块级元素
块元素---->内联元素
display:inline – 显示为内联元素
转换为内联块元素
dipslay:inline-block – 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性
浮动
本文地址:https://blog.csdn.net/qq_39594037/article/details/107391989
如对本文有疑问, 点击进行留言回复!!
(已解决)宝塔面板SSL失败|无法启动,提示 nginx: configuration file /www/server/nginx/conf/nginx.conf test failed
JAVAWEB第六天——JQuery速成(2)【表单校验优化,美观可视化升级,Validation插件,省市二级联动升级】
Flutter Navigator路由,返回,替换路由及返回指定页面
springboot插入时间出现 at [Source: (PushbackInputStream); line: 9, column: 12]的问题。
网友评论