HTML5总结

时间：2021-01-23 22:02:58

HTML的定义

HyperText Markup Language 超文本标记语言
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准， 它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。
index首页面
<!--文档类型声明:告诉浏览器以什么标准来渲染当前页面-->
<!DOCTYPE html>
<head>
<!--meta:元数据标签-->
<meta charset="UTF-8">
<!--link:资源引入标签-->
<link rel="icon" href="img/a.png">
<!--title:定义标题-->
<title>杰瑞教育</title>
</head>
<body>
<!--正常情况下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> <!--orderList--> <li>填写信息</li> </ol>
无序列表标签:<ul><!--UnorderList--> <li>如何激活会员</li> </ul>
定义列表：<dl> <!--DefineListTitle--> <dt>咖啡</dt><!--DefineListTitle-->
<dd><!-- DefineListDescription--> 一种黑色的热饮料，原料据说是咖啡豆，非洲盛产
</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><!--锚点-->
<div style="height: 1200px;background- color: green">
顶部 <buttom style="position: fixed;bottom: 50px;right: 50px">
<a href="#top">返回页面顶部</a> </buttom> </div>
功能链接<a href="tencent://message/?uin=767158635">发送qq消息</a>
<a href="mailto://767158635@qq.com">发邮件</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属性和某个表单关联-->
<form action="www.vvv.php" method="get" id="login">
<input type="submit"><br>
<input type="email"><br>
<input type="url"><br>
<input type="data"><br>
<input type="time"><br>
<input type="month"><br>
<input type="week"><br>
<input type="number" max="10" min="3" step="2"><br>
<input type="range"><br>
<input type="color"><br>
<input type="tel">
</form>
姓名：<input type="text"name="name" form="login">

新属性

<form action="www.vvv.php" method="get" id="login">
<input type="text" autofocus="autofocus"><br>
<input type="text" autocomplete="off"><br>
<input type="text" required="required"><br>
<input type="text" name="name" placeholder="请输入姓名"><br>
<input type="submit" />
<input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
<input type="search" name="user_search" placeholder="Search W3School" />
</form>
姓名：<input type="text"name="name" form="login">

相关文章