、HTML基本信息

注释：<!-- -->

DOCTYPE：就是告诉浏览器，我们要使用什么规范

head：网页头部标签

• title：网页标题
• meta：描述性标签，描述网站的信息，用来做SEO
• charset = "UTF-8"
• name = "keyword" content = ""关键词
• name = "descrisption" content = ""描述

body：代表网页主题

二、网页基本标签

标题标签

• <h1>一级标签</h1>一直到6级标签

段落标签

• <p>段落标签</p>

换行标签

• <br/> /是闭合的意思，单标签，闭不闭合都行

水平线标签

• <hr/>

字体样式标签

• <strong>粗体</strong>
• <em>斜体</em>

注释

• <!-- -->

特殊字符

• 空格 ---->一个空格
• 大于号 >
• 小于号<
• 版权符号©

特殊符号就是 & xxx ;

三、图像标签

<img src="path" alt="文字" title="text" width="x" heigth="y" />

• src 图像地址 必填
• alt 图像的代替文字(找不到图片的时候显示) 必填
• title 鼠标悬停提示文字
• width 图像的宽度
• height 图像的高度

注意：../ 代表上一级目录

四、链接标签

文本链接

<a href="path" target="目标窗口位置">链接文本或图像</a>

• href 链接路径，要跳转带那个位置 必填
• target链接在哪个窗口打开：常用值_self 当前窗口（默认的）、_blank 新窗口

图像链接：就是嵌套图片标签

页面间链接

• 从一个页面链接到另一个页面

锚链接

• 第一步需要一个标记 使用name做标记
• 第二步跳转到标记 使用#标记
• <a name="top" ></a>
  <a href="#top"></a>
  上面是页面内的跳转
  
  <a name="down"></a>
  <a href="第一个页面的path#down"></a>
  页面间的跳转

功能性链接

• 邮件链接：mailto： <a href="mailto:邮箱"></a>点击后会打开邮箱
• qq链接：在qq推广工具里面的

五、行内元素和块元素

块元素

• 无论内容多少，该元素独占一行
• p、h1-h6

行内元素

• 内容撑开宽度、左右都是行内元素的可以排在一起
• a、strong、em...

六、列表

什么是列表：就是一种展示方式

有序列表

• <ol> <li></li> </ol>

无序列表

• <ul> <li></li> </ul>

自定义列表

<dl>
    <dt></dt> 标题
    <dd></dd> 选项
    <dd></dd>
    <dd></dd>
</dl>

七、表格

为什么使用表格

• 简单通用
• 结构稳定

基本结构

• 单元格
• 行
• 列
• 跨行
• 跨列

<table border="1px" 边框>表格标签
    <tr>
        <td></td>列标签
        <td></td>
        <td></td>
    </tr>行标签 这代表一行
</table>

跨列：使用colspan="夸的列数" <td colspan="4">

跨行：使用rowspan="夸的行数" <td rowspan="4">

八、视频和音频

视频元素

• video
• <video src="path" controls autoplay></video>
• src:资源路径
• controls控制条
• autoplay自动播放

音频元素

• audio
• <audio src="" controls autoplay></audio>

九、页面结构分析

十、iframe内联框架

<iframe src="path" name="mainFrame"></iframe>

• src必填
• width
• heigth
• name标记
• name的使用
  <iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>
  
  <a href="path" target="hello"></a>
  点击超连接后，会在内联框架里显示这个页面

十一、表单

表单：form

<form method="post|get" action="result.hetml">
    <input />
</form>

• method 规定如何发送表单数据常用psot、get
• action 表示向何处发送表单数据，把表单的数据发送给那个地方

get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效

post方式提交：比较安全，可以传输大文件

表单元素格式

单选框

• input type="radio"
• value 单选框的值
• name ：表示组，name一样一次只能选一个，name不一样可以选多个
• checked默认选中的

多选框

• input type="checkbox"
• value = "sleep"
• name = "hooby"
• checked默认选中的
• <input type="checkbox" name="sleep" value="slppe" checked/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  多选框的结果是以数组的形式返回的

按钮

<input type="button" name="btn1" value="点击" />普通按钮
<input type="image" src ="点击跳转的path"/>图片按钮
<input type="submit"/>提交按钮
<input type="reset"/>重置按钮

下拉框

<select name="列表名称">
    <option value="选项的值" select>中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
</select>
提交的格式就是列表名称和value

• selected 默认选择

文本域

<textarea name="name" cols="列数" rows="行数">文本内容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

邮件验证

<input type="email" name="youjian">

URL

<input type="url" name="url"> 

数字验证

<input type="number" name="num" max="100" min="0" step="10">

滑块

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表单的应用

隐藏域 hidden

<input type="text" id="mark" hidden>

只读 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增强鼠标可用性

<label for="mark">点击</label>
<input type="text" id="mark">

十三、表单初级验证

为什么要进行表单验证：缓解服务器压力、保证数据安全

提示信息

• placeholder="提示信息" 在输入框上

非空判断

• required

正则表达式验证

• pattern
• <input type="text" name="mail" pattern="正则表达式">

高级验证使用js

么是HTML

Hyper Text Markup Language, 超文本标记语言

标记又称为标签(Tag), 一般语法:

<tagName></tagName>

它可以有属性(Attribute):

<tagName attributeName="value">, 如:

<meta charset="utf-8" />

标签也可以不成对地关闭:

<tagName />

HTML文档由浏览器解释并执行。

HTML文档基本结构

<!DOCTYPE html> ----- 告诉浏览器用html5的标准来解释和执行该网页

<html>

<head> ---- 头部, 可包含meta, title等标签

</head>

<body> ---- 主体, 包含主要内容

</body>

</html>

meta

<meta charset="utf-8" /> 用于告诉浏览器用什么样的字符编码来解释网页中的文本.

常见编码:

iso-8859-1: 纯英文编码

gbk, gb2312: 简体中文编码

big5: 大五码,繁体中文编码,主要应用于台湾地区

utf-8: 国际首选编码,它兼容所有的字符

除此之外, meta还可以通过keywords, description属性对页面关键词及描述信息进行设置, 以提高搜索引擎的命中.

title

网页标题, 显示在浏览器选项卡的标题栏上!

文本排版标签

h1-h6: 内容标题标签

p: 段落

br: 换行

hr: 水平线

strong: 粗体文本

em: 斜体文本

span: 无任何特殊样式的文本

pre: 预格式标签,其中的内容在页面上带格式渲染

small: 比当前字体小的文本

html特殊字符/转义字符

空格

< 小于

> 大于

© 版权符

" 双引号

html注释

<!-- 注释内容 -->

图像标签

<img

src="图像地址"

title="鼠标悬停提示"

alt="图像加载错误时的替代文本"

width="宽度"

height="高度"

/>

图像地址分为2种:

1. 相对地址, 如: img/cc.jpg

2. 绝对地址, 如: http://img.bcd.com/2017/1644232421.jpg

超链接

<a href="链接地址" target="目标窗口">文本|图片</a>

目标窗口:

_self: 目标页面在当前窗口打开

_blank: 目标页面在新窗口中打开

如果是在页面具有frameset/frame/iframe的场景下:

_top: 在顶级窗口中打开

_parent: 在父级窗口中打开

_自定义名称: 在指定的特定窗口中打开

三种用法:

1. 页面间链接

<a href="page/login.html"></a>

2. 锚链接

<a href="#help"></a>

help是本页面中一处id为help的标签, 如: <p id="help">

或者:

help是通过a标签命名的锚记, 如: <a name="help"></a>

3. 功能性链接

唤醒本地安装的外部程序如 outlook/foxmail/qq/msn/aliwangwang...

<a href="mailto:abcdef@qq.com"></a>

div标签

div是一个容器, 常用于页面的布局

标签的分类:

1. 块级标签/块级元素

如: div, h1-h6, p, hr

特征: 独占容器中的一行, 其宽度是容器的100%

2. 行级标签/行级元素

如: span, img, strong, em, a

特征1: 多个行级元素可以同处一行, 其宽度由内容来撑开(auto)

特征2: 大部分行级元素设置其width/height无效

HBuilder常用快捷键

ctrl + D : 删除当前行

ctrl + PgUp : 当前行上移

ctrl + PgDown : 当前行下移

ctrl + / : 注释 | 取消注释

ctrl + shift + F : 整理代码格式

ctrl + C : 复制当前行

ctrl + X : 剪切当前行

ctrl + V : 粘贴

ctrl + Z : 撤消上一步操作

ctrl + S : 保存当前文件

ctrl + shift + S : 保存项目中全部文件

ctrl + Enter : 在当前行的下方插入新行

ctrl + shift + Enter : 在当前行的上方插入新行