HTML基础

最新推荐文章于 2024-07-25 11:26:35 发布

吃饱睡够

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量31

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_48303524/article/details/118663682

版权

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 源数据

元素节点 Lang=“utf-8” 属性节点 `文本` 文本节点乱码一般出现原因：字符集不统一当我们在国内打开的浏览器的默认的编码格式都是GBK 需要把原有的GBK的格式修改成全球统一的格式 ---UTF-8

基本常用标签
标题标签
<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">更多&gt;&gt;</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> 定义项目的描述

吃饱睡够

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

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&g
复制链接

扫一扫