前端知识点总结——HTML

JavaScript语言 2020-11-13 05:04:28
前端 总结 html 知识 知识点


前端知识点总结——HTML

HTML:HTML4.01 指的就是网页技术
HTML5:HTML4.01的升级版本

1.web的基础知识

web与Internet
1.Internet:全球性的计算机互联网络,因特网,互联网,交互网
2.提供服务

访问网站:www(world wide web)服务
Email:电子邮件服务
BBS:电子公告板,俗称论坛
FTP:文件的上传下载
telenet:远程登录

3.Internet上的应用程序

1.C/S程序
C:Client客户端
S:Server服务器端
代表:QQ,微信,网络游戏
2.B/S程序
B:Browser 浏览器
S:server 服务器
代表:网站

4.web

web:运行在Internet之上的一种B/S结构的应用程序,俗称网站。
w3c:(万维网联盟)
w3c:制定web技术规范
web的工作原理:
基于浏览器和服务器还有通信协议来实现信息的传输和展示。
1.通信协议
HTTP/HTTPS
规范了数据是如何传递和打包
2.服务器
1.功能
1.存储web信息,并提供程序运行环境
2.接收用户请求并给出响应
3.具备一定的安全功能
2.服务器产品
1.TOMCAT
2.APACHE
3.IIS
3.服务器技术
1.php
2.java
3..NET
3.浏览器
功能:
1.代理用户(UA:user agent)提交请求
2.以图形化的方式显示网页
3.作为HTML和JS的解释器
浏览器产品:
1.IE
2.chrome
3.firefox
4.opera
5.safari
浏览器技术:
1.HTML
2.CSS
3.Javascript

2.HTML快速入门

1.什么是HTML?

HTML:Hyper Text Markup Language
超文本标记语言
ex:
普通文本 a:英文首字符
超级文本 a:超链接
普通文本 b:英文第二个字符
超级文本 b:加粗
language:语言,有自己的语法结构
特点:
1.以.html或.htm为后缀
2.由浏览器解析执行
3.可以嵌套脚本语言(javascript)
4.用带有尖括号的标记来标识

2.HTML的基础语法

1.标记
标记又称为"元素",或"标签",在网页中,主要表示一些功能。
标记在使用时,必须用<>括起来
标记分类:
1.封闭类型
又称为双标记
语法:
<标记>内容</标记>
ex:<a>百度</a>
<b>加粗</b>
注意:必须有开始就有结束。
2.非封闭类型
又称为单标记
语法:<标记>或<标记/>
ex:<img>或<img/>
<br>或<br/>
2.标记嵌套
1.什么是嵌套?
在一对标记中出现另外一对(个)标记,从而形成功能的层叠。
2.语法
<标记>
<标记>
<标记/>
</标记>
</标记>
ex:
<a>
<b>这是演示文本</b>
</a>
ex:
<a><b>这是演示文本</b></a> 正确,不推荐
ex:
<a><b>dfdsfsdfs</a></b> 错误
注意:
1.换行缩进,如果是双标记必须成对出现
3.元素(标记)属性
作用:修饰元素
语法:
1.必须声明在开始标记中
<标记 属性名></标记>
2.属性名与值之间用"="连接
<标记 属性名=值></标记>
3.元素允许有多个属性,每个属性之间用空格隔开
<标记 属性名1=值1 属性名2=值2 ...></标记>
ex:
p标记的align属性的值为center,title属性的值为"这是段落"
<p align=center title="这是段落"></p>
标准属性(通有属性):
id:定义元素的唯一标识(名称)
title:定义鼠标悬停在元素上时所提示的文本
style:css中,定义行内样式
class:css中,引用类选择器
4.注释
语法:<!--注释内容-->
注意:
1.注释本身不能嵌套
2.不能嵌套在标记中
前端开发教程扣qun:767273102 ,从最基础的HTML+CSS+JavaScript。jQuery,Ajax,node,angular等到移动端HTML5的项目实战的资料都有整理

3.HTML文档结构

1.HTML文档结构

1.文档类型声明
作用:告诉浏览器HTML的版本类型
语法:<!doctype html>
在网页的最顶端编写
2.HTML页面
在文档类型声明的下面写上一对根标记
<html></html>
在根标记中包含两部分:
文件头:<head></head>
定义网页的全局信息
文件主体:<body></body>
定义网页中显示的内容
2.搭建网页结构
1.文档类型的声明
2.HTML页面结构
在主体内容(body)位置处显示“我的第一个网页”
3.head元素
head是其它头元素的容器
1.<meta> 定义基本信息:编码格式,关键词,描述内容等
<meta charset="utf-8">
<meta name="keywords" content="关键词">
<meta name="description" content="描述内容">
2.<title></title> 定义网页的标题
3.<style></style> 定义内部样式
4.<script></script>定义或引用javascript文件
5.<link> 引入外部样式
4.body元素
显示网页的主要内容
1.特殊字符
&nbsp; 表示空格
&lt; 表示一个<
&gt; 表示一个>
&copy; 版权
&yen; ¥
2.文本标记
1.文本样式
<b></b>:加粗
<i></i>:斜体
<u></u>:下划线
<s></s>:删除线
<sup></sup>:上标
<sub></sub>:下标
2.标题元素
语法:在网页中以醒目的方式来显示文字
语法:
<hn>内容</hn> n:1-6
<h1>内容</h1> 一级标题
...
<h6>内容</h6> 六级标题
特点:
1.字体大小可变
2.加粗
3.上下文之间有垂直空白间距
属性:align
作用:标记内容的水平对齐方式
取值:left/center/right
3.段落元素
作用:以突出的形式表示一段文本
语法:<p></p>
属性:align
取值:left/center/right
4.换行元素
语法:<br>或<br/>
5.分隔线元素
语法:<hr>或<hr/>
属性:
1.size 表示水平线的尺寸(高度),取值为px或%的数字
2.width 宽度,取值为px或%的数字
3.align 水平对齐方式 left/center/right
4.color 水平线的颜色,取值为合法颜色值
6.预格式化
作用:保留html代码中的回车和空格
语法:<pre>内容</pre>
7.分区元素
1.块分区元素
作用:用于页面中元素的布局
语法:<div></div>
2.行分区元素
作用:处理同一行文本中的不同样式
语法:<span></span>
8.行内元素和块级元素
1.块级元素
在网页页中独占一行的元素就是块级元素
常见的块级元素:
1.标题元素 h1-h6
2.段落元素 p
3.div
4.结构标记(header...)
2.行内元素
多个元素位于同一行显示,从左往右排列
常见的行内:
span,b,i,u,s,sup,sub,a,img
3.行内块
显示方式如同行内元素,但具备块级元素的特征
4.table ...

4.图像和链接

1.URL

1.目录结构
文件目录:文件夹嵌套结构
2.URL
URL:Uniform Resource Locator统一资源定位器,俗称路径。
作用:用于表示网络中任意一个资源的位置。
3.路径的表现形式
1.绝对路径
绝对路径就是完整路径,一定可以找到你想找的资源。
1.网络资源
通信协议+服务器主机+文件目录结构+文件名称
ex:http://www.jd.com/index/logo.png
2.本地资源
从最高盘符处开始查找
C:\xampp\htdocs\1801-02\01-HTML\Day02\day.txt
2.相对路径
1.什么是相对路径
从当前文件所在的位置处开始查找资源文件所经过的路径,就是相对路径。
1.同级目录
直接引用
ex:Koala.jpg
2.子级目录
先进入,再引用
ex:img/Koala2.jpg
3.父级目录
先返回,再引用
ex:../Koala1.jpg
3.根相对路径
从服务器所在的根目录位置处开始查找
表现:/
/codeboy/img/logo.png

5.图像

1.图像格式
1.jpg 压缩比率较大
2.png 背景透明
3.gif 动图
2.图像标记
标记:<img>或<img/>
属性:
1.src 源,要显示的图像的url
2.width 宽度,取值以px或%为单位的数字
3.height 高度,取值以px或%为单位的数字
4.alt 图片出错时显示的提示文本

6.链接

1.语法
<a>内容</a>
2.属性
1.href 链接的url
2.target 目标,指定打开网页的方式
取值:
_blank 在新的标签页中打开
_self 默认值,在当前页面中打开新的网页
2.给一张图片设置超级链接,打开Tmooc网站(www.tmooc.cn)
3.其它表现形式
1.资源下载
让链接的URL,链接到rar/zip文件即可
href="*.zip/*.rar"
2.电子邮件链接
href="mailto:合法的邮箱地址"
3.返回页面的顶部
href="#"
4.链接到javascript
href="javascript:js脚本"

7.锚点

 1.什么是锚点?
就是网页中的一个记号,可以通过超级连接调整到记号的位置处。
2.使用锚点
1.定义锚点
1.使用a标记的name属性定义锚点
<a name="锚点名称"></a>
2.使用任意标记的id属性定义锚点
<ANY id="锚点名称"></ANY>
2.链接到锚点
<a href="#锚点名称"></a>
<a href="url#锚点名称"></a>

8.表格

1.表格的语法

1.表格
<table></table>
2.行
<tr></tr> --->table row
3.单元格/列
<td></td> --->table data
前端开发教程扣qun:767273102 ,从最基础的HTML+CSS+JavaScript。jQuery,Ajax,node,angular等到移动端HTML5的项目实战的资料都有整理

2.表格的属性

1.table属性
width:宽度
height:高度
border:设置表格边框
align:设置表格的水平对齐方式
取值:left/center/right
cellpadding:设置单元格的内边距(内容与td之间的间距)
cellspacing:设置单元格的外边距(td边框外的距离)
bgcolor:背景颜色
2.tr属性
align 设置当前行的水平对齐方式
取值:left/center/right
valign 设置当前行的垂直对齐方式
取值:top/middle/bottom
bgcolor 设置当前行的背景颜色
3.td属性
width:宽度
height:高度
align:水平对齐
valign:垂直对齐
bgcolor:列的背景颜色
colspan:跨列
rowspan:跨行

3.可选标记

1.表格标题
标记:<caption></caption>
如果设置表格标题,则必须位于<table>下的第一个子元素位置处
2.行/列标题
标记:<th></th>
所有的td都可以用<th>取代

4.表格复杂应用

可以将连续的几个行,划分到一组中,进行统一管理。
1.行分组
1.表头行
<thead></thead>
表格中最上面的一行进行分组的话,可以放在表头行中
2.表主体行
<tbody></tbody>
允许将若干行放在tbody中进行统一管理
3.表尾行
<tfoot></tfoot>
表格中最后一行进行分组的话,可以放在表尾行中
2.不规则表格
1.跨行
rowspan
从指定单元格的位置处开始,纵向向下合并几个单元格(包含自己),被合并的单元格要删除。
2.跨列
colspan
从指定单元格的位置处开始,横向向右合并几个单元格(包含自己),被合并的单元格要删除。

9.列表

1.列表的作用

按照从上到下(从左往右)的方式来显示所有的数据,并且可以在数据前增加显示的标识。

2.列表的组成

列表都是由"列表类型"和"列表项"来组成
1.列表类型
有序列表:<ol></ol> order list
无序列表:<ul></ul> unorder list
2.列表项
用于表示列表中的数据(嵌套在列表中)
<li></li> list item
3.有序列表
1.type 作用:指定列表的排序类型
取值:
1 默认值,以数字排序
a 小写字母
A 大写字母
i 小写罗马数字
I 大写罗马数字
2.start 作用:指定起始编号是从第 几 开始
取值:数字

4.无序列表

 1.type 作用:指定列表的标识类型
取值:
disc:实心圆
circle:空心圆
square:实心方块
none:不显示标识

5.列表嵌套

 在一个列表中又出现另一个列表
被嵌套的列表只能出现在li中
ex:
<ol>
<li>
这是有序列表内容
<ul>
<li>内容</li>
</ul>
</li>
</ol>

10.定义列表

1.什么是定义列表
定义列表常用于给出一类事物或对名词的解释说明等。
2.语法
1.<dl></dl> 表示一个定义列表
2.<dt></dt> 表示定义列表中要解释说明的名词
3.<dd></dd> 表示定义列表中对名词解释的内容
ex:
<dl>
<dt>名词</dt>
<dd>解释具体内容</dd>
</dl>
使用场合:图文混排时使用

11.结构标记

1.结构的作用

用于描述整个网页的结构(取代div做布局)
提升标记的语义性

2.常用的结构标记

1.<header></header>
作用:定义网页或某区域的头部
2.<nav></nav>
作用:定义网页的导航链接
3.<section></section>
作用:主体内容
4.<aside></aside>
作用:定义页面中的侧边栏信息,靠近边缘。
5.<footer></footer>
作用:定义网页偏底部信息,比如:网站的备案号,解释说明,版权。
6.<article></article>
作用:定义与文字描述相关的内容,比如:论坛帖子,微博条目,用户评论等

12.表单(重点&难点)

1.表单的作用

1.提供可以与用户交互的可视化界面
2.收集用户信息并提交给服务器

2.表单的组成部分

1.前端部分
表单控件,与用户交互的可视化控件
2.服务器端部分
对提交的数据的处理,***.php

3.表单标记

<form></form>
属性:
1.action
作用:定义表单提交时发生的动作,通常定义的是服务器上处理程序的url地址,
ex:action="login.php"
2.method
作用:指定表单数据的提交方式
取值:
1.get(默认值)
1.明文提交,待提交的数据会显示在地址栏中
2.安全性较低
3.提交数据有大小限制,限制为2KB
4.向服务器要数据时,使用get方式
2.post
1.隐式提交,提交的数据不会显示
2.安全性较高
3.提交数据大小无限制
4.要传递数据给服务器时,使用post方式
3.delete
4.put
3.enctype
作用:指定表单数据的编码方式,允许将什么样的数据提交给服务器
1.application/x-www-form-urlencoded
默认值,允许将任意字符提交给服务器(文件无法提交)
2.multipart/form-data
允许将文件提交给服务器
3.text/plain
只能将普通字符提交给服务器

4.表单控件

能够与用户进行交互的可视化元素
1.分类:
1.input元素
2.textarea多行文本域元素
3.select和option 选项框元素
4.其它元素
2.input元素
1.作用:在页面中提供各种各样的输入控件,如:文本框,密码框,单选按钮,复选框等。
2.语法
标记:<input>或<input/>
属性:
1.type 指定创建输入控件的类型
2.name 为控件定义名称,提交给服务器端使用(必须)
3.value 控件的值,提交给服务器端使用
4.disabled 禁用控件,不能操作并不能提交给服务器使用
该属性无值,只要出现在标记中,就是禁用。
3.input元素详解
1.文本框和密码框
文本框:<input type="text">
密码框:<input type="password">
属性:
1.maxlength 指定限制输入的字符数
2.readonly 只读,只能看,不能改,但允许提交。
3.placeholder 占位符,即默认显示在控件上的文本。

13.按钮

 1.提交按钮
type="submit"
作用:将表单的数据提交给服务器上指定的程序
2.重置按钮
type="reset"
作用:将表单的内容恢复到初始化的状态
3.普通按钮
type="button"
没有功能
属性:
value:显示在按钮上的文本
3.单选按钮和复选框
单选按钮:type="radio"
复选框:type="checkbox"
属性:
name 除定义控件名称之外,还能起到分组的作用
checked 设置默认选中项,无值属性
4.隐藏域和文件选择框
1.隐藏域
type="hidden"
想要提交给服务器,但不想展示给用户的数据可以放在隐藏域中。
2.文件选择框
type="file"
注意:
1.method的值必须为post
2.enctype的值必须为multipart/form-data
3.textarea元素
1.作用
允许录入多行文本
2.语法
标记:<textarea></textarea>
属性:
1.name 定义控件名称,提供给服务器使用
2.readonly 只读
3.cols 指定文本域的列数,即一行能显示多少个英文字符(中文减半)
4.rows 指定文本域的行数,即默认显示多少行的数据,超出rows的话会出现滚动条。
前端开发教程扣qun:767273102 ,从最基础的HTML+CSS+JavaScript。jQuery,Ajax,node,angular等到移动端HTML5的项目实战的资料都有整理

14.选项框

 1.语法
1.<select></select>
作用:在页面中表示一个选项框
2.<option></option>
作用:显示选项框中的内容项
2.属性
1.select属性
1.name 定义选项框的名称
2.size 定义显示选项的数量,默认值为1
3.multiple 设置多选,无值的属性
注意:只有滚动列表支持多选
2.option属性
1.value 定义选项的值
2.selected 设置默认选中项,无值属性
5.其它元素
1.label元素
作用:关联文本域表单控件
语法:<label></label>
属性:for 要与表单控件关联的id值
2.为控件分组
<fieldset></fieldset>为控件定义分组
<legend></legend>为分组指定标题
3.浮动框架
作用:允许在一个网页中,再引入另外一个网页。
语法:<iframe></iframe>
属性:
1.src 要引入页面的url路径
2.width 宽度
3.height 高度
4.frameborder 浮动框架的边框,默认值1
版权声明
本文为[JavaScript语言]所创,转载请带上原文链接,感谢
https://blog.csdn.net/nnnn1235657/article/details/92800684

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple