HTML(总结篇)

时间: 2023-10-04 admin IT培训

HTML(总结篇)

HTML(总结篇)

文章目录

  • 一、什么是前端?
  • 二、前端的分层架构
    • 1.结构层
    • 2.表现层
    • 3.行为层
  • 三、超文本标记语言 HTML (Hyper Text Markup Language)
    • 1.建立HTML文件
      • HTML的文档结构
    • 2.HTML标签节点
    • 3.HTML基本常用标签
    • 4.HTML表单
  • 四、HTML中的select标签
    • 1.select(选择框或下拉列表)
    • 2.textarea(文本域)
  • 五、a标签
    • 1.什么是a标签
    • 2.页面跳转的请求方式:
    • 3.a标签的使用方式
    • 3.在a标签页面跳转的Body的三个特殊属性
  • 六、img标签
    • 1.img标签的作用
    • 2.img标签的必需属性
    • 2.img标签的重要属性
  • 七、table标签
    • 1.什么是table标签
    • 2.table标签的基本组成
  • 八、HTML表格布局练习题
  • 九、HTML中的列表
    • 1.无序列表
    • 2.有序列表
    • 2.定义列表
  • 十、多窗口框架 frameset
    • 1.frameset的组成(注:frameset标签与body标签不能连用)
    • 2.frameset的小应用
  • 十一、常用标签 特殊意义的标签
  • 十二、XHTML
  • 十三、HTML5
    • 1.视频和音频


一、什么是前端?

前端最核心的三项技术:HTML,CSS,JAVAScript
前端还会涉及:Bootstrap jquery vue rect angular.js Node.js
Echars protype ES5 ES6 ajax 等
Mysql oracle redis
Linux centos redhat Nignx
网络协议: Http UDP TCP 等
WebService Websocket
掌握一门应用级语言 Java Python 等
熟悉数据结构和算法

二、前端的分层架构

1.结构层

HTML5 - XHTML - HTML4.0版本

HTML(超文本标记语言)

2.表现层

CSS3.0 - CSS2.0版本

CSS(层叠样式表)

3.行为层

JAVAScript(脚本语言)
用于定义整个网络的行为

三、超文本标记语言 HTML (Hyper Text Markup Language)

HTML与XML的区别:
1.概念及作用上:
HTML:超文本标记语言----可用于展示数据
XML:可扩展标记语言----可用于存储数据,配置文件
( json与XML的区别就是不能配置文件)
2.内容上:
HTML:有固定标签 h1 body等
XML:没有固定标签,任何标签都可以
( 标签—tag)

1.建立HTML文件

快捷建立基本HTML框架:!+TAB键

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>

MIME类型:所有的文件在网络上 用于显示还是用于下载都存在自己响应的类型
例如 gif jpeg 存在自己的MIME类型 用于给文档做一些自己的相关标识

2.HTML标签节点

<html></html > 双标签
<meta charset utf-8> 单标签
Meta 源 metadata 源数据
1.<html> 元素节点
2.Lang=“utf-8”属性节点
3.<body>文本</body>文本节点

乱码一般出现原因:字符集不统一
当我们在国内打开的浏览器的默认的编码格式都是GBK 需要把原有的GBK的格式修改成全球统一的格式 —UTF-8

3.HTML基本常用标签

<hn> n = 1-6 表示的是网页或者文章的标题 字体大小从大到小 默认加粗
<hr>标尺线
<p>行的控制
<div> 区域划分
align 属性节点 3个值 left center right
颜色:
1.rgb(255,255,255) 0-255
2. #000000~#ffffff以十六进制的方式去表示颜色
3.使用颜色的单词 英文 pink orange yellow black white gold
Body 属性
text 用于表示正文的文本颜色
bgcolor 用于表示背景颜色
background 用于表示文档的背景图像 一般不会使用图片作为页面的背景
相对路径时 ./ 当前路径 …/ 当前路径的父路径

4.HTML表单

表单:用于搜集用户数据(登录,注册,提交)
<form></form>

action -----表单提交路径 -----跳转的功能
method -----提交的方式
<input> 输入
Type ----- text password checkbox radio submit reset file 等等

Text ----文本框
Password----密码框
Checkbox —多选框
Radio ----单选框
Submit ----提交按钮
Reset ----重置按钮
File -----文件上传

Method的提交方式来源于HTTP协议


问题1: 表单提交时 什么情况下属于get请求 什么情况下属于post请求? Get请求 默认情况下 和 method为get请求 Post请求 method为post 时
问题2: Get请求和post请求有什么区别? 面试题
安全: post请求提交时路径上没有属性的信息 相对安全 Get 请求提交路径上存在属性的信息 不安全
因为get请求在路径的地址上存在属性值 url的地址是有限制的 最大为64kb

问题3 什么时候使用get请求 什么时候使用post请求? 要根据数据性质 --- 热数据 安全度不重要的数据 使用get和post都可以 如果数据的性质需要安全性比较高时 那么一定要使用post 在写文件上传的功能时 请求必须是post的提交方式

四、HTML中的select标签

1.select(选择框或下拉列表)

常用的属性是:disabled(规定禁用该下拉列表)
multiple(规定可选择多个选项)

<p>请选择您喜欢的书籍类型:<select name="style" multiple="multiple"><option>--请选择类型--</option><option>都市言情</option><option>古代穿越</option><option>现代科技</option><option>历史人文</option><option>悬疑推理</option></select></p>

注:建议这里的select multiple多选列表用input checkbox代替,更加美观

2.textarea(文本域)

常用的属性是:Rows row 行
Cols column 列

<p><textarea  rows="5" cols="50">这家伙很懒,什么都没有留下</textarea></p>

五、a标签

1.什么是a标签

a标签就是超链接,用于页面的跳转

2.页面跳转的请求方式:

a.form表单get请求
b.form表单post请求
c.a标签进行页面跳转:get请求方式

3.a标签的使用方式

a.使用a标签进行外部跳转-----外链接
b.使用a标签跳转到网页的内部-----锚点

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body  vlink="gold" link="pink" alink="green"><div> <a name="header"><h1>QQ空间</h1></a></div><hr><a href="3.html">主页</a><a href="2.html?username=zhangsanfeng&pwd=123">我的相册</a><a href="1.html">我的日志</a><a href="/">百度</a><a href="/">淘宝</a><br/><p><a href="#R1">第一章</a></p><p><a href="#R2">第二章</a></p><p><a href="#R3">第三章</a></p><p><a href="#R4">第四章</a></p><p><a href="#R5">第五章</a></p><h2><a name="R1">第一章</a></h2>
--------大量文本-----------<h2><a name="R2">第二章</a></h2>
--------大量文本-----------<div class="foot">底部<a href="#header">回到顶部 </a>
</div>
</body>
</html>

3.在a标签页面跳转的Body的三个特殊属性

a.alink 活动链接(就是鼠标点击链接的那一刻)
b.link 未访问链接
c.vlink 访问链接
代码如上

六、img标签

1.img标签的作用

在页面中引入图片

2.img标签的必需属性

a.src source 源代码
b.alt 图片命名(在图片无法使用时 用alt内的本文代替)

2.img标签的重要属性

a.boder 边框 以像素值为单位px
b.width 宽度 height 高度 以像素值为单位px或者以百分比为单位
c.usemap 用于做位图 map 位图,映射 area 规定位图区域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<img src="./image/w.png" alt="小猫" usemap="#Wxy" >
<map  name="Wxy" >
<area  href="" shape="circle" coords="300,300,60"></a>&gt;</map></body>
</html>


如图为位图选择的区域,在该区域点击就会跳转到所设定的界面

七、table标签

1.什么是table标签

该标签表示的是表格

2.table标签的基本组成

a.<table>
b.<tr>表行
c.<th>表头 默认加粗
d.<td>表元
代码如下:

<table border="1px"><tr><th>早餐</th><th>午餐</th><th>晚餐</th></tr><tr><td>包子</td><td>米粉</td><td>大盘鸡</td></tr><tr><td>豆浆</td><td>肉夹馍</td><td>烤馕</td></tr></table>

八、HTML表格布局练习题

用表格布局结合一些css实现如下功能的页面:

代码如下:

4.<!DOCTYPE html>
5.<html lang="en">
6.<head>
7.	<meta charset="UTF-8">
8.	<title>Document</title>
9.</head>
10.<body>
11.	<h1>热门电影板块</h1>
12.	<hr>
13.	<table width="800px">
14.	   <tr>
15.	   	 <td>最近热门电影</td>
16.	   	 <td>热门</td>
17.	   	 <td>最新</td>
18.	   	 <td>豆瓣评分</td>
19.	   	 <td>冷门佳片</td>
20.	   	 <td>华语</td>
21.	   	 <td>欧美</td>
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>

九、HTML中的列表

1.无序列表

应用:导航(nav) 侧栏 (sidebar) 商品栏 贴吧知道 其他贴子的链接
<ul> 无序列表的标签
<li>列表的选项

代码如下(示例):

<ul><li>疾风之刃</li><li>武器大师</li><li>德玛西亚</li><li>艾欧尼亚</li></ul>

2.有序列表

<ol>有序列表的标签
<li>列表的选项

有序列表中的其他属性值(该属性都放在ul标签内):
<type ="n"> n可以为:数字 字母A-Z 罗马字符I II III IV V VI VII VIII (表示排序的标准)
<reversed="reversed">表示降序排序
<start="n">表示从n开始排序(注:n只能是数字)

代码如下(示例):

<ol type="1" reversed="reversed" start="2"><li>疾风之刃</li><li>武器大师</li><li>德玛西亚</li><li>艾欧尼亚</li></ol>

2.定义列表

<dl>定义列表的标签
<dt>定义项目
<dd>定义的描述

代码如下(示例):

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

十、多窗口框架 frameset

1.frameset的组成(注:frameset标签与body标签不能连用)

frameset里面的每一个窗口都是一个frame
<frameset>多窗口框架标签

<rows>进行行的划分 用%为单位
<cols>进行列的划分 用%为单位

代码如下(示例):

<html><frameset cols="25%,50%,25%"><frame src="frame_a.htm" /><frame src="frame_b.htm" /><frame src="frame_c.htm" />
</frameset></html>

<frame>frameset内的框架

<src="url">表示框架中显示文档的地址
等等
代码如上(示例):

2.frameset的小应用

要求:
在一个网页内 点击a框架中的页面显示b页面,点击b框架中的页面显示c页面,点击c框架中的页面显示d页面,点击d框架中的页面显示a页面

代码如下(示例):
主页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head><frameset rows="10%,80%,10%"><frame src="A.html" name="header" /><frameset cols="10%,90%"><frame  name="menu" /><frame name="center" /></frameset><frame  name="footer" />
</frameset></html>

A页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>A</title>
</head>
<body><a href="B.html" target="menu">A</a>
</body>
</html>

B页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>B</title>
</head>
<body><a href="C.html" target="center">B</a>
</body>
</html>

C页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>C</title>
</head>
<body><a href="D.html" target="footer">C</a>
</body>
</html>

D页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>D</title>
</head>
<body><a href="A.html" target="header">D</a>
</body>
</html>

十一、常用标签 特殊意义的标签

<address>用于描述地址 默认斜体
<article>用于描述文章的标题
<header><footer> <nav>为了让程序员能够通过代码看清楚代码的含义
类似于这样的标签他们的作用 和div是相似的 提高代码的阅读能力 -----望文生义
<label> 为input 元素定义标注( for 属性应当与相关元素的 id 属性相同)
代码如下(示例):
显示:点击“用户名”文本时,后面的框框有相应地标注显示

<label for="one">用户名:</label><input type="text" id="one" />

内联元素 <span> <a>
块状元素 <div> <p>
<span> 内联元素
通常用于修饰文本 默认不具有任何样式 可以通过css来添加样式


十二、XHTML

XHTML 它是html4.01版本后出现的一个更严谨语法更纯粹的一个版本
从语法上对html进行更严谨的规范。

html 也可以存在 任意的单词的标签
默认把他们当成文本标签

DTD的命名规范 规范了标签的内容

xml 标签 可以用任意单词来进行定义的

十三、HTML5

1.视频和音频

<video>视频

<video src="./video/final.mp4" controls="controls"></video>

<audio>音频

<video src="./video/final.mp4" controls="controls"></video>