供应链网站制作2023年7月最新新闻摘抄
欢迎大家来到我的博客~欢迎大家对我的博客提出指导，有错误的地方会改进的哦·~
点击这里了解更多内容
目录
- 一、前言
- 二、HTML基础
- 2.1 什么是HTML?
- 2.2 认识HTML标签
- 2.2.1 HTML标签当中的基本结构
- 2.2.2 标签层次结构
- 2.3 HTML常见标签
- 2.3.1 标题标签
- 2.3.2 段落标签
- 2.3.3 换行标签
- 2.3.4 图片标签
- 2.3.5 超链接
- 2.3.6 表格标签
- 2.3.7 表单标签
- 2.3.8 select标签
- 2.3.9 无语义标签
- 2.4 综合练习-实现一个用户注册的网页
一、前言
这篇博客的目的认识 HTML 的基本结构, 学习常用的 HTML 标签。
这里说的所用的文本编辑器是idea。
二、HTML基础
2.1 什么是HTML?
HTML(Hyper Text Markup Language), 超文本标记语言。
超文本: 比文本要强大. 通过链接和交互方式来组织和呈现信息的⽂本形式. 不仅仅有文本， 还可能包含图片, ⾳频, 或者自已经审阅过它的学者所加的评注、补充或脚注等等.
标记语言: 由标签构成的语言。
HTML的标签都是提前定义好的, 使用不同的标签, 表示不同的内容.
类似飞书文档, Word文档。
标签：如果选中文本, 点击标题1, 就会使用标题1的样式来显示文本, 上述标题1就是⼀个"标签“。
如以下代码（建立一个demo1.html文件）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>我的第一个HTML文件</title>
</head>
<body>
<!--<h1>我是一级标题</h1>-->
<!--<h2>我是二级标题</h2>-->
<!--<h3>我是三级标题</h3>-->
<!--<h4>我是四级标题</h4>-->
<body>
用浏览器打开的效果：
上面代码中的h1、h2、h3、h4说的就是标签，学习HTML最主要的就是学习标签。
2.2 认识HTML标签
2.2.1 HTML标签当中的基本结构
创建一个叫test1.html的文件,然后输入下面这些内容：
<html>
<head><title>我的第一个HTML文件</title>
</head>
<body>Hello HTML !
<body>
<html>
• html 标签是整个 html 文件的根标签(最顶层标签)
• head 标签中写页面的属性.
• body 标签中写的是页面上显示的内容。
• title 标签中写的是页面的标题。
效果如下：
2.2.2 标签层次结构
• 父子关系
• 兄弟关系
上面代码其中:
• head 和 body 是 html 的⼦标签(html 就是 head 和 body 的父标签)。
• title 是 head 的子标签. head 是 title 的父标签.
• head 和 body 之间是兄第标签。
**注意：**F12 或者右键审查元素, 开启开发者⼯具, 切换到 Elements（元素） 标签, 就可以看到页面结构细节。
标签之间的结构关系, 构成了⼀个 DOM树：
DOM 是 Document Object Mode (⽂档对象模型) 的缩写。
2.3 HTML常见标签
2.3.1 标题标签
有6个（h1-h6)数字越大标签字体越小。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>我的第一个HTML文件</title>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<body>
<html>
2.3.2 段落标签
p表示一个段落
<!-- 代表一个空格-->
<p> 这是一个段落(首行缩进四个空格)
</p>
<p>这是 一个段落（单空格）
</p>
上面两个标签的效果如下：
注意：
• p 标签描述的段落, 前面没有缩进.
• 主动根据浏览器宽度来决定排版.
• html 内容⾸尾处的换行, 空格均无效。
• 在 html 中文字之间输入的多个空格只相当于⼀个空格。
• html 中直接输入换行不会真的换行, 而是相当于⼀个空格。
2.3.3 换行标签
在上面的段落标签当中加一个br标签看看会怎样呢？想要完成换行的话, 也可以通过br标签来实现.br 是 break 的缩写. 表示换行。
<!-- 代表一个空格-->
<p> 这是一个段落(首行缩进四个空格)
</p>
<p>这是<br>一个段落（单空格）
</p>
<body>
<html>
用浏览器打开看看效果：
可以看到换行成功了。
2.3.4 图片标签
<img src="rose.jpg alt="" border="">
img 标签必须带有 src 属性. 表示图片的路径。
img 标签的其他属性
• width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就可以, 另外⼀个会等比例缩放.，否则就会图片失衡。
• border: 边框, 参数是宽
我们先随便去网上找一张图片，如下
然后输入代码：
<br>
<!--width和height用来设置图片像素的宽度和高度 src指的是图片的路径位置 alt是一个备注-->
<img src="https://pica.zhimg.com/50/v2-636b67eef271b4eb6467e25439dd719c_720w.jpg?source=1940ef5c"alt="这是一张图片" width="60px"height="60">
<br>
效果：
可以看到这个表情出现了。
这个alt相当于一个注释,我们把这个路径去掉一部分然后再打开浏览器，然后就会发现这个alt在这块的作用啦。
<!--width和height用来设置图片像素的宽度和高度 src指的是图片的路径位置 alt是一个备注-->
<img src="https://pica.zhimg.com/50/v2-636b67eef271b4eb6467e25439dd719c_720w."alt="这是一张图片" width="60px"height="60">
可以看到那个图片不见了，然后多了一行字,这个就是这个alt的作用了。
2.3.5 超链接
<a href=""target=""></a>
• href: 必须具备, 表示点击后会跳转到哪个页面。
• target: 打开方式， 默认是 _self. 如果是 _blank 则用新的标签页打开。
<!--超链接-->
<!--外部链接 链接其他的网址-->
<a href="https://blog.csdn.net/2302_81090306?type=blog"target="_blank">我的博客主页</a><br>
<!--再创建一个demo1.html文件-->
<!--内部链接-->
<a href="demo1.html">点我跳转到demo1链接</a><br>
<!--空链接-->
<a href="#"target="_blank">空链接</a><br>
效果如下：
2.3.6 表格标签
<!--表格标签-->
<table border="1" align="center" width="300"height="300" cellspacing="0"><tr><td>qqq</td><td>www</td></tr><tr><td>eee</td><td>fff</td></tr><tr><td>ggg</td><td>hhh</td></tr>
</table>
• align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
• border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框。
• cellpadding: 内容距离边框的距离, 默认 1 像素。
• cellspacing: 单元格之间的距离. 默认为 2 像素。
• width / height: 设置尺寸。
合并单元格：
<!--表格标签-->
<table border="1" align="center" width="300"height="300" cellspacing="0"><tr>
<!-- 合并单元格 www--><td colspan="2">qqq</td>
<!-- <td>www</td>--></tr><tr><td >eee</td>
<!-- 合并单元格hhh--><td rowspan="2">fff</td></tr><tr><td>ggg</td>
<!-- <td>hhh</td>--></tr>
</table>
效果：
2.3.7 表单标签
表单是让用户输⼊信息的重要途径.
分成两个部分:
• 表单域: 包含表单元素的区域. 重点是 form 标签.
<!--from 标签 跟submit一起用-->
<!--get->向服务端获取资源-->
<!--post->向服务端发送信息-->
<form action="test1.html" method="get">
• 表单控件: 输⼊框, 提交按钮等. 重点是 input 标签.
• type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.
• name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀.
• value: input 中的默认值.
• checked: 默认被选中
介绍几种类型：
1.文本框
<input type="text">
举个例子：
用户名:<input type="text"name="username"size="11"><br>
效果：
2.密码框
<input type="password">
举个例子：
密码:<input type="password"name="password"size="11"><br>
效果：
3.单选框
<!--单选按钮--> 性别:<input type="radio" name="gender" id="gender1"value="1" > <label for="gender1">男</label><input type="radio" name="gender" id="gender2"value="2"> <label for="gender2">女</label><input type="radio" name="gender" id="gender3"value="0"> <label for="gender3">保密</label><br>
效果：
4.复选框
<!--多选按钮--> 兴趣:<input type="checkbox" name="hobby" id="fun1"value="1"> <label for="fun1">篮球</label><input type="checkbox" name="hobby" id="fun2"value="2"><label for="fun2">足球</label><input type="checkbox" name="hobby" id="fun3"value="3"><label for="fun3">乒乓球</label><input type="checkbox" name="hobby" id="fun4"value="4"><label for="fun4">羽毛球</label><br>
效果：
5.按钮的实现
<!--实现按钮--><button> 1.这是一个button按钮</button><br><input type="button" value="2.这是一个input:button按钮"><br><input type="submit" value="3.这是一个submit按钮"><br>
效果：
2.3.8 select标签
1.文本域
个人描述:<textarea rows="10" cols="5"></textarea><br>
效果：
2.下拉菜单
<!-- 下拉菜单-->
<!-- 默认选择selected-->专业：<select><option value="1" selected>数据科学与大数据技术</option><option value="2">计算机科学与技术</option><option value="3">数字媒体与技术</option><option value="4">人工智能</option></select><br>
效果：
2.3.9 无语义标签
div 标签, division 的缩写, 含义是分割
span 标签, 含义是跨度就是两个盒子. 用于网页布局
<div><span>span1</span><span>span2</span>
</div>
<div><span>span3</span><span>span4</span>
</div>
<div><span>span5</span><span>span6</span>
</div>
效果：
2.4 综合练习-实现一个用户注册的网页
要求实现效果：
• 使用表格进行整体布局
• 使用各种 input 标签实现页面中的输入控件
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>用户注册</title><style>div{color:red;font-size=300px;}</style>
</head>
<body>
<h1>用户注册</h1>
<table><tr><td>用户名</td><td><input type="text" name="Username" size="11" placeholder="请输入用户名"></td></tr> <br><tr><td>手机号</td><td><input type="text" name="Number" size="11" placeholder="请输入手机号"></td></tr> <br><tr><td>密码</td><td><input type="password" name="Password" size="11" placeholder="请输入密码"></td></tr>
</table>
<div><button>注册</button> <span>已有账号？</span><a href="#">登录</a>
</div>
</body>
</html>
效果：
欧耶！！我学会啦！！！