HTML基础
HTML文档的结构
<!DOCTYPE html> 文档类型 html ----MIME类型
<html lang="en"> language=“en” zh-cn 属性节点
<head>
<meta charset="UTF-8"> 源 编码字符集----utf-8
<title>Document</title> 标题
</head>
<body>
正文
</body>
</html>
Html的格式 由两个种类的标签构成
1.双标签 <html> </html>
2.单标签 <meta charset=”utf-8”> <br/>
换行
Tag -----标签
Meta -----源 metadata 源数据
基本常用标签
标题标签
<hn>
n = 1-6 表示的是网页或者文章的标题 字体大小从大到小 默认加粗
<hr>
标尺线
<p>
行的控制
align 属性节点 3个值 left center right
<div>
区域划分
颜色: rgb(255,255,255) 0-255 r-red g-green b- blue
#000000~#ffffff 以十六进制的方式去表示颜色
使用颜色的单词 英文 pink orange yellow black white gold
Body 属性
text 用于表示正文的文本颜色
bgcolor 用于表示背景颜色
background 用于表示文档的背景图像 一般不会使用图片作为页面的背景
相对路径时 ./ 当前路径 …/ 当前路径的父路径
表单
用于收集用户数据 在什么样的场景会使用到表单
登陆、注册 表格 需要提交的场景 都会用表单
<form></form>
action -----表单提交路径 -----跳转的功能
method -----提交的方式
<input>
输入
Type ----- text password checkbox radio submit reset file 等等
Text ----文本框
Password ----密码框
Checkbox —多选框
Radio ----单选框
Submit ----提交按钮
Reset ----重置按钮
File -----文件上传
路径地址 : file:///D:/Project/code/1.html?
https://www.baidu.com/?
https://www.baidu.com/?username=zhangsanfeng&pwd=123123
file:///D:/Project/code/1.html
file:///D:/Project/code/1.html?username=zhangsan&pwd=123&sex=on&hobby=on&hobby=on
file:///D:/Project/code/1.html?username=zhangsan&pwd=123&sex=%E7%94%B7&hobby=%E7%9D%A1%E8%A7%89&hobby=%E5%90%AC%E6%AD%8C
路径的规则 ? 和 &
? 号表示的是 路径的跳转地址结束
& 号表示的是 属性之间的间隔
Method的提交方式来源于HTTP协议
<select>
标签 选择框 常用属性
disabled
multiple
<textarea>
文本域
Rows row 行
Cols column 列
a标签
标签 超链接 作用页面跳转
html页面跳转:
1.a标签进行页面跳转 属于get请求方式
2.form表单get请求
3.form表单post请求
标签的使用:
1.使用a标签进行外部跳转 ----外链接
2.使用a标签跳转到网页的内部 ----锚点
Body中的另外三个属性
alink 活动链接
link 未访问链接
vlink 访问链接
img标签
用于在页面中引入图片
src -----source 源代码
alt -----
border ----边框 单位像素值
width 宽度 height 高度 像素值 ----百分比
usemap 用于做位图 map ----映射
map 位图
area 规定位图区域
表格
<table>
标签表示的是表格
<tr>
表行
<th>
表头 默认加粗
<td>
表元
表格布局
4.<!DOCTYPE html>
5.<html lang="en">
6.<head>
7. <meta charset="UTF-8">
8. <title>Document</title>
9.</head>
10.<body>
9. <h1>热门电影板块</h1>
10. <hr>
11. <table width="800px">
12. <tr>
13. <td>最近热门电影</td>
14. <td>热门</td>
15. <td>最新</td>
16. <td>豆瓣评分</td>
17. <td>冷门佳片</td>
18. <td>华语</td>
19. <td>欧美</td>
20. 22.<td>日本</td>
23. <td style="padding-right:60px;padding-left:120px">
24. <a href="two.html">更多>></a>
25. </td>
26.
27. </tr>
28. </table>
29. <hr>
30. <table width="800px">
31. <tr>
32. <td><img src="image/2.png" width="200px"></td>
33. <td><img src="image/3.png" width="200px"></td>
34. <td><img src="image/2.png" width="200px"></td>
35. <td><img src="image/3.png" width="200px"></td>
36. </tr>
37. <tr align="center">
38. <td>致命ID</td>
39. <td>万能钥匙</td>
40. <td>禁闭岛</td>
41. <td>恐怖游轮</td>
42. </tr>
43.
44.
45. </table>
46. <table width="800px">
47. <tr>
48. <td><img src="image/2.png" width="200px"></td>
49. <td><img src="image/3.png" width="200px"></td>
50. <td><img src="image/2.png" width="200px"></td>
51. <td><img src="image/3.png" width="200px"></td>
52. </tr>
53. <tr align="center">
54. <td>致命ID</td>
55. <td>万能钥匙</td>
56. <td>禁闭岛</td>
57. <td>恐怖游轮</td>
58. </tr>
59.
60.
61. </table>
62.</body>
</html>
列表
1.无序列表
<ul>
无序列表的标签
<li>
列表的选项
2.有序列表
<ol>
有序列表标签
<li>
列表的选项
3.定义列表
<dl>
表示定义列表
<dt>
定义的项目
<dd>
定义项目的描述