HTML
网页
由网页元素组成，是一个html文件，后缀名.htm、.html
浏览器内核（渲染引擎）
IE
- Trident
firefox
- Gecko
Safari苹果
-
webkit
- 手机浏览器内核Android、ios
chrome
-
Chromium
-
Blink（二次开发）
-
webkit分支
- 国产居多
-
opera欧鹏
- Blink
ie退出历史舞台
360双引擎
-
ie
- webkit
负责读取网页内容，将内容显示到页面
web标准构成
结构
-
html
- 对网页元素进行整理分类
表现
-
css
- 外观样式
行为
-
JavaScript
- 网页模型交互效果
结构、样式、行为相分离
- 最佳体验方案
骨架其它内容
<!doctype html>
-
文档类型声明标签
- 必须在开头
-
浏览器按照HTML5规范解析页面
lang
-
页面语言
- 指定语言种类
-
en 英文
-
zh-CN 中文
-
字符集
-
gb2312简单中文
-
BIG5 繁体中文
-
GBK 全部中文字符
-
UTF-8万国码 全世界所有国家需要用到的字符
- 标准格式
- 不写容易乱码
- HTML文件是以UTF-8编码保存的，浏览器根据编码去解码对应的html内容
web标准好处
让web发展前景更广阔
内容能被更广泛的设备访问
更容易被搜寻引擎搜索
降低网站流量费用
使网站更易于维护
提高页面浏览速度
W3C
-
万维网联盟
- 国际标准化组织
标签的语义化（含义）
根据标签含义，合适地方给最合理标签，使结构更清晰
- 方便代码的阅读和维护
- 让浏览器或是网络爬虫很好解析，更好分析内容
- 会具有更好的搜索引擎优化
标题标签
-
1-6根据重要性依次递减
- 文字加粗一行显
初识html
超文本标记语言
-
超越了文本限制，不只是文本，还有图片音视频
-
超级链接文本
- 一个文件跳转到另一个文件
-
制作网页，由各种标签组成
主要学习html标签
-
html标签来描述网页元素
-
所有html标签都用<>表示 大部分成对出现
- 语法规范
骨架/基本结构标签
-
- 根标签
- 页面中最大的标签
-
- 文档头部
- 必须在其中设置
标签
-
- 网页/文档标题
-
- 文档主体
标签分类
-
常规元素（双标签）
-
开始标签
-
结束标签
-
/ 关闭符
- 正斜杠
- 内容
-
-
空元素（单标签）
-
<标签名 />
-
-
标签关系（双标签）
-
包含关系
- 中包含
- 中包含
-
并列关系
- 与
扩展阅读
锚点链接
- 创建锚点链接，快速定位到页面中的某个位置
- 1.使用链接文本
- 2.使用相应的id名标注跳转目标的位置（找目标）
树
- 返回顶部 href=”#“即可
base标签
-
- 整体链接打开状态
- 一般写在之前
pre标签
- 不好控制，不常用。预先写好的文字格式显示页面，保留空格和换行
特殊字符
- 空格符  ； 大于 >； 小于 <；
- 以运算符&开头，以分号运算符；结尾
- 不是标签，是符号
html常用标签
排版标签
-
标题h、段落p、水平线hr/、换行br、
-
div span（没有语义，盒子，装网页元素，用来布局）
- 一行只能放一个div
- 一行可以放很多span
文本格式化标签（熟记）
- 粗体 、斜体 、加删除线
、下划线 - 后者强调 xhtml推荐后者
标签属性
- <标签名 属性1=“属性值1” 属性2=“属性值2” …>内容 </标签名>
- 标签可以有多个属性，必须写在开始标签的标签名后面
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均已空格分开
- 采取 键值对 的格式 key=“value” 的格式
图像标签img/
-
-
src URL 图像路径 必须属性
-
alt 文本 图像不能显示时的替换文本
-
title 文本 鼠标悬停时显示的内容
-
width 像素 xhtml不支持页面百分比 宽
- 修改一个，另一个等比例缩放
-
height 像素 xhtml不支持页面百分比 高
-
border 数字 设置图像边框宽度
-
书写一般不写单位，样式负责
链接标签
-
href 必须写
-
target 打开窗口方式
- 默认 _self 当前窗口打开页面
- _blank 新窗口打开页面
-
外部链接 需要添加 http://
-
内部链接 直接链接内部页面名称
- 网站内部页面的相互链接
-
没有确定目标 空链接 href=“#”
-
网页中各种元素都能添加超链接
-
下载链接：href的链接是文件或zip等压缩包形式
注释标签
-
- 给人看，解释代码
- 快捷键ctrl+/
- 注释不能嵌套
表格table
用来展示大量的表格式数据
目标：1.能熟练写出n行n列表格2.能简单合并单元格
构成
- 表格
- 定义一个表格标签
- 表格标题
- 居中显示于表格之上
- 必须紧随table标签之后
- 只在表格里面有意义
- 行
- 定义表格中的行，必须嵌套在table标签中
- 里面只能嵌套td类单元格
- 单元格
- 定义表格中的单元格，必须嵌套在tr标签中
- 用于存储数据
- 容器，可以容纳所有元素
- 表头单元格标签
- 文本加粗居中
-
无列标签
表格属性
-
border 边框
- 默认0无边框
-
width、height
-
align在网页中的对齐方式
- left、center、right
-
cellspacing
-
单元格与单元格边框之间的空白间距（外间距）
-
默认2像素
- 一般为0
-
-
cellpadding
- 单元格内容与单元格边框之间的空白间距（内间距）
- 默认1像素
-
一般情况三参为0
-
cellpadding
-
cellspacing
- border
-
-
-
单元格和内容空隙
-
cellpadding
- 内边距
-
-
单元格和单元格之间空隙
-
cellspacing
- 外边距
-
合并单元格
-
两种方式
- 跨行合并rowspan=“合并单元格的个数”
- 跨列合并colspan=“合并单元格的个数”
-
顺序
- 先确定跨行合并还是跨列合并
- 根据 先上后下 先左后右寻找目标单元格，再写合并方式和合并数量
- 删除多余单元格
扩展（表格结构划分）
-
thead题头（区域）
- 用于定义表格头，存放标题。内部必须有tr标签
- thead里必须有tr标签
-
tbody正文
- 用于定义表格主体，放数据本体
-
搜索排名 稍显优先
-
tfoot脚注
- 放表格的脚注
-
以上都放到table标签中
路径（重难点）
目录文件夹
- 存放做页面所需要素材
第一层（根目录）
- 会有images存放图像文件
相对路径
-
同级
- 引用时，直接写图像名
-
下级
- 通过 / 找
-
上级
- 通过 …/甚至…/…/等返回到HTML文件的所在的上一级文件，即返回到和图片文件所在的同级目录
-
指相对于写的html文件出发，图片所处的位置
绝对路径
-
换电脑不一定用，不提倡使用
- 本地 \
- 网络下一级 /
-
绝对的网络地址
- 不另存为，复制图片网络地址，直接引用
列表
用来布局
分类
-
无序列表 ul
-
ul中只能嵌套li
-
li标签之间是容器，可以容纳所有元素
-
无序列表会带有自己样式属性，放下样式，让css来
-
产品链接
- 列表没有排序功能
-
是有顺序的
- 和有序区别是：显示样式不同
-
-
有序列表 ol（了解）
- 金牌榜
-
自定义列表（理解）
-
dl定义列表
-
dt
- dd
-
-
底部导航栏
- 下文对小标题的说明
-
地区
-
dl里只能包含dd/dt
- dd和dt并列关系
- dt和dd里可以放任何标签
- 一个dt可以有多个dd
-
表单
用来收集用户信息
目标：写出最常用的注册类表单，说出input表单常见属性
构成
-
表单控件
-
提示信息
-
form表单域
-
用户信息的收集和传递
-
表单标签（掌握）
-
input控件（重点）
-
单标签
-
type属性设置不同属性值指定不同控件类型
-
常用属性
-
type
-
text单行文本输入框、password密码输入框、radio单选按钮、checkbox复选框、button普通按钮、submit提交按钮、reset重置按钮、image图像形式的提交按钮（src必须有）、file文件域
-
name是表单元素名称
- value是属性值
-
-
name
-
用户自定义
- 控件名称
-
表单名字，后台可以通过name属性找到表单，区别不同表单
-
-
value
-
用户自定义
- input控件中的默认文本值
-
默认的文本值
-
-
单选框radio和复选框checkbox
-
name=”xxx“
- name有相同名字
-
-
checked
-
checked
- 针对name有相同名字的单复选框
- 默认选中状态
- 如果单选框全加checked，最后一个生效
-
-
size
-
正整数
- input控件在页面中的显示宽度
-
-
maxlength
-
正整数
- 控件允许输入的最多字符数
-
-
submit
- 将表单域中表单元素值送给后台服务器
-
reset
- 清除表单域中的所有数据
-
file不能修改value值
-
-
-
label标签（理解）
-
提高用户体验
- 修饰提示信息
-
作用：用于绑定一个表单元素，当点击label标签内文本时，被绑定的表单元素就会获得输入焦点。点击label标签里面的文字时，光标会定位到指定的表单控件里面
-
绑定元素
-
用label直接包括input表单
-
for id 控制
-
-
-
textarea控件（文本域）
-
多行文本输入
- 文本内容。实际用css控制宽高
- 标签内加多个空格、回车生效
-
-
select下拉菜单
-
节约空间
-
select
- select中至少包含一对option
-
option中定义select=“selected”,表示默认选中项
-
实际使用少，用div模拟多
-
XMind: ZEN - Trial Version
扫一扫
2299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
