目录
认识HTML的基本结构
HTML、CSS、JavaScript统称为前端三剑客。HTML用来定义页面元素，相当于是一个网页的基础架构；CSS用来定义页面样式，即修饰页面；JavaScript用来定义页面的交互。
在学习前端的过程中，我使用的是vs code编译器。
HTML文件基本结构
首先，依旧以Hello World来开始HTML的学习，例如如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HelloWord</title>
</head>
<body>
Hello World
<br>
刚开始学html我好开心呀
</body>
</html>运行结果如下
HTML代码是由标签构成的，例如上述代码中的html、body、head、title、br都是标签，这些标签有什么作用呢？
· html标签：是整个html文件的根标签
· head标签：head标签中写的是页面的属性，在写html代码时，可以利用快捷键自动生成，在vs code中快捷键为“!” + 回车.
· body标签：body标签中写的是页面的内容
· title标签：title标签中写的是页面的标题
· br标签：换行标签，下文中常用标签会介绍
标签层次结构
标签的层次结构有父子关系和兄弟关系.
<html>
<head>
<title>HelloWord</title>
</head>
<body>
Hello World
<br>
刚开始学html我好开心呀
</body>
</html>在上述代码中的层次结构分析：
· head和body是html的子标签，父子关系
· title是head的子标签，父子关系
· head和body之间是兄弟关系
HTML中的常用标签
基本使用标签(注释、标题、段落...)
· 注释标签
<!--记录我的第一次HTML学习-->· 标题标签
标题标签有6个，从h1-h6，数字越大，字体越小.
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>效果展示
· 段落标签
段落标签用来进行分段操作，当一段文字很长时，就利用<p> </p>标签来进行分段
<!DOCTYPE html>
<html>
<head>
<title>初识HTML</title>
</head>
<body>
<p>第一次学HTML</p>
<p>我一定要好好学习然后做一个前端页面</p>
啦啦啦啦~
</body>
</html>效果展示
· 换行标签
<!DOCTYPE html>
<html>
<head>
<title>初识HTML</title>
</head>
<body>
第一次学HTML
<br>
我一定要好好学习然后做一个前端页面
<br>
啦啦啦啦~
</body>
</html>
格式化标签
例如加粗、倾斜、下划线、删除线
· 加粗标签
加粗<strong>与<b>两个标签都可以
· 倾斜标签
倾斜使用<em>和<i>两个标签都可以
· 删除线标签
删除线使用<del>与<s>两个标签
· 下划线标签
下划线使用<ins>和<u>两个标签
格式化标签的使用演示
<html>
<head>
<title>初识HTML</title>
</head>
<body>
<!--加粗标签-->
<strong>第一次学HTML</strong>
<br>
<b>我一定要好好学习然后做一个前端页面</b>
<br>
<!--倾斜标签-->
<em>啦啦啦啦~</em>
<br>
<i>我是倾斜标签2号</i>
<br>
<!--删除线标签-->
<del>我是删除标签1号</del>
<br>
<s>我是删除标签2号</s>
<br>
<!--下划线标签-->
<u>我是下划线标签1号</u>
<br>
<ins>我是下划线标签2号</ins>
</body>
</html>
图片标签与超链接标签
图片标签
图片标签为img，在使用该标签时，必须带上src属性，表示的图片的路径.
例如下列代码：在下述代码中，我在该html文件的同级路径下建立了img文件，在其中放置了照片
<html>
<head>
<title>初识HTML</title>
</head>
<body>
<strong>我的博客主页</strong>
<br>
<img src = "./img/myblog.jpg" alt = "这是我的博客主页" title = "我的博客主页" width = "600px" height = "400px">
</body>
</html> 
上述的代码中使用到的img标签属性解析
· alt：替换文本，当图片不能显示，就显示alt中的替换文本
· title：提示文本，当鼠标放在图片上时，就会显示title中的内容
· width/height：控制图片的宽度和高度
超链接标签
超链接标签为a，超链接标签的作用是指定所跳转到的界面
<html>
<head>
<title>初识HTML</title>
</head>
<body>
<!--在当前页面跳转-->
<a href="http://www.baidu.com">点我跳转到百度</a>
<br>
<!--打开一个新的页面-->
<a href="http://www.baidu.com" target="_blank">点我跳转到百度</a>
</body>
</html>在超链接标签中，存在两个属性，一个是href，另一个时target
· href属性的作用是指定跳转到的页面，这个是不能缺少的
· target属性：这个属性的作用是打开方式，默认是_self(即在当前页面打开)，可以指定为_blank(即打开一个新的页面).
表格标签
首先展示一段代码：
<html>
<head>
<title>初识HTML</title>
</head>
<body>
<table align="centre" border="1" cellpadding="20" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>詹姆斯</td>
<td>37</td>
<td>男</td>
</tr>
<tr>
<td>库里</td>
<td>35</td>
<td>男</td>
</tr>
</table>
</body>
</html>
解释上述代码中各个标签的作用
· table标签：表示整张表格
· tr：表示表格的一行
· td：表示一个单元格
· th：表示表头的单元格，会居中加粗
除了上述用到的标签外，还有如下两个标签
· thead：表格的头部区域（范围比th标签要大）
· tbody：表格的主体区域
table标签中有如下属性
· align：是表格相对于周围元素的对齐方式.align = "center"，即居中对齐
· border：表示边框，1表示有边框，数字越大，边框越粗，""表示没边框
· cellpadding：内容距离边框的距离，默认为1像素
· cellsapcing：单元格之间的距离，默认为2像素
· width/height：设置尺寸
列表标签
列表标签主要用来布局，使页面看起来更美观.分为有序列表、无序列表、自定义列表
· 无序列表
<html>
<head>
<title>初识HTML</title>
</head>
<body>
<h3>无序列表</h3>
<ul>
<li>詹姆斯</li>
<li>库里</li>
<li>杜兰特</li>
</ul>
</body>
</html>
· 有序列表
<html>
<head>
<title>初识HTML</title>
</head>
<body>
<h3>有序列表</h3>
<ol>
<li>詹姆斯</li>
<li>库里</li>
<li>杜兰特</li>
</ol>
</body>
</html>
· 自定义列表
dl为总标签、dt为小标题、dd围绕标题来说明
<html>
<head>
<title>初识HTML</title>
</head>
<body>
<h3>自定义列表</h3>
<dl>
<dt>我喜欢的篮球明星</dt>
<dd>詹姆斯</dd>
<dd>库里</dd>
<dd>杜兰特</dd>
</dl>
</body>
</html>
注意事项
· 元素之间是并列关系
· ul/ol中只能放li标签不能放其他标签、dl中只能放dt和dl
· li中可以放其他标签
表单标签
表单时让用户输入信息的重要途径，分为两个部分：①表单域：包含表单元素的区域，重点是form标签、②表单控件：输入框、提交按钮等，重点是input标签
· form标签
form标签描述了要把什么数据按照某种方式提交到某个界面中，代码格式如下
<form action="xxx">
内容
</form>· input标签
各种输入控件，单行文本框、按钮、单选框、复选框.
input标签中的各种属性
· type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
· name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
· value: input 中的默认值.
· checked: 默认被选中. (用于单选按钮和多选按钮)
· select标签
下拉菜单，option属性中定义selected = "selected"表示默认选中
<html>
<head>
<title>初识HTML</title>
</head>
<body>
<form>
<select>
<option>--请选择归属地--</option>
<option selected="selected">陕西省</option>
<option>山西省</option>
<option>河北省</option>
<option>河南省</option>
</select>
</form>
</body>
</html>
表单标签的综合使用
<html>
<head>
<title>初识HTML</title>
</head>
<body>
<p><strong>个人信息表</strong></p>
<form action="后端路径">
用名: <input type="test">
<br>
密码: <input type="password">
<br>
性别:
<lable for="male">男</lable><input id="male" type="radio" name="sex" checked="checked">
<lable for="female">女</lable><input id="female" type="radio" name="sex">
<br>
爱好:
<input type="checkbox" checked="checked">打篮球
<input type="checkbox">踢足球
<input type="checkbox">打羽毛球
<br>
所在地区
<select>
<option>--请选择归属地--</option>
<option>陕西省</option>
<option>山西省</option>
<option>河北省</option>
<option>河南省</option>
</select>
<br>
个人描述
<br>
<textarea rows="3" cols="50"></textarea>
<br>
普通按钮: <input type="button" value="点我一下试试">
<br>
提交按钮: <input type="submit" value="点我一下提交">
<br>
重置按钮: <input type="reset" value="点我一下重置">
<br>
上传文件: <input type="file">
</form>
</body>
</html>
8096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
