Java前端基础---HTML
目录
1.简介
1.网页组成：文字，图片，音频，视频，超链接。
2.代码如何转换成网页：依靠的是浏览器的渲染和解析将代码翻译成网页。
3.渲染引擎**（浏览器内核）**：浏览器中专门对代码进行解析渲染的部分。浏览器出品的公司不同，内在的渲染引擎也是不同，渲染引擎不同，导致解析相同代码的速度、性能、效果也不同。这就是后面前端要处理一大难题，适配兼容问题。
4.web 标准：让不同浏览器按照相同的标准显示结果，让展示的效果统一。
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和为止等页面样式（颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互（负责页面的动态效果） |
2.基础语法
2.1HTML页面固定结构
html
<!--
html：网页的整体
head：网页的头部，就是网页上面的名字
body：网页的身体，就是网页具体的内容
title：网页的标题
-->
<html>
<head>
<title>标题</title>
</head>
<body>
主体内容
</body>
</html>2.2标题标签
html
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>2级标题</h3>
<h4>2级标题</h4>
<h5>2级标题</h5>
<h6>2级标题</h6>
</body>2.3段落标签
html
<!--
段落标签独占一行
段落标签里面选择style=，选择风格特性，这里2em代表段落前面空两格
-->
<p style="text-indent: 2em;">
这是一个段落<br>标签
</p>2.4换行标签
html
<!-- 换到下一行，这是个单标签 -->
<p style="text-indent: 2em;">
这是一个段落<br/>标签
</p>2.5水平线标签
html
<!-- <hr/>是个单标签 -->
<body>
<h1>这是一个标题标签</h1>
<hr/>
<h2>2级标题</h4>
</body>2.6文本标签
html
<body>
<b style="color: red;">加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
</body>2.7图片标签
html
<!--
特点：是单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置，也可以加载gif
属性值：
alt：替换文本，只有图片加载失败时候才会显示的文本
title：提示文本，当鼠标悬停的时候，才显示文本title文本不仅仅用于图片标签，还可以用于其他标签
width和height：宽度和高度（数字）如果只设置width和height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）如果同时设置了width和height两个,若设置不当此时图片可能会变形
-->
<body>
<img src="链接地址" alt="">
</body>2.8音频标签
html
<!--
src:路径
controls:显示播放的控件
autoplay:自动播放(部分浏览器不支持)
loop:循环播放
-->
<audio src="./音频名.mp3" controls></audio>2.9视频标签
html
<!--
src:视频路径
controls:显示播放空间
autoplay:自动播放(谷歌浏览器中需要配合muted实现静音播放) loop:循环播放
-->
<video src="./视频名.mp4" controls autoplay muted></video>2.10链接标签
html
<!--
空链接：用#代替
href:设置跳转链接网站地址
target:设置目标网页的打开形式
_self 默认值，在当前窗口中跳转(覆盖原网页)
_blank 在新窗口中跳转(保留原网页)
-->
<a href="https://www.baidu.com">跳转到百度</a>2.11列表标签
html
<!--
1.无序列表 2.有序列表：有明确排序的布局 3.自定义列表
-->
<body>
<!-- 表示无序序列的整体，用于包裹li标签 -->
<ul>
<!-- 表示无序列表的每一项，用于包含每一行的内容 -->
<li>这是一个无序列表</li>
</ul>
<!-- 表示有序序列的整体，用于包裹li标签 -->
<ol>
<!-- 表示有序列表的每一项，用于包含每一行的内容 -->
<li>这是一个有序列表</li>
</ol>
<!-- dl 表示自定义列表的整体，用于包裹dt/dd标签 -->
<dl>
<!-- dt 表示自定义列表的主题 -->
<dt>帮助中心</dt>
<!-- dd标签会自动显示缩进 -->
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
</body>2.12表格标签
html
<body>
1.普通表单，没有样式
<!-- 表格整体，可用于包裹多个tr -->
<table>
<!-- 表格每行，可用于包裹td -->
<tr>
<!-- 表格单元格，可用于包裹内容-->
<td>姓名</td><td>学科</td><td>成绩</td>
</tr>
<tr>
<td>小明</td><td>数学</td><td>142</td>
</tr>
<tr>
<td>小风</td><td>英语</td><td>144</td>
</tr>
</table>
2.添加样式，表名和表头的表格
<table border="3" width="200" height="120"> <!-- 添加样式 -->
<!--
caption-表格大标题-表示表格整体大标题，默认在表格整体顶部居中位置显示
th-表头单元格-表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
-->
<caption><b>成绩单</b></caption>
<tr>
<th>姓名</th><th>学科</td><th>成绩</td>
</tr>
<tr>
<td>小明</td><td>数学</td><td>142</td>
</tr>
<tr>
<td>小风</td><td>英语</td><td>144</td>
</tr>
</table>
3.含有表格结构的标签
<table border="3" width="200" height="120">
<caption><b>成绩单</b></caption>
<thead>
<tr>
<th>姓名</th><th>学科</th><th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td><td>数学</td><td>142</td>
</tr>
<tr>
<td>小风</td><td>英语</td><td>144</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>姓名集</td><td>学科集</td>><td>1111</td>
</tr>
</tfoot>
</table>
4.合并单元格
<tr>
<td>耶耶</td>
<!--
rowspan 合并单元格的个数跨行合并，将多行单元格垂直合并
colspan 合并单元格的个数跨列合并，将多列的单元格水平合并
-->
<td rowspan="2">144</td>
<td>数学</td>
</tr>
<tr>
<td>云云</td><!--<td>133--></td><td>数学</td>
</tr>
</body>2.13表单标签
场景：在网页中显示收集用户信息的表单效果，如登录页、注册页
标签名：input，input标签可以通过type属性值的不同，展示不同效果
type属性值：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于多选多 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，需要配合js添加功能 |
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!-- 1.type = "text"时placeholder提示文字 -->
<p>
<input type="text" placeholder="请输入姓名">
</p>
<!-- 2.type = "radio"时只能有一个被选中，checked默认选中 -->
<p>
性别：<input type="radio" name="gender">男
<input type="radio" name="gender" checked> 女
</p>
<!-- 3.type = "file"时选择文件，multiple多文件选择 -->
<p>
文件选择：<input type="file" multiple>
</p>
<!-- 4.input和button的type 都可以为"submit","reset","button" -->
<p>
<button type="submit">提交按钮</button>
</p>
<!-- 5.下拉列表标签，select是整体，option是下拉每一项，option是默认选中 -->
<select>
<option>小明</option>
<option selected>小白</option>
</select>
<!-- 6. textarea 文本域标签 场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：cols：规定了文本域内可见宽度 rows：规定了文本域内可见行数
右下角可以拖拽改变大小，该样式主要采用CSS设置
-->
<br/><br/>
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
<!-- 7.label 常用于绑定内容与表单标签的关系，原来需要点选项前的圆圈，现在直接点击文本也可以选中 -->
<p>
<label><input type="radio" name="gender"> 女</label>
</p>
</body>
</html>2.14语义标签
html
<body>
<!-- 无语义标签 -->
<div>这是一个div标签</div>
<div>这是第二个div标签</div>
<span>这是一个span标签</span>
<span>这是第二个span标签</span>
<!-- 有语义的布局标签 -->
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
<!-- 空格-  -->
<header>网页 头部</header>
</body>注：以上是HTML主要使用部分，还有些细碎衍生部分这里不多做说明。可以从这里去学习HTML相关知识：点这里