0313-html基础

1. 背景知识

java全栈

前端和后端

前端

html
css
js
vue

后端

java
mysql
javaSE
spring
Mybatis
Redis
SpringBoot
SpringCloud

前端：

前端是指用户可以直接看到并与之交互的。主要涉及到的网页，小程序，软件的界面和用户体验。
主要技术栈：html css js vue
作用：
- 创建美观的用户界面
- 确保在不同设备的兼容性
- 提供流畅的用户体验，优化页面

后端：

后端是指用户看不到的部分，负责处理业务逻辑，数据的存储
作用：
- 处理业务逻辑
- 管理数据存储
- 确保安全性

全栈开发：

是指同时具有前端和后端开发技能的开发者。可以独立完成整个应用程序的开发。

总结：

前端关注的是用户看得到的东西
后端关注的是用户看不到但支撑应用运行的东西，二者缺一不可。

学习网址：

w3school

2. HTML骨架

骨架

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
	</body>
</html>

字符集
- utf-8
- gbk
- gb2312
SEO
- 搜索引擎优化
- meta
  - name content
HTML
- 超文本标记语言
- 双标签单标签
标题和段落标签
- h1~h6
- p
- 注意：p标签内不能嵌套h和p
文字标签
- font
- H5已经弃用该标签
div
- 盒子
特性
- 空白折叠
- 转义字符
  - < 小于号
  - > 大于号
  -   空格（不会被折叠）
  - &copy 版权号
- 注释
列表
- 无序列表
  - <ul><li></li></ul>
  - 属性：type: disc/circle/square
  - li 不能散着放
  - ul 的子标签只能是li
  - li 里面可以放任何东西
- 有序列表
  - <ol><li></li></ol>
  - 属性：type: 1 / A / a / i / I
    - start: 起始值
    - reversed 无值,倒置
- 定义列表
  - <dl><dt><dd></dd></dt></dl>
  - 示例：

<dl>             //definition list 定义列表
	<dt>北京</dt> //data term 数据项
	<dd>全国政治、经济、文化中心，国际化大都市</dd>  //data definition 数据定义
</dt>

图片
- <img src="地址" alt="加载失败显示" width="400" height="500"
- 支持的格式：.bmp/.gif/.jpg/.png/.svg/.webp
超链接
- <a href="地址" >点击</a>
- 属性：
  - target = "blank"
  - title = "预览文本"
  - 地址#id值
    - 跳转锚点，可跨页面
    - id是h标题的id属性值
  - 地址可以是：网页链接，下载链接，邮件链接，电话链接
音频
- <audio src="地址" controls autoplay loop>标签中的文字浏览器不兼容是会显示</audio>
- 属性：
  - controls 播放控件
  - autoplay 自动播放
  - loop 循环播放
- source子标签
  - <source src="地址.mpeg" type="audio/mpeg"
  - <source src="地址.ogg" type="audio/ogg"
  - <source src="地址.mp3" type="audio/mp3"
div
- 属性：class
- HTML5新区块：
  - section/aside/header/footer/main/nav/article
语义化标签
- span
- ~~b u i (加粗/倾斜/下划线)~~
- strong/em/mark (加粗/强调/高亮)
表单
- <form action="" method="get/post" enctype=""></form>
- <input type=" " name="" value="" placeholder="" disabled>
- 属性：text/radio/checkbox/password/button/reset/submit
单选按钮-radio
- <input type="radio" name="" value="" checked>
复选框-checkbox
- <input type="checkbox" name value checked>
密码框-password
- <input type="password" name value>"
三种按钮-submit / reset / button
- 提交-submit
  - <input type="submit" >
- 重置-reset
  - <input type="reset">
- 按钮-button
  - <input type="button">
  - 也可以是标签形式
文件上传-file
- <input type="file">
- 要在form标签中写:enctype="multipart/form-data"
新增控件-color/data/time/email/file/number/range/search/url
label标签
- 单纯包含：<label><input type="radio"></label>
- id指定：<input type="radio" id="nan">
  <label for="nan">男</label>
datalist标签
- 为输入框提供备选项
- 通过list指向datalist的id值

<input type="text" list="province-list">
<datalist id="province-list">
	<option value="山东">
	<option value="山西">
	<option value="广东">
	<option value="广西">
	<option value="河南">
	<option value="河北">
</datalist>

button 标签
- <button name="" value="">按钮</button>
select 标签
- 下拉菜单，option表示内部选项

<select>
	<option value="" selected>支付宝</option>
	<option value="">微信</option>
	<option value="">网银</option>
<select>

textarea 标签
- <textarea rows="" cols=""></textarea>

3. 表格

基本框架

<table border="1">
	<caption>我是表格标题</caption>
	<tr>
		<td  colspan="" rowspan=""></td>
		<td></td>
	</tr>
</table>

table 标签
caption 标签
- 表格的标题，常作为table 的第一个子元素出现
tr/td 标签
- 常用属性：colspan / rowspan
其他特性：

<table>
	<thead>
		<tr>
			<th>产品</th>
			<th>上半年</th>
			<th>下半年</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
		</tr>
	</tfoot>
</table>