一、HTML
超文本标记语言
1. 1 HTML历史
-
HTML2.0
1995年由RFC组织发布 -
HTML3.0
W3C制定一系列规范 -
HTML4.0.1==>XTHML1.0（目前常用版本）
XHTML是HTML的严谨版 -
HTML5.0（最新版本）
向下兼容
提示：
- HTML1.0只是一个草案，没有被实际应用
- HTML正式确定就已经时2.0版本了
1. 2 HTML语法
-
<>标记（标签）符号 -
/关闭符号 - 标签大多数成对出现
- html语言必须写在标签符号里面
提示：
- 浏览器只识别html语言，不能正常识别回车和换行，只能使用特定代码实现
- 在HTML中，标签、标记、元素、节点全都指的是html标签
1.3 HTML页面
- 第一个html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
参阅：
1.4 HTML标签
善用Enter键补全标签
-
标签语义化
在合适的地方使用合适的标签
标签语义化做的好，你的网站在搜索引擎中就越靠前
| 标签 | 说明 |
|---|---|
| 文章 | 文章格式 |
h |
标题标签 h1~h6eg: <h1></h1> 一级标题 |
p |
段落标签 |
br |
单标签，代表一个换行回车 |
空格 |
空格标签 |
| buis |
同PPT的字体格式
|
b |
粗体 Bold<b></b><strong></strong> 有强调语义代表特别强调，一篇文章中不要出现多次（1~2次即可） |
u |
下划线 Underline<u></u>
|
i |
斜体 Italic<i></i> <em></em> 有强调语义代表一般强调，一篇文章中可以出现多次 |
s |
删除线 Strikethrough<s></s><del></del> （主流写法） |
1. 5 HTML属性
- html属性是以一种键值对（kv对）的形式出现的
单个属性格式：[属性名称]="[值]"或k="v"
多个属性格式：属性名称1="值1" 属性名称2="值2" ... 属性名称n="值n"
注意：多个属性时
- 属性之间空格不能丢
- 使用英文状态的符号
- 属性不分先后
1.5.1 路径
1. 绝对路径
- 从盘符开始
2. 相对路径
定义：从自身出发去寻找文件
提示：
- 相对路径不能跨盘符（C、D、E等）
1. 同级查找
直接写文件名字
格式：[文件名]
eg:
001.jpg
2. 上级查找
一般格式：../[文件名]
eg:
../002.jpg
3. 下级查找
一般格式：[文件夹名]/[文件名]
eg:
img/003.jpg
1.5.2 图片
img标签
- 插入图片标签
- 单标签
格式：
<img src="图片源" width="宽度" height="高度" alt="替代文本" title="提示文本" >
| 显示图的类型 | 包含的属性 |
|---|---|
| 正常的图 |
src 图片源eg: <img src="img/001.jpg">
|
| 设置宽高的图 |
src 图片源width 宽height 高eg: <img src="img/001.jpg" width="400" height="300">
|
| 等比例缩放的图 |
src 图片源width 宽或height 高宽和高设置其中一个，另一个等比例缩放 eg: <img src="img/001.jpg" width="400">
|
| 有提示文本的图 |
src 图片源title标题eg: <img src="img/001.jpg" title="鼠标悬停才能看到的">
|
| 有替代文本的图 |
src 图片源alt替代文本（描述这张图片的文字）eg: <img src="" alt="图片没有加载出来才能看到的" >作用： 1. 图片没有加载出来时候的替代文本 2. 网页阅读器可以读出来的文本，为了视障用户的体验 |
1.5.3 超链接
a标签
| 超链接类型 | 包含属性 |
|---|---|
| 跳转到指定的线上网站 |
href格式： <a href="http://+[域名][其他]"></a>eg: <a href="http://www.baidu.com">跳转到百度搜索首页</a>提醒： http://不可省略 |
| 跳转到本地网页 |
href格式： <a href="[本地网页路径]"></a>提示： 游标放在 ""(双引号)之间,按住Alt+/可以调用代码助手 |
| 新窗口打开网页 |
hreftarget="_blank"格式： <a href="[网址]" terget="_blank"></a>eg: <a href="http://www.baidu.com" target="_blank">新窗口打开百度搜索首页</a>
|
| 空链接 |
href格式： <a href="###" ></a>或 <a href="javascript:;" ></a>或 <a href="javascript:void(0);" ></a>注意: 当暂时不知道跳转地址时，可以采用空链接的形式 提示: 使用 #时，一个#会返回页面顶部，两个#兼容性不好，所以需要至少三个#
|
| 锚点链接 |
href格式： <a href="#id"></a>跳转到当前页面的某个位置 |
1.5.4 表单
- 表单与表格是完全不同的两种元素
- 表单是专门处理跟后台有关系的一些工作的一个标签
- 完成传递数据的功能
| 表单某属性 | 说明 |
|---|---|
| <form> | |
action |
表示提交给哪个后台程序 |
method |
表示传输数据采用哪种形式 ➢ post（加密）➢ get （不加密） |
| <input> | 文本框标签 |
type |
输入框类型 可用值： ➢ text 普通输入框➢ password 密码输入框输入的密码以*显示 ➢ radio 单选框多个单选框时，注意添加相同的name属性实现只能选择其中一个的功能 ➢ checkbox 复选框➢ submit 提交按钮为了保证兼容性，必须自己设置value值 eg: <input type="submit" value="提交">➢ reset 重置按钮为了保证兼容性，必须自己设置value值 eg: <input type="reset" value="重置">
|
name |
输入框的名称 |
id |
输入框的id编号 |
value |
输入框的默认文字 提示： 与value类似的 placeholder是默认提示文字，也是HTML5 中的新属性(不支持IE6~9)提醒： ➢ placeholder虽然IE低版本不支持但不会造成页面混乱，我们就认为该属性没问题➢ placeholder遵循渐进增强，优雅降级的原则➢ 渐进增强指的是随着浏览器版本的升高，用户体验越来越好 ➢ 优雅降级指的是保证低版本浏览器不混乱，高版本浏览器越来越好 |
1. 单选框
第一种方式：
性别只能选一个
==>name属性
<form action="" method="post">
性别：
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex">保密
</form>
第二种方式：
性别只能选一个，且点击文字也可以选择对应的按钮
==>name属性
==>id属性
==>label标签
<form action="" method="post">
性别：
<input type="radio" name="sex" id="nan" ><label for="nan">男</label>
<input type="radio" name="sex" id="nv" ><label for="nv">女</label>
<input type="radio" name="sex" id="baomi"><label for="baomi">保密</label>
</form>
第二种方式：
性别只能选一个，且点击文字也可以选择对应的按钮，且默认性别为男
==>name属性
==>id属性
==>checked属性
==>label标签
<form action="" method="post">
性别：
<input type="radio" name="sex" id="nan" checked="checked"><label for="nan">男</label>
<input type="radio" name="sex" id="nv" ><label for="nv">女</label>
<input type="radio" name="sex" id="baomi" ><label for="baomi">保密</label>
</form>
2. 下拉菜单
第一种方式：
默认选项：selected="selected"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="post">
地址:<select>
<option value="">天津</option>
<option value="">北京</option>
<option value="" selected="selected">上海</option>
</select>
</form>
</body>
</html>
第二种方式：
分组：optgroup
默认选项：selected="selected"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="post">
地址:<select>
<optgroup label="北京">
<option value="">东城</option>
<option value="">朝阳</option>
<option value="">海淀</option>
</optfroup>
<optgroup label="深圳">
<option value="">罗胡</option>
<option value="">福田</option>
<option value="" selected="selected">南山</option>
</optfroup>
</select>
</form>
</body>
</html>
3. 文字域
多行文本
- 文字域不能设置cols、rows属性来设置宽高，因为不同浏览器解析结果不一样
- 文字域的样式要配合样式表（.css）(宽width、高height)实现
<form action="" method="post">
<textarea name="" id="" cols="30" rows="10" placeholder="请输入文字"></textarea>
</form>
4. 多选框（复选框）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="post">
你的爱好:
<input type="checkbox" id="ymq"><label for="ymq">打羽毛球</label>
<input type="checkbox" id="lq"> <label for="lq"> 打篮球 </label>
<input type="checkbox" id="zxc"><label for="zxc">骑自行车</label>
</form>
</body>
</html>
5. 按钮
(1) 提交按钮
- 固定格式：
<input type="submit" value="提交">
(2) 重置按钮
重置不同于清空
重置作用是把表单中所有内容恢复到默认刷新后的状态
- 固定格式：
<input type="reset" value="重置">
(3) 按钮
格式1：<input type="button" value="按钮">
格式2：<button>按钮</button>
6. 综合应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="post">
昵称：<input type="text" placeholder="请输入昵称" autofocus="autofocus"><br>
密码：<input type="password"><br>
性别：
<input type="radio" name="sex" id="nan" checked="checked"><label for="nan">男</label>
<input type="radio" name="sex" id="nv" ><label for="nv">女</label>
<input type="radio" name="sex" id="baomi" ><label for="baomi">保密</label><br>
地址：<select><br>
<option value="">北京</option>
<option value="" selected="selected">深圳</option>
</select>
<select>
<optgroup label="北京">
<option value="">东城</option>
<option value="">朝阳</option>
<option value="">海淀</option>
</optfroup>
<optgroup label="深圳">
<option value="">罗胡</option>
<option value="">福田</option>
<option value="" selected="selected">南山</option>
</optfroup>
</select><br>
详细地址：<br><textarea name="" id="" cols="20" rows="2"></textarea><br>
爱好：
<input type="checkbox" id="ymq"><label for="ymq">打羽毛球</label>
<input type="checkbox" id="lq"> <label for="lq"> 打篮球 </label>
<input type="checkbox" id="zxc"><label for="zxc">骑自行车</label><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
<button>按钮</button>
</form>
</body>
</html>
用户体验提升点说明：
- 一进入网页游标就聚焦在昵称输入框中
- 密码输入时加密
- 性别与地址有默认值
- 单选框只能选一个且选择对应文字也可以生效
- 多选框选择对应文字可以生效
- 考虑不同浏览器的兼容性，提交和重置按钮设置value
更新中......
网友评论