HTML
html
超文本链接(标记)语言
H5
HTML v5
get/post/delete/put ------ restful 网络规划
Web开发
结构+样式+动作
架构 + 装饰 + 交互（动作）
装饰做好了--> UI工程师
标签
文本相关
图片、图像、声音
导航
表格*
列表
表单标签*
布局标签
H5扩展
入门内容
页面构成 = 文字 图片 有时加上视频
可以修改页面内容
构建页面
标签 <>
标签类型
-
单标签（/可写 可不写）
</x>图片
< hr/ >
-
双标签
<x> 文本内容 </x>
CSS -- 老早之前是标签+属性
文本标签
<h1>~<h6>
<p> </p>xxx.html
hr标签
换行标签 br
br - - break（分隔） 放在行上，标签内。
<br/>
特殊符号
&符号
空格（英文）
  ； ------ 一个空格 不断行的空白
其他
HTML 原代码 显示结果 描述
< < 小于号或显示标记
> > 大于号或显示标记
& & 可用于显示其它特殊字符
" " 引号
® ® 已注册
© © 版权
™ ™ 商标
  半个空白位
  一个空白位
不断行的空白
´ ´ © © > > µ µ ® ®
& & ° ° ¡ ¡ >> >>
¦ ¦ ÷ ÷ ¿ ¿ ¬ ¬ § §
• • ½ ½ << << ¶ ¶ ¨ ¨
¸ ¸ ¼ ¼ < < ± ± × ×
¢ ¢ ¾ ¾ ¯ ¯ " " ™ ™
€ € £ £ ¥ ¥
„ „ ... ... · · › › ª ª
ˆ ˆ " " --- — ' ' º º
† † ‹ ‹ -- – ‚ ‚ " "
‡ ‡ ' ' ‰ ‰ ­ ˜ ˜
≈ ≈ ⁄ ⁄ ← ← ∂ ∂ ♠ ♠
∩ ∩ ≥ ≥ ≤ ≤ ″ ″ ∑ ∑
♣ ♣ ↔ ↔ ◊ ◊ ′ ′ ↑ ↑
↓ ↓ ♥ ♥ − − ∏ ∏ ‍
♦ ♦ ∞ ∞ ≠ ≠ √ √ ‌
≡ ≡ ∫ ∫ ‾ ‾ → →
α α η η μ μ π π θ θ
β β γ γ ν ν ψ ψ υ υ
χ χ ι ι ω ω ρ ρ ξ ξ
δ δ κ κ ο ο σ σ ζ ζ
ε ε λ λ φ φ τ τ
Α Α Η Η Μ Μ Π Π Θ Θ
Β Β Γ Γ Ν Ν Ψ Ψ Υ Υ
Χ Χ Ι Ι Ω Ω Ρ Ρ Ξ Ξ
Δ Δ Κ Κ Ο Ο Σ Σ Ζ Ζ
Ε Ε Λ Λ Φ Φ Τ Τ ς ς图片img
单标签
放入本地图片
注释快捷键：c + /
<!-- 注释内容-->video视频标签
双标签
导航标签a标签
可以跳转.
表格标签
table,thread,tr(table row),th,tbody,td(table date),tfoot.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签案例</title>
</head>
<body>
<h1>表格标签</h1>
<hr />
<table border="1" width = 100% height = "200px">
<!-- 边框宽度默认是1 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>专业</th>
<th>学校</th>
<th>图片</th>
</tr>
</thead>
<tbody>
<tr>
<th>杨喻媚</th>
<th>女</th>
<th>18</th>
<th>化学</th>
<th>西北农林科技大学</th>
<!-- 行扩容 -->
<!-- 引入本地图片 =>""/'' -->
<th rowspan="3"><img src="../img/yym.jpg" width="100%"height=300px /></th>
</tr>
<tr>
<th>杨喻媚</th>
<th>女</th>
<th>18</th>
<th>药学</th>
<th>西北农林科技大学</th>
<th>-</th>
</tr>
<tr>
<th>杨喻媚</th>
<th>女</th>
<th>18</th>
<th>药学</th>
<th>西北农林科技大学</th>
<th>-</th>
</tr>
</tbody>
<tfoot>
<!-- 列扩容------> -->
<tr>
<td colspan=""></td>
</tr>
</tfoot>
</table>
</body>
</html>扩容正好相反 colspan
表单标签
可以跳转.
form
html
<from action = "url地址">
</from>button 按钮
html
<button> 提交 </button>input
按钮
html
<imput type = "submit" />
html
<from action = "https://www.bilibili.com/">
<button>跳转</button>
<input type = "submit" value = "提交按钮">
</from>
html
<tr>
<td><label>入职日期: </label>
</td>
<td>
<input type="date" />
</td>
</tr>
<tr>
<td><label>工作经验: </label>
</td>
<td>
<input type="number" />
</td>
</tr>
<tr>
<td><label>工作照片: </label>
</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td><label>自我介绍: </label>
</td>
<td>
<textarea rows="5"></textarea>
</td>
</tr>
html
<form action="#">
<fieldset>
<legend>员工</legend>
<table border='1' width='500px'>
<tbody>
<tr>
<td>
<label>用户名: </label>
</td>
<td>
<input type="text" placeholder="用户名"/>
</td>
</tr>
<tr>
<td>
<label>密码 : </label>
</td>
<td>
<input type="password" placeholder="密码"/>
</td>
</tr>
<tr>
<td>
<label>性别 : </label>
</td>
<td>
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
</td>
</tr>
<tr>
<td>
<label>专业 : </label>
</td>
<td>
<select >
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
</select>
</td>
</tr>
<tr>
<td>
<label>爱好 : </label>
</td>
<td>
<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>跳绳
<input type="checkbox" name="hobby"/>游戏
</td>
</tr>
<tr>
<td>
<label>日期 : </label>
</td>
<td>
<input type="date" >
</td>
</tr>
<tr>
<td>
<label>工龄 : </label>
</td>
<td>
<input type="number" />
</td>
</tr>
<tr>
<td>
<label>照片 : </label>
</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>
<label>简介 : </label>
</td>
<td>
<textarea rows="s"></textarea>
</td>
</tr>
</tbody>
</table>
<input type="submit" value="提交"/>
</fieldset>
</form>HBuilder官网
准备工作
