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.
<!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
<from action = "url地址"></from>
button 按钮
<button> 提交 </button>
input
按钮
<imput type = "submit" />
<from action = "https://www.bilibili.com/"><button>跳转</button>
<input type = "submit" value = "提交按钮"></from>
<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>
<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官网
准备工作