Java前端基础—HTML
目录
- Java前端基础—HTML
- 1.简介
- 2.基础语法
- 2.1HTML页面固定结构
- 2.2标题标签
- 2.3段落标签
- 2.4换行标签
- 2.5水平线标签
- 2.6文本标签
- 2.7图片标签
- 2.8音频标签
- 2.9视频标签
- 2.10链接标签
- 2.11列表标签
- 2.12表格标签
- 2.13表单标签
- 2.14语义标签
1.简介
1.网页组成：文字，图片，音频，视频，超链接。
2.代码如何转换成网页：依靠的是浏览器的渲染和解析将代码翻译成网页。
3.渲染引擎**（浏览器内核）**：浏览器中专门对代码进行解析渲染的部分。浏览器出品的公司不同，内在的渲染引擎也是不同，渲染引擎不同，导致解析相同代码的速度、性能、效果也不同。这就是后面前端要处理一大难题，适配兼容问题。
4.web 标准：让不同浏览器按照相同的标准显示结果，让展示的效果统一。
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和为止等页面样式（颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互（负责页面的动态效果） |
2.基础语法
2.1HTML页面固定结构
<!--
html：网页的整体
head：网页的头部，就是网页上面的名字
body：网页的身体，就是网页具体的内容
title：网页的标题
-->
<html><head><title>标题</title></head><body>主体内容</body>
</html>
2.2标题标签
<body><h1>1级标题</h1><h2>2级标题</h2><h3>2级标题</h3><h4>2级标题</h4><h5>2级标题</h5><h6>2级标题</h6>
</body>
2.3段落标签
<!--
段落标签独占一行
段落标签里面选择style=，选择风格特性，这里2em代表段落前面空两格
-->
<p style="text-indent: 2em;">这是一个段落<br>标签
</p>
2.4换行标签
<!-- 换到下一行，这是个单标签 -->
<p style="text-indent: 2em;">这是一个段落<br/>标签</p>
2.5水平线标签
<!-- <hr/>是个单标签 -->
<body><h1>这是一个标题标签</h1><hr/><h2>2级标题</h4>
</body>
2.6文本标签
<body><b style="color: red;">加粗</b><i>倾斜</i><u>下划线</u><s>删除线</s><strong>加粗</strong><ins>下划线</ins><em>倾斜</em><del>删除线</del>
</body>
2.7图片标签
<!--
特点：是单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置，也可以加载gif
属性值：alt：替换文本，只有图片加载失败时候才会显示的文本title：提示文本，当鼠标悬停的时候，才显示文本title文本不仅仅用于图片标签，还可以用于其他标签width和height：宽度和高度（数字）如果只设置width和height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）如果同时设置了width和height两个,若设置不当此时图片可能会变形
-->
<body><img src="链接地址" alt="">
</body>
2.8音频标签
<!--
src:路径
controls:显示播放的控件
autoplay:自动播放(部分浏览器不支持)
loop:循环播放-->
<audio src="./音频名.mp3" controls></audio>
2.9视频标签
<!--
src:视频路径
controls:显示播放空间
autoplay:自动播放(谷歌浏览器中需要配合muted实现静音播放) loop:循环播放-->
<video src="./视频名.mp4" controls autoplay muted></video>
2.10链接标签
<!--
空链接：用#代替
href:设置跳转链接网站地址
target:设置目标网页的打开形式_self 默认值，在当前窗口中跳转(覆盖原网页)_blank 在新窗口中跳转(保留原网页)
-->
<a href="https://www.baidu.com">跳转到百度</a>
2.11列表标签
<!--
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表格标签
<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添加功能 |
<!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语义标签
<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相关知识：点这里
