Web--html认识、标签、基本结构

最新推荐文章于 2022-05-04 17:11:15 发布

拯救发际线的张哈哈

最新推荐文章于 2022-05-04 17:11:15 发布

阅读量506

点赞数

分类专栏： MySQL

本文链接：https://blog.csdn.net/weixin_44863429/article/details/99339535

版权

MySQL 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML 认识

一、什么是HTML

HTML指的是超文本标记语言（Hyper Text Markup Language）
超文本：超：超链接包含超链接的文本
标记语言：
标记：标签
语言：制作网页的语言
一个网页是有多个标签组成的
HTML是用来描述网页的一种语言

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>我的第一个网页</title>
</head>
<body>
    <h1>啦啦啦</h1>
    &lt;love&gt; <!--尖括号-->
</body>
</html>

1、标签、元素

HTML标签是由尖括号包围的关键词，比如 <html>
HTML标签通常是成对出现的，比如<b>和</b>
标签正规使用小写

2、HTML基本结构

html是由浏览器来解析，所以不需要安装任何编译环境
Html文档的基本结构：
<!DOCTYPE html> 声明文档
<html> 是网页当中最大的标签，所有内容都要写在此标签内
<head> header头主要用于书写网页的设置一般写不直接显示给用的内容
字符编码的设置
网页的标题
引入外部的css文件
引入外部的JavaScript 文件
Body: body体，网页的身体部分网页中只要是显示给用户的内容，都要写在此标签

Head,和body 都是html的子标签

Html标签类型分类：
双标签：<标签名></标签名> / <开始标签>内容</结束标签>
单标签 <标签名 /> 一般写成<标签名>

Html标签的属性：
一般是键值对 key=”value”
属性的值必须使用双引号引起来

Html不会报错所以注意双标签不要忘了闭合
Html标签不区分大小写规范要求都是用小写

3、Html使用标签

1、h1-h6 标题标签

双标签有默认样式字体变粗变大变黑会自动换行

一般一个页面中h1只使用一次 h2-h6可以重复使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		<h7>我是七级标题</h7>
		
	</body>
</html>

2、p 段落标签

双标签有默认的样式会自动换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落标签</title>
	</head>
		<!-- 吟诗一首 -->
		<h3>静夜思</h3>
		<p>
		窗前明月光，<br>
		疑似地上霜。<br>
		举头望明月，<br>
		低头思故乡。
		</p>
	</body>
</html>

3、常见的实体字符

& nbsp; 空格
& gt; 大于号
& lt; 小于号
& copy; 版权标志

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实体标签</title>
	</head>
		&lt;l&nbsp;&nbsp;ove&gt; &copy;
	</body>
</html>

4、i 标签 b标签 em 标签 strong标签 u标签

i标签单纯的字体斜体
Em 也是斜体只不过具有强调意义
B 加粗
String 加粗具有强调意义
U 下划线
以上都是双标签

5、br hr

都是单标签
Br 强制换行
Hr 水平线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实体标签</title>
	</head>
		<h1><u>背影</u></h1>
		
		<p>我与父亲不相见已二年余了，我最不能忘记的是他的<strong>背影</strong>。</p>

		<p>那年冬天，<i>祖母</i>死了，<em>父亲</em>的差使1也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧2回家。到徐州见着父亲，看见满院狼藉3的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”
		回家变卖典质4，父亲还了亏空；又借钱办了丧事。这些日子，家中光景5很是惨澹，一半为了丧事，一半为了父亲赋闲6。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p>
	</body>
</html>

6、img 图片标签

单标签
属性：
src 图片的地址
title 鼠标移入的提示信息
alt 图片加载失败时的替代内容
可以使用网络图片或者本地的图片
使用的是本地的图片资源
相对路：相对于当前文件来去查找指定的资源
./ 代表当前路径
. ./ 代表上一级路径
windows下根目录根目录一般是盘符:
注意加载图片时盘符前面加/
Linux下的根目录用/ 来表示

绝对路径: 不考虑当前文件的位置，从根目录去查找指定的资源
推荐使用相对路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片标签</title>
	</head>
	<body>
		 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565590576334&di=478ea04cde2911f35712f2f4dc0f9161&imgtype=0&src=http%3A%2F%2Fimg.haote.com%2Fupload%2Fnews%2F20180712%2F153137358034080.jpg" title="安排" alt="看不见我">
		 <img src="./timg.jpg" title="朴灿烈" alt="没找到">
		 <img src="D:\培训文档\第二阶段\day01\1.jpg" alt="没找到">
	</body>
</html>

7、列表标签

无序列表
ul: 声明一个无序列表
li: 列表项
type(了解): 默认disc 圆
square 方块
circle 空心圆

ul中的直接子元素必须是li

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表标签</title>
	</head>
	<body>
		<ul type="cilcle">
			<li>列表项1</li>
			<li><h1>我是标题</h1></li>
			<li>列表项2</li>
			<li>列表项3</li>
		</ul>
	</body>
</html>

有序列表
ol:声明一个有序列表
li: 列表项
type:
1 代表数字默认就是数字
a 代表小写字母
A 代表大写字母
i 小写的罗马数字
I 大写的罗马数字
start: 指定以第几个开始只能写数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表标签</title>
	</head>
		<ol>
			<li>我是第一个</li>
			<li>我是第二个</li>
			<li>我是第三个</li>
		</ol>
	</body>
</html>

自定义列表
dl:声明一个自定义列表
dt:列表的标题
dd:列表描述项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表标签</title>
	</head>
		<dl>
			<dt>我是第一个</dt>
			<dd>我是第一的说明</dd>
			<dd>我也是第一的说明</dd>
			<dt>我是第二</dt>
			<dd>我是第二的说明</dd>
			<dd>我也是第二的说明</dd>
		</dl>
	</body>
</html>

8、a 标签超链接

超连接a 双标签
页面跳转
href: 跳转的地址
如果不给值跳转当前页面
target:_blank 新打开一个窗口加载跳转后的页面

跳转到当前页面的指定位置锚点
给指定标签添加id属性
a标签的href属性的值为#指定元素id属性的值
跳转到本地html文件的指定位置
a标签的href属性的值为指定页面中标签的id的值

<!DOCTYPE html>
<html>
	<head>
		<title>超链接</title>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank" title="点一下">点我跳转百度</a>

		<a href="#item1" id="top">跳转到一楼</a>
		<a href="#item2">跳转到二楼</a>
		<a href="#item3">跳转到三楼</a>
		<a href="#item4">跳转到四楼</a>
		<a href="#item5">跳转到五楼</a>

		<p id="item1" style="height: 500px; background-color: pink">一楼</p>
		<p id="item2" style="height: 700px; background-color: red">二楼</p>
		<p id="item3" style="height: 800px; background-color: green">三楼</p>
		<p id="item4" style="height: 600px; background-color: blue">四楼</p>
		<p id="item5" style="height: 400px; background-color: yellow">五楼
			<a href="#top">返回顶部</a>
		</p>
	</body>
</html>

9、表格标签

table: 声明一个表格
border: 边框
cellspacing: 设置表格和表格之间的间距 **
cellpadding: 设置表格中内容距离当前表格边框之间的间距
tr: 声明一个行
td/th: 声明一个列

水平对齐方式：align **
align:默认靠左对其 left
center 居中
right 靠右对齐
如果给tr设置设置当前行的所有
如果给td/th 设置当前一列
valign: 默认垂直居中 **
top:靠上对其
bottom:靠下对其
单元格合并： **
跨行合并
rowspan: 设置当前列占几个行的高度
跨列合并
colspan: 设置当前列占几个列的宽度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="20" width="300">
		<!-- 第一行 -->
		<tr align="center">
			<td>编号</td>
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
			<td>啦啦</td>
			<td>嘿嘿</td>
		</tr>
		<!-- 第二行 -->
		<tr>
			<td>1</td>
			<td>张三</td>
			<td rowspan="2">男</td>
			<td>20</td>
			<td colspan="2">哈哈哈哈</td>
			<!-- <td>嘿嘿嘿</td> -->
		</tr>
		<tr>
			<td>2</td>
			<td>李四</td>
			<!-- <td>男</td> -->
			<td>18</td>
			<td>哈哈哈哈</td>
			<td>嘿嘿嘿</td>
		</tr>
	</table>
</body>
</html>

10、form ：声明一个表单域

属性：
action:提交地址如果不写，提交到当前页面
method: 指定提交数据的方式
get: 默认是get提交
将数据明文显示在地址栏相对不太安全
数据大小受浏览器限制
post:
不会将数据明文显示在地址栏相对安全
理论上数据大小不受限制表单的数据是要提交给后台，提交数据的格式一般是键值对
Uname=用户在用户名框输入的内容所以表单控件除了按钮都要加name属性

表单控件的属性：
name: 必须添加座位提交数据的key
value: 代表值
type: 指定你的控件类型
text 普通文本输入框
password 密码输入框
radio 单选框
同一组单选框的name属性的值必须相同
必须设置默认值 value属性
checkbox: 多选框
同一组多选框的name属性的值必须相同
必须设置默认值 value属性
select>option: 下拉选框 option 选项
select 必须添加name属性
option 必须设置value
textarea:
文本域/多行文本输入框双标签
hidden: 隐藏域
有些时候有些数据不希望用户看到和修改所以可以使用隐藏域
提交按钮： type=“submit”
按钮
单纯的按钮：
在form 表单域中 type=“button” 只是单纯的按钮没有提交意义
checked 设置单选框和多选框的默认选中状态
selected 设置下拉选框的默认选中状态给option设置
disabled 禁用

了解： type=“reset” 重置按钮
type=“image” 图片按钮

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	<form action="./1.py" method="post">
		用户名：<input type="text" name="uname" value="哈哈"><br>
		密码：<input type="password" name="pwd"><br>
		性别：<input type="radio" name="gender" value="1" checked> 男
			  <input type="radio" name="gender" value="0"> 女
			  <br>
		爱好：<input type="checkbox" name="like" checked>篮球
			  <input type="checkbox" name="like">足球
			  <input type="checkbox" name="like">乒乓球
			  <br>
		地址：
			<select name="address">
				<option value="0">--请选择地址--</option>
				<option value="1">北京</option>
				<option value="2" selected>上海</option>
			</select>
		<br>
		自我介绍：
			<textarea name="info">我是...</textarea>
		<br>
		小秘密：<input type="hidden" name="uid" value="110">
		<br>
		按钮：<input type="submit" name="提交1" disabled>
				<button>提交2</button>
		单纯的按钮：
				<input type="button" name="按钮">
		<br>
		重置按钮：
			<input type="reset" value="重置">
		<br>
		图片按钮：
			<input type="image" src="./1.jpg" name="">
	</form>
</body>
</html>

按照标签效果分类：
块标签：
会自动换行(独占一行)
h1-h6 p ul li ol dl dt dd table tr

行标签：
不会自动换行，标签和标签并排在一行显示,没有宽高属性
I b u em strong
行内块：
不会自动换行，标签和标签并排在一行显示，可以设置宽高
Img input

没有默认样式的快标签和行标签
div 块标签没有默认样式一般配合css做网页的布局
Span 行内标签，没有默认样式一般也是配合css去使用

作业：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="20" width="600" height='80'>
		<tr>
			<td colspan="3" align="center">注册</td>
			<!-- <td></td>
			<td></td> -->
		</tr>
		<tr>
			<td>用户名：</td>
			<td colspan="2"> 
				<input type="text" name="username" value="请输入用户名">
			</td>
		</tr>
		<tr>
			<td>密码：</td>
			<td colspan="2"> 
				<input type="password" name="pwd">
			</td>
		</tr>
		<tr>
			<td>性别：</td>
			<td colspan="2"> 
				<input type="radio" name="sex">男
				<input type="radio" name="sex">女
				<input type="radio" name="sex" checked>保密
			</td>
		</tr>
		<tr>
			<td>爱好：</td>
			<td colspan="2"> 
				<input type="checkbox" name="like">唱歌
				<input type="checkbox" name="like">跳舞
				<input type="checkbox" name="like">运动
				<input type="checkbox" name="like">敲代码
			</td>
		</tr>
		<tr>
			<td>地址：</td>
			<td colspan="2">
				<select name="address">
					<option>北京市，五方桥</option>
					<option>河北省，邯郸市</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>头像：</td>
			<td colspan="2"><input type="file" name="img"></td>
		</tr>
		<tr>
			<td>个人简介：</td>
			<td colspan="2">
				<textarea name="info"></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="3" align="center">
				<input type="submit" name="提交">
			</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>个人简历</title>
</head>
<body>
	<!-- <h1 align="center" style="width: 750px">个人简介</h1> -->
	<h1 align="center">个人简介</h1>
	<table border="1" cellspacing="0" width="750" align="center">
		<tr align="center" height="40">
			<td>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</td>
			<td width="125"></td>
			<td>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</td>
			<td width="125"></td>
			<td>民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族</td>
			<td width="125"></td>
		</tr>
		<tr align="center" height="40">
			<td>政治面貌</td>
			<td width="125"></td>
			<td>户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍</td>
			<td colspan="3"></td>
		</tr>
		<tr align="center" height="40">
			<td>出生年月</td>
			<td width="125"></td>
			<td>婚姻状况</td>
			<td width="125"></td>
			<td>工作时间</td>
			<td width="125"></td>
		</tr>
		<tr align="center" height="40">
			<td>技术职称</td>
			<td width="125"></td>
			<td>文化程度</td>
			<td width="125"></td>
			<td>主修专业</td>
			<td width="125"></td>
		</tr>
		<tr align="center" height="40">
			<td>毕业学院</td>
			<td width="125" colspan="3">南京大学</td>
			<td>毕业时间</td>
			<td width="125"></td>
		</tr>
		<tr align="center" height="40">
			<td>英语水平</td>
			<td width="125"></td>
			<td>计算机水平</td>
			<td width="125"></td>
			<td>薪资要求</td>
			<td width="125"></td>
		</tr>
		<tr align="center">
			<td rowspan="2">本人要求</td>
			<td height="40">现从事工作</td>
			<td width="125" colspan="4" height="40"></td>
		</tr>
		<tr align="center" >
			<td height="40">欲从事工作</td>
			<td width="125" colspan="4" height="40"></td>
		</tr>
		<tr align="center">
			<td rowspan="2">联系方式</td>
			<td height="40">联系电话</td>
			<td width="125" colspan="2" height="40"></td>
			<td height="40">邮政编码</td>
			<td width="125" height="40"></td>
		</tr>
		<tr align="center">
			<td height="40">通信地址</td>
			<td width="125" colspan="4" height="40"></td>
		</tr>
		<tr>
			<td height="200" align="center">工作简历</td>
			<td height="200" colspan="5"></td>
		</tr>
		<tr>
			<td height="200" align="center">自我评价</td>
			<td colspan="5" height="200"></td>
		</tr>
		<tr></tr>
		<tr></tr>
		<tr></tr>
		<tr></tr>
	</table>
</body>
</html>