学完html基本以后,现在对html知识做以下总结:
以上内容来源于bilibiliup狂神说
html
html,即超文本标记语言(Hyper Text Markup Language)
作为”超文本”,其中可以包括:文字,图片,音频,视频,动画等…
目前html最新版本为html5.0
w3c
World Wide Web Consortuim(世界万维网联盟)
w3c成立于1994年,是web计数领域最具权威和最有影响力的中立性技术标准机构
w3c标准包括:
- 结构化标准语言(html,xml)
- 表现标准语言(css)
- 行为标准语言(DOM,ECMAScript)
网页基本标签
网页基本标签可以分为以下几类:
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
一级标题
二级标题
六级标题
这是一个段落
这里有一个换行标签-->><
下面是水平线
This is BOLD FACE.(to use "strong" label)
This is italic face.(to use "em" label)
This is a "space"--->> <
Greater than sign: > (to use & and"gt;")
Less than sign: < (to use & and "lt;")
开放标签和闭合标签
标签大致可以分为这两类:开放和闭合标签
开放标签是成对出现的,通过前后两个标签用来标记一个内容,后一个标签内的"单词"前面要加一个斜杠表示后标签,例如:
<head> (这个地方可以写内容) </head>
闭合标签,只有一个标签,所有的内容写在标签内部,为工整和保险起见,建议所有闭合标签后面>前面加一个斜杠表示标签结束
<meta ...(属性内容)>
网页的基本信息
基本信息也是通过标签表示的:
1. 标签
用于告诉浏览器以下代码使用的是什么规范
2. 标签
用于标记整个html文件范围
3. 标签
用于表示网页头部
4. 标签
表示网页名
5. 标签
表示网页主体
6. 标签
用于描述网页信息,这个标签一般也在标签之下,是闭合标签
这里对meta标签做一些补充:
目前见到的meta的三种属性:charset;keyword;description
绝对路径和相对路径:
用
../
可以在相对路径中表示上一级目录
插入图像的标签:
下面是实例:
超链接
超链接有三种:
- 页面间链接(从一个页面到另一个页面)
- 锚链接(链接到一个预先定好的锚点)
- 功能性链接
不论是上面的哪一种链接,链接的标签是一定的:
text to show to the user.
页面间链接是用来跳转到页面的,所以只要在上面的标签中的属性href下赋值为某个网址或者同项目下另外一个网页的相对路径即可,通过点击展示文字来达到跳网页的作用,比如:
click me to Baidu search.
或者:
text to show to the user.
锚链接可以理解成是链接和链接之间的跳转,也就是把链接当作锚点:
比如:
在summary页面下的第一行有如下链接:
这是一个用来做锚的超链接,用来给锚链接做标记
而在summary页面底端有这样一个链接:
返回页首的锚节点
当点击这个链接时,会直接跳转到页首
再如:
在summaryDemo页面中有这么一行:
这是一个用来做锚的超链接,用来给锚链接做标记
而在summary中有这么一行:
前往辅助页的锚节点
点击这个链接,则会进入到辅助页面的锚节点
功能性链接暂时学了两种:
第一种是邮件链接,在href中添加mailto标记,并写上目标邮箱即可
点击联系我
第二种是QQ链接,主要是QQ推广链接,”在QQ推广”中可以直接获取:
“QQ推广”网址:
https://shang.qq.com/v3/index.html
打开网页的方式和图片做链接
列表可以分为有序列表和无序列表:
有序列表由”ol”标签(表示有序列表)和”li”标签(表示这是选项)组成
This is an order list.
option1
option2
option3
option4
无序列表由”ul”标签(表示无序列表)和”li”标签(表示列表选项)组成:
This is an inorder list.
option1
option2
option3
option4
在列表中嵌套链表即可(但是idea会弹出警告)
This is an inorder list.
option1
option2
option3
option4
This is an order list.
option1
option2
option3
option4
表格的标签是”table”,在表格标签中间,用”tr”表示一行,用”td”表示有一列
下面是一个四行五列的表格(border表示行列分割线的宽度)
1.1
1.2
1.3
1.4
1.5
2.1
2.2
2.3
2.4
2.5
3.1
3.2
3.3
3.4
3.5
4.1
4.2
4.3
4.4
4.5
当然也可以有宽行合并:
1.1跨行
1.2跨列
2.2
2.3同时跨行跨列
2.4
2.5
3.2
3.3
3.4
3.5
4.1
4.2
4.3
4.4
4.5
媒体元素
音频的标签是”audio”
以下是一个使用范例:
可以加上controls,和autoplay标签,前者用来使音频可控,后者用来使音频自动播放
比如:
视频标签使用的是video
页面结构分析
元素名 描述 header 标题头部区域的内容(用于页面或者页面中的一块区域) footer 标记脚部分区域的内容 section web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或应用(常见于侧边栏) nav 导航类辅助内容
页面结构学习
网页头部
网页主体
网页脚部
iframe内联框架
iframe内联框架其实就是在网页中再开一个网页
用法格式如下:
引用页面地址 框架标识名
下面是一个实例:
表单可以理解成是一个单子,而这个单子是可以在网页间或者网页和服务器间传输数据的
表单的内容多样,而表单本身的结构是:
其中, action表示表单传输的目标位置
表单提交的位置可以是网站,也可以是一个请求处理地址
另外,表单还有一个 “method”属性,这个属性表示表单的传输方法
其中, method有两个模式:post和get
区别:
method:post或者get
两种提交方式:
get:我们可以在url中看到我们提交的信息,不安全,但是效率高
post:不会在url中显示提交信息,很安全,可以传输大文件
表单的内容
表单的内容一般都是”input”标签
而为了工整起见,一般会套上换行标签:
“input”标签中的属性有很多种类,以下是一个汇总:
属性 说明 type 指定元素类型,包括text,password,checkbox,radio,submit,reset,file,hitten,image和button,其中默认为text name 指定表单元素的名称 value 元素的初始值,type为radio时必须指定一个指 size 指定表单元素的初始宽度,当type为text或者password时,表单元素的大小以字符为单位,对于其他类型,宽度以像素为单位 maxlength type为text或者password时,输入的最大字符数 checked type为radio或者checkedbox时,指定按钮是否是被选中的
以下表单包括了以上涉及的所有内容,包括各种type的类型:
name:
password:(已经隐藏了)
男
女
外星人(放弃吧我知道你不是)
睡觉
敲代码
打游戏
吉他
按钮:
图片按钮:
下拉框:
中国
美国
日本
This is a text area.
邮箱:
url:
数字:
滑块:
搜索:
你点我试试?
表单的初级验证
name:
正则表达式邮箱:
Original: https://www.cnblogs.com/zht1702/p/15082663.html
Author: zht1702
Title: html学习笔记
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/611475/
转载文章受原作者版权保护。转载请注明原作者出处！