html
HTML
1.什么是HTML?
超文本标记语言.
HyperText Markup language
How To Make Love...
2. 了解浏览器相关内容:
五大浏览器: IE浏览器、chrome浏览器(谷歌浏览器)、火狐浏览器、Safari浏览器、Opera欧鹏浏览器。
IE浏览器:兼容性的问题
IE 4/5.5/6/7/8 不支持HTML5的浏览器
IE9/10/11/12 部分支持HTML5的浏览器
非IE浏览器(Opera,chrome,FF,Safari) W3C
360安全浏览器 IE内核
360极速浏览器 chrome相同的内核 webkit内核
遨游浏览器 IE内核+chrome内核
。。。。。
在学习过程中我们会因为各种浏览器遇到不同的显示效果,这就是所谓的浏览器兼容性.
3.HTML的标准和版本问题
目前使用的HTML版本:
HTML4.01版本
XHTML1.0版本
HTML5版本
4.HTML学习的重点和难点.
本章的学习重点和难点:
重点: 标签和标签属性的学习
难点: 标签太多,属性太多,记忆困难
HTML文件相关
文件的命名方式:
文件后缀: .html和.htm
通常情况下使用.html作为一个完整HTML页面的后缀.
通常情况下使用.htm作为一个网站的模板使用.
文件名称:
1.不允许使用中文,可以使用英文和拼音
2.不要使用特殊符号(部分)
3.可以使用数字命名、
第一个HTML标签
<marquee>什么是兄弟?兄弟就是你有xiong,我有di</marquee>
标签 :<marquee>
元素 :marquee
习惯上标签和元素基本没差别
格式1:
<开始标签名>其他内容</结束标签名>
斜线 /正斜线 \反斜线
<marquee width="50%">
什么是兄弟?兄弟就是你有xiong,我有di
</marquee>
格式2:
<开始标签名 属性名=“属性值”>其他内容</结束标签名>
关于引号:
在声明属性时,属性值可以写双引号,单引号,也可以不写引号,推荐使用双引号。
<marquee width="50%" loop="2">
什么是兄弟?兄弟就是你有xiong,我有di
</marquee>
格式3:
<开始标签名 属性名=“属性值” 属性名=“属性值” ...>
其他内容
</结束标签名>
<marquee width="50%" loop="2">
<font color="red">
什么是兄弟?兄弟就是你有xiong,我有di
</font>
</marquee>
格式4:
<开始标签名 属性名=“属性值” 属性名=“属性值” ...>
<其他开始标签 属性...>其他内容</其他结束标签>
</结束标签名>
HTML标签的特点: 允许标签嵌套。(嵌套必须要合理缩进)
浏览器具备一定的容错性,简单的代码错误可以被自动更正,不提倡我们写错误代码。
HTML中常见的问题:
1.符号问题,必须使用英文半角符号,禁止出现中文或者全角
2.标签太多 记不住,属性太乱记不住,多写。
HTML标签部分
1.全局架构标签
<!-- DTD文档类型声明 -->
<!doctype html>
<html>
<!--网页的头标签 不可见-->
<head>
<!--网页标题标签-->
<title>奥巴马穿越中国防空识别区</title>
</head>
<!--网页的内容标签 可见-->
<body>
<marquee>奥巴马真牛,应该改名奥巴牛</marquee>
</body>
</html>
2. body标签
bgcolor 设置页面的背景颜色属性
在HTML中表示颜色的几种方式:
1.英文单词方式 red/blue/green/pink....
2.RGB颜色表示方式 计算机的三原色进行组合(有兼容性问题)
格式: rgb(红色,绿色,蓝色)
颜色取值都是0-255
3.HEX(16进制)方式’
格式: #红色绿色蓝色 #FF0000->红色
background 设置页面的背景图片
如果同时设置背景颜色和图片 以背景图片为主,颜色会被遮盖
文本标签
<h1>...<h6> h系列标签 标题标签 (没有h7以后的标签)
h1~h6 特征:
1.都是粗体字
2.从h1到h6 字体逐渐变小
3.独占一行 标题的特征
h1-h6标签在SEO优化中的使用原则:
1.h1标签一个页面只允许出现一次,而且存放最重要的内容
2.h2以后标签页面可以使用多个,h2标签一般用来表示和当前页面主题相关的其他重要内容
3.h3标签几乎不具备什么SEO优化效果,和普通标签区别不大
4.h4-h6标签一般不适用
文本样式标签
<b> 表示粗体样式的标签 单纯用来表示样式
<i> 表示斜体的样式的标签 单纯用来表示样式
<u> 表示下划线的样式的标签 单纯用来表示样式
<strong> 表示粗体样式的标签,有强调意义。
<cite> 表示斜体样式的标签 有强调意义。 更强烈
<em> 表示斜体样式的标签 有强调意义。
<font> 纯样式标签 设定颜色 字体和大小
color 设置字体颜色
size 设置字体大小 只有1-7
face 设置字体类型
格式标签:
<P> 表示段落标签
特点: 每个段落的最后都会空一行
<br> 强制换行标签 (单标签)
br标签封闭时可以 <br />
<hr> 水平线标签
Width 设置水平线的宽度 。一般用百分比。
<center> 居中标签 将该标签内的所有内容居中显示
<pre> 预格式化标签
作用: 将HTML页面代码中的样式原样输出到HTML页面中
<marquee> 滚动标签
Width 设置开始滚动的位置
loop 设置循环的次数
Behavior 设置滚动方式
scroll 从右向左 slide 停在边上 alternate钟摆模式
<div> 无意义标签 代表块状元素
作用: 划分页面布局
<span> 无意义标签 代表行内元素(内联元素)
作用:输出文字
块状元素和行内元素的问题:
1.块状元素独占一行,不与其他元素在一行共保存,行内元素的特征可以再一行共存
2.宽高设定对块状元素有效,对行内元素无效(在DTD声明的情况下)
列表标签
<ol> order list 有序列表
type 设定排序标示类型
start 设定排序起始位置
<li> list 列表选项标签
<ul> unorder list 无序列表
<dl> define list 定义列表
<dt> 定义标题
<dd> 定义描述
通过操作(包括点击移动等)能够打开一个新的页面或者文件的方式 都是超链接.
<a> 超链接标签
href 用于定义连接地址
锚点连接 #锚点名称
邮箱连接 mailto:邮箱地址
普通连接 连接地址
target 设定新页面的打开方式
_self 连接在当前页面打开
_blank 在新页面打开连接
_top 在顶级页面打开
_parent 在上一级页面打开
自定义方式 框架中使用
name 用于定于锚点连接的名称
A标签的作用:
1.普通的超链接
2.页面的锚点连接
3.邮箱连接
<a href=”mailto:conghao126@163.com”>邮箱</a>
关于连接地址问题:
绝对路径: 有协议 有路径
http://as.meituan.com/deal//21269369.html
组成:
http:// 协议部分
http /https/ftp/ftps/svn.... file://(本地)
as.meituan.com/ 域名部分
Deal 路径部分
21269369.html 文件名部分
相对路径:没有协议 有路径
./ 在当前文件夹之下
../ 在上一层文件夹之下
图片标签:
<img> 图片标签
用于在HTML页面中使用图片 单标签
src 引入图片的地址
Width 设置图片的宽度
Height 设置图片的高度
alt 设置图片的描述
title 设置图片的描述
Border 设置图片的边框 ,一般用于设置取消边框而不是增加边框.
表格标签:
<table> 定义表格区域
border 设定表格的边框
Width 设定表格的宽度
Height 设定表格的高度
align 设定表格的对其方式
bgcolor 设定表格的背景颜色
<tr> 定义表格的一个行
bgcolor 设定行的背景颜色
Align 设定表格内容的水平对其方式
left 左对齐 right 右对齐 center 居中对齐
valign 设定表格内容的垂直对其方式
top 顶部对齐 bottom底部对其 middle 居中对齐
<td> 定义表格行中的一个列
<th> 定义表头行中的一个单元格 和td类似
bgcolor 设定单元格的背景颜色
Align 设定单元格内容的水平对齐方式
valign 设定单元格内容的垂直对其方式
colspan 设置单元格的跨列属性
rowspan 设置单元格的跨行属性
<caption> 定义表格的描述标签
表单标签
<form> 定义一个表单的范围
action 表单提交的目标页面
Method 设置表单数据提交的方式
get方式 (明文传送) post方式(密文传送)
<input> 设定一种类型的输入表单
Type=”text” 普通文本输入框
注意:必须要写name值M,,可以写value值作为默认值
Type=”password” 密码输入框
注意: 必须要写name值,不需要写value值
Type=”radio ” 单选按钮
注意:必须写name值,name值必须相同才能实现单选,value值必须写
Type=”checkbox” 多选按钮
注意:必须写name值,nane值通常需要使用[](需要多选操作时),value值必须写
Type=”submit” 提交按钮
注意:可以不写name值 value值就是按钮的文字
Type=”reset” 重置按钮
注意:可以不写name值 value值就是按钮的文字
Type=”file” 上传文件表单
注意: 要填写name值 不需要写value值
Type=”image” 图片提交按钮
注意:name值不需要 value值不需要 需要填写src属性引入一张图片.,
Type=”hidden” 隐藏表单
注意:该表单无法显示在页面中 必须填写name值和value值。
<select> 定义下拉菜单的标签
name 用来定义当前表单的名称
Multiple 设置当前下拉列表为多选列表
size 用于设定表单的显示大小 在具有Multiple 属性时使用
<option> 下拉菜单的选项标签
Value 用以声明当前选项的值
<textarea> 文本域标签 (成对标签)
name 设定表单名称
rows 设定表单高度
cols 设定表单宽度
注意;该标签没有value属性 默认值需要在开始和结束标签 内写
<button> 通用按钮标签
该标签通过属性设置可以变为不同的按钮
type =”button” 普通按钮 没效果
Type=”submit” 提交按钮 和input提交按钮一样
Type=”reset” 重置按钮 和input重置按钮一样
表单的其他属性:
选中属性:
checkbox和radio 选中属性
checked 选中(单属性无值)
select标签的选中属性
selected 选中 (单属性无值)
长度限制属性:
input表单中的text和password表单和textarea表单都可以使用
maxlength属性 值为整数
大小调整属性:
input表单的大小调整属性,仅用于普通和密码表单
select在多选模式下可以使用size属性
size 属性 值为整数