Java前端基础

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>

	<!-- 空格-&nbsp -->
	<header>网页&nbsp;&nbsp;头部</header>
</body>