HTML
-
超文本标记语言(英语:HyperText Markup Language,简称:HTML
-
是一种用于创建网页的 标准标记语言,目前最新标准为 HTML5
-
由 伯纳斯.李 创建,现由 W3C(万维网联盟)来维护
-
超文本 就是指页面内,可以包含图片、链接,甚至音乐、程序等非文字元素
-
标记 是指通过不同的标签 来指定显示不同的内容
注释
-
语法:
<!-- HTML 注释 -->
-
定义及特点:
-
HTML 的注释为多行注释 -
-
注释是对代码的注解,不会显示在网页内容中的 -
-
注释里的代码不会被执行 -
-
注释在网页源代码中是可以看到的
-
注释不可以嵌套使用
-
-
作用:
-
注释有助于你 快速的恢复 对代码的记忆 -
-
注释有助于团队开发
-
注释还可以用于代码排错,俗称 注释排错法
-
全局架构标签
定义
HTML语法
-
请使用 HTML5 声明头,其它声明头参见 PS 部分
-
HTML 元素由
HTML 标签
及标签中的属性
组成 -
HTML 标签 不区分大小写,推荐小写
-
HTML 属性
-
写在标签里面,用来描述 该元素的特征或特点
-
属性书写格式:
属性名="属性值"
或属性名="属性值1 属性值2"
-
-
属性不区分大小写,不区分单双引号,建议小写且双引号(W3C推荐)
-
多属性之间 使用空格隔开,多个属性值之间 也用空格隔开
-
-
标签之间的多个空格和换行 只会解析成一个空格。此特性,可用于排版,以提高可读性。
标题/段落 标签
标题标签 h1 ~ h6
<h1></h1> 标题 h1
<h2></h2> 标题 h2
<h3></h3> 标题 h3
<h4></h4> 标题 h4
<h5></h5> 标题 h5
<h6></h6> 标题 h6
<!--
标题字体默认加粗.
1 ~ 6 的大小依次递减
不要利用标题标签 来改变的字体大小
-->
h1的特殊性
段落标签 p
<p></p> 段落
<!--
将包含的内容分段显示,一个 p 标签代表一段
每个段落标签之间 会有一个空行
-->
格式标签
换行标签 br
<br> 换行
<!-- 写一个 br 就代表换一行 -->
水平分割线 hr
<hr> 水平分隔线
可选属性:
[size] [width] [align] [color]
<hr size="100" color="#ff0000" width="500" align="left">
居中标签 center
<center></center> 居中标签
<!-- 将标签中的 文本内容 居中显示 -->
原样输出标签 pre
<pre></pre> 原样输出,格式化输出内容
<!-- pre 标签 会保留 空格及换行 等元素, 将它们原模原样的 放到页面中 -->
<pre>
11111 111111
11111 111111111
11112132321 23213123
三七四五123213 213123 123 12 312
</pre>
文本标签
biu
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
删除插入
<del></del> 删除文本
<ins></ins> 插入文本
着重
<em></em> 着重文字
<strong></strong> 加重语气
上下标
<sub></sub> 下标字
<sup></sup> 上标字
字体标签
<font></font> 字体标签
[face] 样式
[size] 大小
[color] 颜色
列表类标签
列表标签
<ol></ol> 有序列表 (ordered list)
[type] 列表样式
[start] 列表开始位置
[reversed] 列表顺序设置为降序(HTML5)
<ul></ul> 无序列表 (unordered list)
[type] 列表样式 circle(空心圆) disc(默认实心圆) square(实心正方形)
<li></li> 列表项 (list)
定义列表
<dl></dl> 定义列表 (define list)
<dt></dt> 定义列表标题 (define title)
<dd></dd> 定义列表详情 (define detail)
超链接标签
URL 构成
超链接是 html 的灵魂,没有超链接,网页就无法跳转到其他页面
URL 统一资源定位符 (Uniform Resource Locator) 俗称网址,网络上的任何资源 都有一个自己 URL 地址.
网址构成解析:
http://www.acfun.cn:80/v/list144/index.htm?name=05&a=1#page=1
协议 | 域名 | 端口 | 目录 | 文件 | 参数 | 锚点 |
---|---|---|---|---|---|---|
http:// | www.acfun.cn | :80 | /v/list144/ | index.htm | ?name=05&a=1 | #page=1 |
超链接的语法
<a href="#">链接</a>
[herf] 指定 所链接文件的 URL 路径
路径分为 2 种:
绝对路径: (href 内禁止使用 绝对路径)
D:/wamp/www/demo
相对路径: (会被转化成 URL)
./ 当前目录
../ 上级目录
/ 根目录
[target] 指定链接页面 在浏览器窗口中的 打开方式 \
_self 默认方式打开
_blank 新标签或窗口打开
_top 在顶层窗口中打开文件
_parent 在父级窗窗口中打开文件(常用于frameset frame) framename 指定的窗口中打开
[name] 属性指定页面的锚点名称
用于锚点跳转,可跳转到本页的锚点 或跳转到其他页的锚点
整理
1. 全局框架标签
html
head
body
2. 注释:
* 不会显示在网页中
* 对代码做一些描述,解释 \
* 不能嵌套使用
3. 段落: p
4. 标题: h1,h2 ...h6 \
一个网页只能使用一个h1标签
原因: h1 能提高搜索引擎(SEO)的排名,如果一个html 有多个h1, 则会被SEO认为在恶意提高排名,所以一个网页只能有一个h1
5. 文本格式
b i u
strong em
del ins
sup sub
br hr
pre
<!--
font 在HTML5中已经淘汰了
center 在HTML5中已经淘汰了
-->
6. 列表
有序: ol li
无序: ul li
定义: dl dt dd
7. 超链接
标签: a
属性: href
target="_blank" 新窗口或新标签打开
="_self" 默认属性,本标签加载
="_top" 了解即可
="_name" 了解即可
URL
定义
-
俗称: 网址
-
专业术语: 统一资源定位器
组成
基本组成: 协议+域名
完整组成: 协议+域名+端口+路径+参数+锚点
案例: http://www.baidu.com:80/image/A/B/C/xxx.jpg?age=18&address=gugong#xxoo
* 协议: http
* 域名: www.baidu.com 本质上是 IP地址 (cmd中ping www.baidu.com--->IP地址)
* 端口: :80 网页访问端口,默认是80,可以省略
* 路径: image/A/B/C/xxx.jpg
* 文件夹: image/A/B/C/
* 文件: xxx.jpg
* 参数: ?age=18&address=gugong
必须以 ? 开头
每一对参数之间用 & 隔开
参数格式: 参数名=参数值
* 锚点: #xxoo
设置锚点: id='锚点名' HTML5写法
name='锚点名' HTML4写法
没有#号 错误: id="#锚点名"
跳转锚点:
<a href="xxxxx#锚点名">
注意
* 每个URL最终都会指向一个文件
* 文件夹中若有 index文件,那么在访问该文件夹时,会自动执行index文件
图片
1. 图片
* 标签: img
* 属性:
src 图片资源地址
alt 当图片加载失败or延迟,显示alt的内容
tiitle 当鼠标悬停在图片上时,显示title内容
width 设置图片的宽度
height 设置图片的高度
注意:
* 每张图片都有自己的宽高比例
* 设置图片宽高时,不要同时设置,只需要设置一个即可
路径
定义
-
文件路径:适用于所有文件,涵盖范围:HTML,CSS,JS,PHP,JAVA等
路径分类
1. 相对路径
. 当前目录
.. 上级目录
/ 根目录
根目录会随着环境的变化而变化
默认情况 根目录: 当前盘符 (/ 写在路径的最前面才是根目录)
安装PHP,JAVA等环境,跟目录也会随之发生改变
2. 绝对路径
网址url
盘符形式
注意:
* 相对路径 要与相关文件一起操作才能成功(保持结构关系)
* 绝对路径 不需要考虑结构关系
音频
音频
* 标签: audio
* 属性:
src 音频来源地址
controls 控制器(开始,暂停,进度条....)
loop 循环播放
autoplay 自动播放
媒体标签
* 解释: 网页加载时按照source指定的格式匹配文件,一旦匹配到将不在匹配当前项以下文件,若没有匹配到则显示提示信息.
* 标签: source
* 属性:
src: 音频来源地址
* 作用: 兼容多种格式
注: * 在HTML5中,属性名与属性值时一样的,则可以只写属性名即可
<audio controls="controls"></audio>
等同于
<audio controls></audio>
视频
音频
* 与音频写法一致
1. 视频
* 标签: video
* 属性:
src 视频来源地址
controls 控制器(开始.暂停,进度条)
loop 循环播放
autoplay 自动播放
媒体标签
* 标签: source
* 属性:
src 视频来源地址
* 作用: 兼容多种格式
表格
表格标签
* table 表格声明
* caption 表格标题
* tr 表行
* th 表头
* td 单元格
* col 列控制 表现形式: 百分比 和 像素
* colgroup 列组
* 注:
col和colgroup两者中col可单独使用
相关属性
* border 边框
* rowspan 行合并
* colspan 列合并
HTML5不推荐使用
* cellspacing 外边距 单元格与单元格之间的距离
* cellpadding 内边距 单元格与内容之间的距离
* align 水平对齐方式: left center right
* valign 垂直对齐方式: top middle bottom
* bgcolor 背景颜色
表单
表单声明及属性
* 表单能与用户发生交互关系
1. 表单声明
* 标签: form
2. 属性
action 将表单提交给指定的服务器
method 以什么方式提交给指定的服务器
get 默认
明文传输(能在url地址栏中看到参数)
安全性低
速度快
传输大小:
理论上: http协议上是没有大小限制
实际上: 受限于浏览器,大多数浏览器小于等于 2KB
适用于: 查询
* 注: 超链接也是明文传输 <a href="08-input.html?id=6666666">测试连接</a>
post
密文传输
安全性高
速度慢
传输大小:
理论上: http协议上是没有大小限制
实际上: 受限于服务器的性能(服务器的配置决定)
适用于: 增删改,敏感性数据(密码,金额等)
enctype
multipart/form-data 专用于上传文件
autocomplete 自动填充
on 开启
off 关闭
文件大小知识普及
* 计算机大小单位
B 字节 一个数字,字母or标点占1B
一个汉字=3B
KB 千字节 1KB =1024B
2KB=2048B
MB 1MB = 1024KB = 1024 * 1024 B
约等于 100 0000
GB 1GB = 1024MB
TB 1TB = 1024GB
上传文件的必要条件
* 3个必要条件
* form的method=post
* form的enctype="multipart/form-data"
* file表单的name 必须要有值
input表单详解
input及属性
* 1. 最常用的表单 input
* 2. 属性
* name 给该标签取个名字(如果没有name,那么服务器不会接收该数据)
* value 给该标签赋予默认值
可手动输入的表单: value可写可不写
不可手动输入的表单: value必须写
* type 指定表单的类型
不指定type时,默认为text
text 文本域 可输入数字,字母,标点,汉字等任意字符
password 密码域
radio 单选 (同一类型的单选,name值必须一样)
checkbox 多选 (1. 同一类型的多选,name值必须一样)
(2. 给name值补上[], 才能实现真正的多选) \
file 文件
hidden 隐藏域 (一般用于重要性信息,必须手写name,value)
submit 提交按钮 (可通过value 改变按钮文字)
* 注:
多选文件:
file表单添加multiple
file表单的name值 补上[],才能实现正真的多选文件
新增type属性
* H5新增表单
email 邮箱
number 数字
url 网址 (正则表达式)
date 日期
search 搜索
下拉框select
1. 下拉框
* 父标签: select
* 子标签: option 子下拉框选项
optgroup 子下拉框分组
注:
* select 赋予name
* option 赋予value
多文本域
多文本域
标签: textarea
属性
* rows 行数
* cols 列数
* name
* 注: 设置行列不代表固定大小不变 可拉动
* 额外CSS:
固定大小: style="resize:none;"
默认值
* 是 正文内容
* 不是 value属性
button自定义按钮
* submit 只是单纯的提交给服务器
* button 既具有提交给服务器的功能
又有自定义功能(配合js)
注:
* button 默认值
是 正文内容
不是 value
表单常用属性
1. placeholder 背景字 提示信息
2. maxlength 最大长度
3. minlenght 最小长度
4. checked 默认选中(单选,多选)
5. selected 默认选中(下拉框)
6. readonly 只读
7. disabled 禁用
8. autofocus 自动获取光标
9. autocomplete 自动填充 on off
10.multiple 多选(文件,下拉框)
11.required 不能为空
* 注:
* readonly 和 disabled 都只能看不能改
* readonly 可以提交给服务器
* disabled 不能提交给服务器
关联标签
1. 关联标签
将表单与文本进行关联,选择文件如同选择表单
* 标签 label
* 属性:
for 绑定对应id(一般用于 文本 与 表单 分开时)
head头
设置编码
<meta charset="UTF-8">
网页标题
<title>head头</title>
重定向
秒数 地址
<meta http-equiv="refresh" content="3; url=http;//www.baidu.com">
* 可实现本网页的刷新功能
<meta http-equiv="refresh" content="3">
关键字
<meta name="keywords" content"小米, 红米, MIX, 小米商城, Redmi">
描述
<meta name="description" content="xxxxxx,xxx,x,xxxx,xxx">
导入css
<link rel="stylesheet" href="css文件地址">
导入图标
<link rel="icon" href="图标地址">
<link rel="shorticon icon" href="图标地址"> 用于兼容IE
两者一般一起使用, 但第一种不是必须的 主要是兼容浏览器
导入js
<script src="js地址"></script>
目前能够优化CEO引擎的有以下标签
titile
h1
关键字
描述
strong
em
实体符号
浏览器特征
代码中,连续输出多个空格or回车,到了浏览器中只能当做一个空格来看待
代码约定
利用浏览器特征,对代码进行排版
* 排版键: Tab
* 代码结构:
父子关系:
子标签需要向后退一个Tab
兄弟关系:
兄弟之间对齐
常见实体符号
空格
< 小于 <
> 大于 >
> 大于 >
© 版权 © (copyright的简写)
¥ 货币 ¥
格式: &实体代码;
以 & 开头
以 ; 结尾
框架
简介
这里所谓的框架是指: frame 分帧/窗口
框架标签
* 框架设置标签: frameset
* 属性
* rows = 像素/百分比/* (* 代表剩余空间)
* cols = 像素/百分比/*
* noresize 禁止拖动窗口
* frameborder 0 隐藏窗口边框线
非0 显示窗口边框线
* 框架标签:frame
* 属性
* src 窗口内容来源地址(HTML)
* name 自定义窗口名(为了方便a链接的target跳转)
* scrolling yes 显示滚动条
no 隐藏滚动条
* 坑点
* frameset 不能与 body 共存
内联框架
1. 内联框架
* 标签: iframe
* 属性:
* src 窗口内容来源地址
* name 窗口名
* frameborder 0/非0 隐藏/显示边框线
* width 宽度
* height 高度
* scrolling yes/no 显示/隐藏滚动条
* 场景:
* 选择卡
* 广告
IE浏览器实现HTML5新技术的识别
1. shiv
教 老IE 识别HTML5新技术
2. hack
[if lt IE 9] 代表如果ie版本 < 9
* 这些写法被称之为: hack写法
* hack只有IE浏览器能认识
* hack写在注释里面的
* 案例
<!-- 国外shiv地址 -->
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<!-- 菜鸟教程的 shiv地址 --> <!--[if lt IE 9]>
<script
src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js">
</script>
<![endif]-->
暂且记录这些 如有补充 欢迎欢迎