HTML基础学习
一、HTML结构
1.认识HTML标签
HTML 代码是由 “标签” 构成的，在HTML中，对标签的叫法还有“元素”。每个标签可以视为一个对象，这些对象也可以包含一些属性和方法，然后就可以在JS 中来访问或者修改这里的属性，或者调用其中的方法。
这些对象，都是通过浏览器在解析html的时候自动创建的，咱们可以通过JS 就能操作这些对象了。还能使用 JS 新增对象，删除对象，修改对象。
形如:
<body>hello</body>- 标签名 (body) 放到 < > 中
- 大部分标签成对出现. < body > 为开始标签, < /body> 为结束标签.
- 少数标签只有开始标签, 称为 “单标签”.
- 开始标签和结束标签之间, 写的是标签的内容. (hello)
- 开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).同一个HTML 里面不能有两个id相同的标签。
<body id="myId">hello</body>2.HTML 文件基本结构
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>- html 标签是整个 html 文件的根标签(最顶层标签)
- head 标签中写页面的属性.
- body 标签中写的是页面上显示的内容
- title 标签中写的是页面的标题.
3.标签层次结构
父子关系和兄弟关系
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>其中:
- head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
- title 是 head 的子标签. head 是 title 的父标签.
- head 和 body 之间是兄弟关系.
标签之间的结构关系, 构成了一个 DOM 树，DOM 是 Document Object Mode (文档对象模型) 的缩写。
4. 快速生成代码框架和利用开发者工具看
在VS code中输入一个 ！ ，再按一个回车键，就会自动生成代码的主体框架。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>细节解释：
二、写HTML的编译器
方式有两种，在idea上写，不过一定是专业版才可以。因此可以使用VS code，也可以使用记事本。
使用记事本是：先创建一个记事本，后缀改为html，之后再创建一个记事本，将html文件拖进该记事本中，再在记事本中写html即可。
但一般都是使用VS code。
在HTML中，代码的换行/空格 一般对于页面的显示效果是没有影响的。一个元素是否独占一行，这是一个专门的属性。
三、HTML常见标签
HTML里面的大部分标签都是包含“语义”的，不同的标签代表不同的含义，有不同的用途。
1. 注释标签
注释不会显示在界面上，目的是提高代码的可读性，但是，在按F12看源码时能够看到注释，并不会在编译时期把注释去掉。通过 ctrl+/ 快捷键来注释。HTML的注释标签是不能嵌套的。
有人会问，如果按F12看到了源码，那不是很容易被人抄走了？这个的确存在，但是在 JS 中会采用一些“代码混淆” 的方式来一定程度地解决这个问题，保证在代码逻辑不变的基础上，把代码的可读性尽量破坏掉。(如：把缩进、空格、换行等能去掉的去掉，把变量名换成a，b，c等)
<!-- 我是注释 -->2. 标题标签: h1-h6
有六个, 从 h1 - h6. 数字越大, 则字体越小。当前我们看到这些标题的显示效果，在不同的浏览器上，可能存在细节的差别(当前应用的是浏览器的默认样式，不同的浏览器可能会有默认值)。
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
看到一级标题的CSS格式，即使是一级标题和二级标题写在同一行，显示的效果不会是同一行，这个就是由里面的 display 来决定的。
3. 段落标签: p
把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落，而是连在了一起。
使用p标签就能够将长文本进行换行。
可以通过lorem 这样的方式构造出一个随机的长文本出来。
使用p标签的效果：内容不用管
段落和段落之间存在一定的间距，这个间距主要是为了区分段落和段落。这个间距，不同的浏览器不一样，这个可以通过CSS 来控制。
注意：
- p 标签之间存在一个空隙
- 当前的 p 标签描述的段落, 前面还没有缩进.
- 自动根据浏览器宽度来决定排版.
- html 内容首尾处的换行, 空格均无效.
- 在 html 中文字之间输入的多个空格只相当于一个空格.
4. 换行标签: br
br 是 break 的缩写. 表示换行。
注：
- br 是一个单标签(不需要结束标签)
- br 标签不像 p 标签那样带有一个很大的空隙.
- < br/> 是规范写法. 不建议写成 < br>
5. 格式化标签
加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>效果：
注：这几个格式化标签，不是独占一行的，如果想换行，就需要< br/>。这几种效果其实都可以使用CSS 来实现的，并且实际开发中还是用 CSS 来实现这些功能。
6. 图片标签: img
img 标签必须带有 src 属性. 表示图片的路径。它也是一个单标签。
这个路径可以是一个 本地 路径(要看图片和html之间的目录的相对关系)，也可以是一个 网络路径(即网络上的图片，这个可以去看它的源码去指到该图片拿到地址)
这个 rose.jpg 这个图片文件放到和 html 中的同级目录中才能这样使用：
<img src="rose.jpg">如果 test.html 没在一个文件夹中，若而 rose.jpg 放在一个image文件夹里面，则只能这样使用：
<img src="image/rose.jpg">如果 test.html 在一个 test 文件夹中，若而 rose.jpg 放在一个image文件夹里面，则只能这样使用：
<img src="../rose.jpg">img 标签的其他属性：
alt属性表示，如果图片挂了，显示这个文字，表示这个图片曾经来过。
<img src="../rose.jpg",alt:"我是一个logo">效果：
title: 提示文本. 鼠标放到图片上, 就会有提示.
<img src="../rose.jpg",alt:"我是一个logo",title="这是我的壁纸">效果：
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡
单位叫 px ，就是所谓的像素。
<img src="../rose.jpg",alt:"我是一个logo",title="这是我的壁纸",weight="500px",height="400px">效果：
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
<img src="../rose.jpg",alt:"我是一个logo",title="这是我的壁纸",weight="500px",height="400px"，border="10px">效果：
注：border可能会标红，但是并不是错误！！！，并且image标签不是独占一行的。
7. 超链接标签: a
- href: 必须具备, 表示点击后会跳转到哪个页面.
- target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
<a href="http://www.baidu.com">百度</a>效果：点进去就是百度首页
注：href属性特别重要，是必须要有的。并且标签的内容也很关键，如果是<a href="http://www.baidu.com"></a>没有了百度两字，那么按F12去指该代码时就会出现：(标签的尺寸是0x0个像素)
是根本点不了的，因此需要有内容把它撑开。
我们发现上面的a标签，点完链接后是在本窗口跳转。如果要用新窗口去跳转，就涉及到target标签。
a标签里面的 target属性：
target属性描述跳转的过程具体是否要替换原来的标签页。默认就是替换，如果想新开一个标签页，可以使用target=“_blank”来实现。
<a href="http://www.baidu.com" target="_blank">百度</a>效果：
a 标签这里的链接地址，可以有多种不同的写法：
1.直接写一个完整的 url (外面的网站)
2.也可以写一个相对路径
3.写作 # ，表示不跳转
4.下载文件，写文件的路径即可
5.锚点链接：可以快速定位到页面中的某个位置
8. 表格标签
基本使用：
- table 标签: 表示整个表格
- tr: 表示表格的一行
- td: 表示一个单元格
- th: 表示表头单元格. 会居中加粗
- thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
- tbody: 表格得到主体区域
table 包含 tr , tr 包含 td 或者 th.
如：
<!-- 创建一个表格 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>19</td>
</tr>
</table>效果及解释：
这个看着根本就不像表格，可以将其放大并且加上表格。添加属性width、height、border，单位都是像素 px 。
代码：
<!-- 创建一个表格 -->
<table width="500px" height="300px" border="1px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>19</td>
</tr>
</table>效果：仔细发现，td和table都有边框，因此就有两层的边框，很丑。
因此可以作调整，使用 cellspacing 属性控制两个单元格之间的空隙，把这个空隙设为0即可：
注：如果在设置属性的时候，如果设为0，则不用写单位。
<!-- 创建一个表格 -->
<table width="500px" height="300px" border="1px" cellspacing="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>19</td>
</tr>
</table>效果：
这些表格如果没有设置，则都是出现在左上角的，因此要想让表格居中，则添加 allign属性，如：allign=“center” 。如果是让th居中，则只能使用CSS 来实现了。
如：
table标签，除了表格以外，还可以用来进行“网页布局”，即可以规定什么东西是放在哪里的操作，靠表格的基本关系来完成布局。
9. 列表标签
主要使用来布局的，为了整齐好看。l是list的意思，li里面的i指的是item
无序列表标签[重要] ul(整个无序列表标签unorder) ， li (列表项，一个列表中包含多个表项)
有序列表标签[用的不多] ol(整个有序列表order) ，li (列表项，一个列表中包含多个表项)
自定义列表[用的不多] dl (总标签) dt (小标题) dd (标题里的内容)
如：
<!-- 有序列表 -->
<ol>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<!-- 自定义列表 -->
<dl>
<dt>我要干啥</dt>
<dd>吃饭</dd>
<dd>睡觉</dd>
<dd>打豆豆</dd>
</dl>效果：
我们在网页中看到并列的，基本上都是用的 ul 标签，如：
10. 表单标签
表单就相当于让用户“填表”，注意：此处的填表，不一定是一个“表格”，就是让用户输入一些信息。
通过表单，就可以让用户和服务器之间进行一些简单的交互。
表单标签是由好几个标签组成的，统称为表单。
- form标签：表示整个表单
- input标签：能够表示一些具体的输入控件，如：输入框、提交按钮、上传文件按钮。
- textarea标签：表示一个多行文本框。
form标签里面的 action 属性：表示用户输入的数据最终要提交谁(哪个服务器)。写一个具体的 url (服务器的地址)
如果只放一个 form 标签，就什么都不显示。<form action=""></form>，因此要搭配其它标签来使用。
input标签：表示各种用来输入的控件。”控件“这个词来源于”图形化界面“开发方式中涉及到的术语。简单来说，一个按钮 就是一个控件；一个文本框 就是一个控件；一个单选框、复选框 也都是控件(表示一个图形界面的基本元素，就可以称为是控件)。
10.1 input标签
input标签最核心的属性，叫做 type 。type 不同的取值，就表示不同的控件类型。注：input标签在form内部使用。它是一个单标签。
1.单行文本框，这是最基本的文本框，只能保存一行的内容，不能换行。
<input type="text">效果：
2.密码框。这里输入的东西都变成小圆点。
注：如果在一个网页默认保存了密码，但是我们又忘记了密码，就可以使用chrome 的开发者工具，把input 的type 改为 text，就能看到里面的内容。
<input type="password">效果：
3.单选框
往往需要把多个 input type=“radio” 关联起来，才能达到 ”N选1“ 的效果。
通过name属性，把多个单选框关联起来。如果多个单选框的 name 相同，那么就只能取其中的一个。
<input type="radio" name="gender">男
<input type="radio" name="gender">女效果:
input 里面的checked 属性，它用来表示默认被选中的值。
代码：
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女一打开就是：
注：如果上面那两个input 标签都设置为checked，即使不科学编译器也不会报错。因为HTML 和 Java 的容错上有很大的区别。Java 对于语法错误是非常严谨的，并且也能规避一些逻辑上的错误。但HTML 就管的比较宽松。
4.复选框
可以选择多个选项。
<input type="checkbox">吃饭
<br/>
<input type="checkbox">睡觉
<br/>
<input type="checkbox">打豆豆效果：
5.普通按钮
<input type="button" value="这是一个按钮" onclick="alert('hello')">效果图：
6.提交按钮
提交按钮就是把当前表单里的用户输入数据，包装成一个 HTTP 请求，发送给服务器。
<input type="submit" value="提交">假如 form标签里面的action 属性没有写，那么按这个提交键是没用的。如果action 属性中写了一个具体的地址，按了就会跳转到该地址。
如：
<form action="https:/www.baidu.com">
<input type="text" name="key">
<br/>
<input type="submit" value="提交">
</form>效果图：
提交后，跳转到百度首页，此时跳转的百度跟之前的不一样。
key就是在input里面设定的文本框的name 为key，abcd 是用户输入的信息，就是在上面的文本框中输入的信息。
7.清空按钮
把表单中当前用户输入的内容去掉。
代码：
<input type="text" name="key">
<br/>
<input type="submit" value="提交">
<input type="reset" value="清空">效果图：
- 选择文件
一般在上传文件的时候会用到。
代码：
<input type="file">效果：未选前是左上角，选了一个文件后是 左下角。
实际上没有上传到文件，只是选中了文件。因为 上传文件 过程中，浏览器具体给服务器发送了什么请求、服务器中该如何处理，解析这个请求、以及如何提取出文件的内容。servelet会详细说明，请看后续博客。
10.2 lable标签
一般搭配 input 使用，具体来说，是搭配 单选框 和 多选框 来使用。
我们之前知道了，单选的按钮点中按钮才能选中，这是没毛病的。
如：
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">未知
但是如果按钮过小，用户就不容易点中，因此可以设置为点中内容 也可以选择。
lable里面有个 for 属性，它表示当前的 lable 要和哪个 input 标签 关联起来。这里就需要给对应的 input 标签起一个唯一身份标识(id)
因此有：
<input type="radio" name="gender" id="male"><label for="male">男</label>
<input type="radio" name="gender" id="female"><label for="female>女</label>
<input type="radio" name="gender" id="unknown"><label for="unknown">未知</label>10.3 select标签
它是一个下拉菜单。select 是下拉菜单本身，它还要有选项，里面的选项是一个一个的opiton 标签。它不是嵌套于input 标签里面的。
代码：
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
<option>杭州</option>
</select>效果：
如果要设置默认的就是哪个选项，可以添加 selected 属性来制定。如果没有制定，就还是默认选第一项。
代码：
<select>
<option>北京</option>
<option selected="selected">上海</option>
<option>深圳</option>
<option>广州</option>
<option>杭州</option>
</select>效果：
具体场景也可以通过在默认选项中补充选择的信息：
如：
<select>
<option>--选择你的出生年份--</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>效果：
10.4 textarea 标签
多行编辑框。像input里面的type属性为text 的时候，是一行的，往往不够用。而textarea标签就很好地解决了这一问题。
一个屏幕最多显示10 行，超过10行就会出现滚动条去滚。并且这个多行编辑器的有下角是可以拖动，来设置大小。
代码：
<textarea cols="30" rows="10"></textarea>效果：
四、无语义标签
div和 span 就是无语义标签，无语义标签就是啥都可以干。
现在很多的网站，往往只用一个div 就够了(大部分标签都可以被div 和 span 标签来代替)
div可以视为是一个独占一行的”大盒子“，而span 可以视为一个不独占一行的”小盒子“，盒子里面又可以装其他的标签，或者盒子里面也可以再装盒子。
如果要表示的某个内容，在HTML 里有合适的标签来表示(标题，就可以使用h1-6 的标签)。如果没有合适的标签，就都可以使用div 或 span 。甚至于在极端情况下，整个页面都是 div 和span ，也不是不可以。
代码：
<div>
<span>咬人猫</span>
<span>咬人猫</span>
<span>咬人猫</span>
</div>
<div>
<span>兔总裁</span>
<span>兔总裁</span>
<span>兔总裁</span>
</div>
<div>
<span>阿叶君</span>
<span>阿叶君</span>
<span>阿叶君</span>
</div>效果：
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/ZJRUIII/article/details/123777724
内容来源于网络，如有侵权，请联系作者删除！