HTML的定义

HyperText Markup Language 超文本标记语言

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。

index首页面

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

Webstorm常用快捷键

1:ctrl+/ 快速的添加单行注释
2:ctrl+shift+/ 快速添加多行注释，在光标所在位置添加注释
3:ctrl+d 快速删除光标所在的一行
4:ctrl+y 反撤销
5:ctrl+alt+↓ 复制当前行在下一行
6:ctrl+alt+L 排版页面整齐(如果QQ在运行中注意热键冲突)

块级标签

特点：独占一行，不允许其他元素和自己同行显示

标题标签：<h1>1级标题</h1>......<h6>6级标题</h6>

段落标签：<p style="text-align: justify;text-indent: 2em">青岛理工大学</p>

换行标签：<br>

分割线标签：<hr>

应用标签： <blockquote cite="www.baidu.com"> 时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多

</blockquote>

预格式标签：<pre> </pre>

有序列表标签：<ol>  <li>填写信息</li> </ol>

无序列表标签:<ul> <li>如何激活会员</li> </ul>

定义列表：<dl>  <dt>咖啡</dt>

<dd> 一种黑色的热饮料，原料据说是咖啡豆，非洲盛产

</dd> </dl>

组合标签：<figure> <img src="../img/c.jpg" alt=""width="100" height="100">

<figcaption> 漂亮的图片 </figcaption> </figure>

分组标签：<div style="height: 100px;</div>

行级标签

特点：占用的空间和自己的实际内容等宽

span标签：<span style="font-size: 40px;color: blue">0</span>

文本标签：<em>版本所有，侵权必究</em>

<i>版本所有，侵权必究</i>

<strong>版本所有，侵权必究</strong>

<b>版本所有，侵权必究</b>

超链接标签：页面链接 <a href="https://www.baidu.com" target="_blank">百度首页</a>

锚点链接<a name="top"></a>

顶部 <buttom style="position: fixed;bottom: 50px;right: 50px">

<a href="#top">返回页面顶部</a> </buttom> </div>

功能链接<a href="tencent://message/?uin=767158635">发送qq消息</a>

img标签：<img src="../img/e.jpg" alt="图片加载失败" width="100" height="69" align="right">

表格标签：<table> <caption>表格标题</caption> <tr> <td></td> </tr> </table>

表单标签：<form action="" method=""> </form>

表格标签的一些属性

border="5" 边框线宽度

width="300px" 表格宽度

height="80px" 表格高度

cellspacing="0" 表格间分割线的宽度

cellpadding="5" 表格内容距离单元格的距离

align="center" 表格的对齐方式

bgcolor="yellow" 表格的背景颜色

background="../img/g.png" 表格的背景图片

bordercolor="red" 边框线和内部分割线的颜色

td/tr的属性

就近原则：表格的属性和单元格的属性相同的情况下，单元格属性优先

width="300px" 单元格宽度

height="80px" 单元格高度

align="center" 单元格内部文字的水平对齐方式

valign="middle" 单元格内部文字的垂直对齐方式

nowrap 单元格内部文字不换行

rowspan 表格跨行使用属性

colspan 表格跨列使用属性

form表单

action:表单数据提交的地址

method:用来指定数据传递到服务端的基本方法

1：get：传递的数据会拼接到url后面

优点：简单、快捷

缺点：暴露敏感信息，数据传输量有限

2：post:传递的数据会隐藏起来，放在请求体。

优点：数据传输量大，信息保密性好

缺点：相比get请求，速度慢一些

各类表单元素

Type	功能	例子
text	单行文本输入	<input type="text" name="name">
password	密码	<input type="password" name="pwd">
radio	单选	<input type="radio" name="sex" value="man"> 男 <input type="radio" name="sex" value="women"> 女
checkbox	多选	<input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="score">足球
file	文件上传	<input type="file" name="img">
image	图形提交按钮	<input type="image" src="../img/a.png" >
button	普通按钮	<input type="button" value="注册">
reset	重置表单数据	<input type="reset" value="清空">
submit	提交表单数据	<input type="submit" value="登录">
select	下拉菜单	<select name="p" id="p"> <option value="bj">北京</option> <option value="gs">甘肃</option>
textarea	文字区域	<textarea name="" id="" style="resize: none" cols="30" rows="10"> </textarea>
fieldset legend	外边框题目内容	<fieldset> <legend>个人信息</legend> <form> ......</form> </fieldset>

一些特殊属性

1.下拉菜单的默认选择：selected

2.自动缩放：style="resize: none"

3.单选将男或女和前面第小圆圈联合起来：

性别：<input type="radio" name="sex" value="1" id="man"> <label for="man">男</label>

智能表单

（HTML5提供了多样的输入类型和风格，让设计界面更加丰富）

</form>

姓名：<input type="text"name="name" form="login">

新属性

<input type="text" name="country_code" pattern="[A-z]{3}"

title="Three letter country code" />