HTML
web标准
结构
- html
表现
- css
行为
- JavaScript
web标准好处
让web发展前景更广阔
内容能被更广泛的设备访问
更容易被搜寻引擎搜索
降低网站流量费用
使网站更易于维护
提高页面浏览速度
骨架其它内容
<!doctype html>
- 文档类型
- 浏览器按照HTML5规范解析页面
lang
-
页面语言
- 指定语言种类
-
en 英文
-
zh-CN 中文
-
字符集
-
gb2312简单中文
-
BIG5 繁体中文
-
GBK 全部中文字符
-
UTF-8 全世界所有国家需要用到的字符
- 标准格式
- 不写容易乱码
- HTML文件是以UTF-8编码保存的，浏览器根据编码去解码对应的html内容
浏览器内核（渲染引擎）
IE
- Trident
firefox
- Gecko
Safari
-
webkit
- 手机浏览器内核Android、ios
chrome
-
Chromium
-
Blink（二次开发）
- webkit分支
opera
- Blink
初识html
超文本标记语言
- 超越文本限制
- 超级链接文本
主要学习html标签
- html标签来描述网页元素
- 所有html标签都用<>表示
骨架标签
-
- 根标签
- 页面中最大的标签
-
- 文档头部
- 必须在其中设置
标签
-
- 网页标题
-
- 文档主体
标签分类
-
常规元素（双标签）
- 开始标签
- 结束标签
- / 关闭符
- 内容
-
空元素（单标签）
-
<标签名 />
-
-
标签关系（双标签）
-
嵌套关系
- 中包含
- 中包含
-
并列关系
- 与
标签的语义化（含义）
根据标签语义，合适地方给最合理标签，使结构更清晰
- 方便代码的阅读和维护
- 子主题 让浏览器或是网络爬虫很好解析，更好分析内容2
- 会具有更好的搜索引擎优化
扩展阅读
锚点定位
- 创建锚点链接，快速定位目标内容
- 1.使用相应的id名标注跳转目标的位置（找目标）
树
- 2.使用链接文本
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="#"
-
网页中各种元素都能添加超链接
注释标签
-
-
给人看，解释代码
-
快捷键ctrl+？
- ctrl+shift+/
-
表格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
-
-
合并单元格
-
两种方式
- 跨行合并rowspan=“合并单元格的个数”
- 跨列合并colspan=“合并单元格的个数”
-
顺序
- 先确定跨行合并还是跨列合并
- 根据 先上后下 先左后右寻找目标单元格，再写合并方式和合并数量
- 删除多余单元格
扩展（表格结构划分）
-
thead题头
- 用于定义表格头，存放标题。内部必须有tr标签
-
tbody正文
- 用于定义表格主体，放数据本体
-
tfoot脚注
- 放表格的脚注
-
以上都放到table标签中
路径（重难点）
目录文件夹
- 存放做页面所需要素材
第一层（根目录）
- 会有images存放图像文件
相对路径
-
同级
- 引用时，直接写图像名
-
下级
- 通过 / 找
-
上级
- 通过 …/甚至…/…/等返回到HTML文件的所在的上一级文件，即返回到和图片文件所在的同级目录
-
指相对于写的html文件出发，图片所处的位置
绝对路径
-
换电脑不一定用，不提倡使用
- 本地 \
- 网络下一级 /
-
绝对的网络地址
- 不另存为，复制图片网络地址，直接引用
列表
用来布局
分类
-
无序列表 ul（重点）
- ul中只能嵌套li
- li标签之间是容器，可以容纳所有元素
- 无序列表会带有自己样式属性，放下样式，让css来
- 产品链接
-
有序列表 ol（了解）
- 金牌榜
-
自定义列表（理解）
-
dl
-
dt
- dd
-
-
底部导航栏
-
地区
-
表单
用来收集用户信息
目标：写出最常用的注册类表单，说出input表单常见属性
构成
-
表单控件
-
提示信息
-
form表单域
-
用户信息的收集和传递
-
表单标签（掌握）
-
input控件（重点）
-
单标签
-
type属性设置不同属性值指定不同控件类型
-
常用属性
-
type
- text单行文本输入框、password密码输入框、radio单选按钮、checkbox复选框、button普通按钮、submit提交按钮、reset重置按钮、image图像形式的提交按钮（src必须有）、file文件域
- 子主题 2
-
name
-
用户自定义
- 控件名称
-
表单名字，后台可以通过name属性找到表单，区别不同表单
-
-
value
-
用户自定义
- input控件中的默认文本值
-
默认的文本值
-
-
单选框radio和复选框checkbox
-
name=”xxx“
- name有相同名字
-
-
checked
-
checked
- name有相同名字
- 默认选中状态
-
-
size
-
正整数
- input控件在页面中的显示宽度
-
-
maxiength
-
正整数
- 控件允许输入的最多字符数
-
-
-
-
label标签（理解）
-
提高用户体验
-
作用：用于绑定一个表单元素，当点击label标签时，被绑定的表单元素就会获得输入焦点。点击label标签里面的文字时，光标会定位到指定的表单里面
-
绑定元素
-
用label直接包括input表单
-
for id 控制
-
-
-
textarea控件（文本域）
-
多行文本输入
- 文本内容。实际用css控制宽高
-
-
select下拉菜单
-
节约空间
-
select
- select中至少包含一对option
-
option中定义select=“selected”,表示默认选中项
-
实际使用少，用div模拟多
-
XMind: ZEN - Trial Version
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
