Web开发 | HTML

作者: Ricsy | 来源:发表于2019-08-28 18:52 被阅读0次

一、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>

参阅：

HTML4.0-1

标准的HTML4.0网页头部声明规范

1.4 HTML标签

善用Enter键补全标签

标签语义化
在合适的地方使用合适的标签

标签语义化做的好，你的网站在搜索引擎中就越靠前

标签	说明
文章	文章格式
`h`	标题标签 `h1~h6` eg: `<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+/`可以调用代码助手
新窗口打开网页	`href` `target="_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

更新中......