html4-5总结
前端软件
Sublimie
Vscode
Hbuider专业前端人员使用较多
软件的使用
打开sublime_text —新建文件
Ctrl+S 保存
HTML
超文本标记语言Hyper Text Markup Language
<!DOCTYPE html> // 文件头 ----页面的响应数据类型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
111111111111
</body>
</html>
Document 文档
Type 类型
Language —lang 语言 en 英文 zh-cn中文
<html>……</html> 双标签
<meta> 单标签<br/>
Head 表示html的头的部分
Body 表示html的正文的部分
UTF-8 ----Unicode码 全世界的通用码
Gbk
Ios8859-1
Big5
ShitTojis
Tag—E
Meta —metadata 源数据
一、如何做登录网页
1. 表单
Form—表单
该标签一般不会单独使用 会和input标签联合使用
属性：action=“url” url 表示路径 ，后跟跳转的页面名称eg：
<form action="1.html">
绝对路径：从盘符开始 要描述的文件路径 路径+文件的名称
相对路径：当前源文件和目标文件的相对路径位置
file:///D:/code/css/2.html?username=zhangsan&pwd=123
? 目标文件的结束标识
& 属性连接符
<hn></hn>标签控制文本标题N的取值是1-6，H1----H6N值越大,字体越小
method表示请求方式请求方式有两种get和post.
异同如下：
两种请求方式都是能够让后台接受到数据的。
post请求安全不会再地址栏上暴露name属性的值。
Get请求 不安全 会把name属性的值暴露在地址栏上 地址栏默认大小为64kb
A标签 可以进行页面跳转 默认为get请求
align="center"表示居中left 居左right居右eg：
bgcolor表示背景色
background表示用图片作为背景（不推荐使用）
eg:
<body align="center" bgcolor="pink">
p标签标示对行的控制
body标签中
eg选择地点
<p>
请选择地点：
<select>
<option>地方</option>
</select>
多选 使用multiple属性
文本域：textarea rows 表示行数 cols 表示列数
<br/>换行
Href=”url”
Font 标签可以控制字体的大小和颜色
锚点：使网页的展示到达某一个定位的地点
<a href=”#D1”></a>
<a name=”D1”></a>
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body align="center" bgcolor="pink">
<h2>征婚网站</h2>
<form action="1.html">
<p>用户名:<input type="text"></br></p>
<p>密码:<input type="password"></br></p>
<p>
请选择您的性别:
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
</p>
<p>
请选择你喜欢的类型:
<input type="checkbox"/>甜美型
<input type="checkbox"/>可爱型
<input type="checkbox"/>温柔型
<input type="checkbox"/>富婆型
<input type="checkbox"/>gay型
</p>
<p>
请选择你喜欢的城市:
<select>
<option>北京</option>
<option>西安</option>
<option>上海</option>
<option>重庆</option>
<option>成都</option>
<option>天津</option>
</select>
<p><input type="submit" value="提交"/></p>
</form>
</body>
</html>
显示效果：
2.Img 标签 表示页面上的图片
Src属性 ----source 指代的是图片的路径 url
Alt属性 —表示文本代替图片
<img src="image/1.jpg" alt="狗狗" width="100%" height="100%">
Width 宽度
Height高度
该两个属性可以控制图片的大小 单位可以使用XXpx 100%
Map 和area 这两个标签
Map —地图 计算机语言 映射
shape表示形状
id =id 规定元素的唯一 id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="image/1.jpg" alt="美女" usemap="#one">
<map id="one" name="one">
<area
shape="circle"
coords="240,92,10"
href="https://www.baidu.com/" >
</area>
</map>
</body>
</html>
3.表格布局
表格布局：通过表格来对网站进行整体的布局，这种布局目前来讲已经被淘汰了
主要使用的就是表格的标签
Table ----表格
Tr ----表行
Th ----表头
Td -----表元
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大型征婚</title>
</head>
<body bgcolor="pink">
<h2>大型征婚现场</h2>
<hr/>
<form action="3.html">
<table width="2000px" border="1px">
<tr>
<td>甜 美 型</td>
<td>可 爱 型</td>
<td>温 柔 型</td>
<td>富 婆 型</td>
<td>gay 型</td>
<td style="padding-right:80px; padding-left:120px;"><a href="2.html">更多>>,</td>
</tr>
</table>
<table width="1000px">
<tr>
<td><a href="3.html"><img src="D:/0.jpg" width="200px"></a></td>
<td><a href="3.html"><img src="D:/1.jpg" width="200px"></a></td>
<td><a href="3.html"><img src="D:/image/2.jpg" width="200px"></a></td>
<td><a href="3.html"><img src="D:/3.jpg" width="200px"></a></td>
<td><a href="3.html"><img src="D:/4.jpg" width="200px"></a></td>
</tr>
<tr align="center">
<td>QQ:****</td>
<td>QQ:****</td>
<td>QQ:****</td>
<td>QQ:****</td>
<td>QQ:***8</td>
</tr>
<tr align="center">
<td>姓名：周*</td>
<td>姓名：张*</td>
<td>姓名：杨*</td>
<td>姓名：谢*</td>
<td>姓名：张*</td>
二、列表
1.无序列表
<ul>
<li>哈哈</li>
</ul>
文字前默认实心圆点
适应场景 ： 论坛新闻项 展开闭合 导航
2.有序列表
<ol>
<li>但是</li>
</ol>
属性：
reversed
reverse------反转
type类型中可以使用数字 字母 以及罗马数字
3.定义列表
<dd>定义定义的描述
<dt>定义定义的项目
<dl>
<dt>今天</dt>
<dd>The day of today</dd>
<dt>明天</dt>
<dd>The day after today</dd>
</dl>
sup是上标 sub是下标
三、字体的控制跑马灯
<font> size color
<b> 加粗 <strong>
<i> 斜体
scrollamount控制速度
direction控制方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有无序列表</title>
</head>
<body shape="square">
<ul>
<li>hj</li>
<li>hjj</li>
</ul>
<ol type="1">
<li>hdjk</li>
<li>hh</li>
</ol>
<dl>
<b><dt>胡hu</dt></b>
<i><dd>暑期dhu</dd></i>
X<sup>6</sup>
x<sub>6</sub>
<marquee scrolldelay="30">我小步前进。</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee>
<marquee behavior="slide" direction="up">向上滚动一次</marquee>
</body>
</html>
四、html5中的标签
1.音频和视频
视频<vedio>
<video src="video/final.mp4" controls="controls"></video>
音频<audio>
<audio src="music/Pianoboy高至豪 - The truth that you leave.mp3" controls="controls"></audio>
2.常用的但是意义不明确的标签
在html5中给<div>标签做了很多的改进
<nav> 导航
<slide>侧栏
<header>头部
<footer>底部 等等增加代码的可读性
<label> 标记标签 通常和表单中的文本框
<span> 用于修饰文本
3. 多窗口框架
一个页面可以显示多个窗口
4.0 版本<frameset> 多窗口
5.0版本中<iframe> 内嵌窗口
注意：如果要使用frameset标签那么它不能和body标签连用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset rows="15%,*,15%">
<frame src="2.html"></frame>
<frameset cols="25%,*">
<frame src="3.html"></frame>
<frame src="4.html"></frame>
</frameset>
<frame src="6.html"></frame>
</frameset>
</html>
HTML总结：
Html4.0版本----XHTML -------HTML5
Html4.0的版本中 语法和规范都不够严谨，不严谨也可以显示出窗口内容，但是语法不够规范，。不是所有的用户都能够看到正确的页面。所以w3c联盟提出了一个版本来规划html的语法、文本头 或者是DTD的命名等等 -----XHTML1.0
扫一扫
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
