HTML5基础
一、HTML相关概念
1.1 HTML及相关概念的介绍
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language) 万维网的描述性语言。
-
XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。
-
HTML5指的是HTML的第五次重大修改（第5个版本）(HTML5 是 W3C 与 WHATWG 合作的结果)
1.2 HTML的发展历史
1.3 W3C组织介绍
W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C (制定了结构(html)和表现(css)的标准，非赢利性的。)
二、认识HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
hello html
</body>
</html>
现在来解释以下上边这串代码:
<!DOCTYPE html>：声明文档类型，这是个html文件。
<html>：说明我们写的是html标记语言。
<head>：文件头部
<meta charset="utf-8">：声明编码格式，有gb2312、utf-8。
<title> </title>：文档标题内容，写在两个标签尖括号内部的， 是显示在状态栏上的内容。
<body> </body>：写在body与body之间的是我们html文件的主体部分，一般写文件都要在body与body之间。
三、HTML中常用的标签
2.1 标题段落: <h+数字> 文本内容
- 通常直接在html文件的文档编辑器里直接输入h + 数字，然后使用键盘上的Tab键一键补全代码即可，数字最高位为6，对应md文档标题最高为六级标题，下边是在HBuilderX中的代码示例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.2 水平分隔线
<hr>
2.3 段落标签
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
段落标签每一行中间都会有一行空行，与换行符要注意区分，它们的目的都是一样的，但是在浏览器中显示的效果却是不一样的。
2.4 换行符
段落 标签2 <br>
这两个文本内容现在在浏览器端看起来是换行了，但是你有没有注意到它跟上边段落标签的区别，是的，你没看错，换行符仅仅是换行，它并没有让这两个文本形成一个段落，仅仅只是起到一个换行的目的。
2.5 空格分隔符
段落 标签2
注意：一个完整的  + ；只表示空一格，如果你需要两个文本之间空很多行的话，你需要多重复几次你的操作。
2.6 加粗
<b>加粗内容</b>
<strong>加粗内容</strong>
2.7 倾斜
<em>倾斜内容</em>
<i>倾斜内容</i>
2.8 超链接
<a href="https://www.baidu.com">百度一下</a>
<a href="#" title="我是空链接">空链接</a>
<a href="http://www.ifeng.com" target="_blank">在新窗口打开</a>
超链接有三种形式，三种链接使用都是 输入 a 标签，然后Tab键一键补全代码就好了，然后在" " 里边填写你想要加入的链接，尖括号里边写text的内容，相当于提示内容；当然如果是空链接的话，你可以在 " " 里边添加一个 #，其中这串代码中title的作用是给空链接引用增加一个小提示，让你能够知道它是个什么玩意；最后一个跟之前的很相似，但它的不同就体现在：target =" _blank" 表示页面打开方式为在新窗口打开。
2.9 图片
<img src="../resources/颜色名称.jpg"width="500" height="300">
<img src="https://p0.ifengimg.com/ifeng/index/20150921/ifengLogo.png">
- 第一种方式表示为相对路径下的图片文件, …/ 表示返回上一级目录，/表示文件所在目录，还可以在
中添加属性，width 、height图片的宽、高，title = “图片标题”。
- 第二种方式：直接在浏览器中任选一张图片，鼠标右键复制图片链接，粘贴就好了，同样也可以对该图片属性设置宽和高的属性；
2.10 无序列表
<ul>
<li>苹果</li>
<li>西瓜</li>
<li>香蕉</li>
<li>榴莲</li>
</ul>
尝试着在浏览器运行这串代码，哎，你会发现每一行代码text文本前都有一个小黑点，不错，这就是无序列表，其格式为 ul - li，打开浏览器，右键运行检查，查看浏览器右侧代码，你会发现其实这个列表的用处其实还是蛮广泛的，你在输入的时候，只需要手动输入ul、li，然后Tab一键补全代码就可以了。
2.11 有序列表
<ol type="I" start="7">
<li>苹果</li>
<li>西瓜</li>
<li>香蕉</li>
<li>榴莲</li>
</ol>
怎么样，是不是很熟悉，它跟无序列表不一样，会在text文本前多出来一个数字序号，通过对其类型的修改：type = " "，type里边的内容是规定列表中的列表项目的项目符号的类型。可以让它变成其它的任何形式，甚至可以消失，start表示从type类型开始的序号，记住它的语法就好，比较少用，ol - li ,Tab一键补全代码。
说明：
- 1 数字顺序的有序列表(默认值) （1, 2, 3, 4）。
- a 字母顺序的有序列表，小写（a, b, c, d）。
- A 字母顺序的有序列表，大写（A, B, C, D）。
- I 罗马数字，大写（I, ii , iii, iv）。
- i 罗马数字，小写（i , ii, iii, iv）。
- start 属性规定有序列表的开始点。
2.12 自定义列表
<dl>
<dt>海贼王</dt>
<dd>第一集</dd>
<dd>第二集</dd>
<dd>第三集</dd>
<dt>黑客帝国</dt>
<dd>第一集</dd>
<dd>第二集</dd>
<dd>第三集</dd>
</dl>
这个相对来说就比较复杂一点，三种类型的标签，它是没有任何序号的列表，其中dl 表示这是一个自定义列表，dt是其开头目录，下级目录是dd，记住代码格式 dl - dt -dd 就好。
2.13 表格
<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
<tr>
<td></td>
<td></td>
</tr>
</table>
- 说明：
- table双标签表示这是一个表格。
- th标签表示单元格内容会加粗居中，一个th也可以表示一行，常表示表头。
- 一个 tr 表示一行；
- 一个 td 表示一列（一个单元格）；
- 表格的相关属性：
- width= “表格的宽度”
- height= “表格的高度”
- border= “表格的边框”
- bgcolor=“表格的背景色”
- bordercolor=“表格的边框颜色”
- cellspacing=“单元格与单元格之间的间距”
- cellpadding=“单元格与单元格内容之间的空隙”
- 对齐方式：align=“left/ center / right”;
- 合并单元格属性：
- colspan= “所要合并的单元格的列数” 合并列；
- rowspan= “所要合并的单元格的行数” 合并行；
例如：我们现在来写一个包含了我们喜欢的明星的姓名、性别、年龄的两行三列的表格。
<table border="1" width="300" height="100" bordercolor="red" bgcolor="azure" align="center" cellpadding="10">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>鹿晗</td>
<td>30</td>
<td>男</td>
</tr>
</table>
上边这串代码的意思是：这个表格的边框线宽度为1，总宽为300个像素长度，总高为100个像素长，边框线颜色为红色，表格背景填充颜色为天蓝色，对齐方式为居中，单元格和单元格内容之间的间距为10个像素长度。
2.14 表单
<form method="post/get" action="表单提交链接">
<input type="text" name="username"/>
<input type="password" name="password"/>
<input type="submit"/>
</form>
- 表单的作用：
- 是用来收集用户的信息的；
- 表单的用法：
- form 输入Tab键一键补全代码，form里边有三种属性：
- 一种是name = " "：里边是表单的名称。
- 一种是method方法：method = “post / get” 两种方式。
- 这个在本文章的最后会说明获取数据的两个方式 get 和 post 的区别。
- 一种是action方法：action= “表单提交链接” 。
- form 输入Tab键一键补全代码，form里边有三种属性：
- 表单内部的输入属性：
- a) 单行文本框：
- 输入 input，enter键一键补全代码即可。
- b) 密码框：
- 可以设置type的内容，以及密码框的提示。
- c) 按钮：按钮也可以有三种形式。
- 第一种：button 双标签，里边尖括号里边的文本为按钮。
- 第二种：input标签，往里边的type后添加属性，value添加属性。
- 第三种：submit提交按钮，点击可以刷新页面。
- a) 单行文本框：
单行文本框
<input type="text" value="按钮内容" placeholder="默认提示文字" />
密码框
<input type="password" placeholder="请输入密码" />
按钮
<input type="button" value="按钮" />
<button>按钮</button>
<input type="submit" value=“按钮内容” />
2.15 单选框、复选框、下拉菜单和文本框
- a) 单选框：type = “radio”，后边添加其它的属性。
- b) 复选框：type = “checkbox” ，后便添加其它的属性。
- c) 下拉菜单：select 双标签，菜单内容 option 双标签。
- d) 文本框：textarea 双标签，里边添加 属性。
单选框
<input type="radio" name="like" value="code" disabled/>
<input type="radio" name="like" value="english" checked />
说明：同一组单选框的name属性值必须一样，相同name的单选框只能选择一个。
- checked：默认选中。
- disabled：禁用。
复选框
<input type="checkbox" name="like" value="code"/>
<input type="checkbox" name="like" value="english" checked="checked"/>
说明：同一组复选框的name属性值必须一样， 相同name的复选框可以选择多个。
下拉菜单
<select name="like">
<option selected>菜单内容</option>
<option>菜单内容</option>
<option>菜单内容</option>
</select>
<! -- selected 默认选中功能 -- >
文本框
<textarea name="textareal" id = "" cols="字符宽度" rows="行数"></textarea>
2.16 另外补充两种标签div 和 span的用法
- div 标签
- 块标签，没有具体的含义。
- 是用来设置文档区域，是文档布局常用的标签。
<div> </div>
- span 标签
- 内联标签
- 可以是某一小段文本，或者是某一个字。
<span> </span>
2.17 补充：from中的获取数据的两个方式get和post的区别
- a) 客户端和服务器端交换数据的方式：
- get主要是从服务器上获取数据。
- post主要是向服务器传送数据。
- b) 两个方法对url的机制及安全性：
- get是把参数数据队列加到提交表单的action属性所指的 url 中，值和表单内各个字段一一对应，在url中可以看到;
- post是通过 HTTP post 机制，将表单内 各个字段与其内容 放置在 HTML header 内一起传送到 action 属性所指的URL地址, 用户看不到这个过程, 安全性相对get较高。
- c) 传递的数据量大小：
- get传送的数据量较小，不能大于2KB；
- post传送的数据量较大，一般被默认为不受限制。
- d) 安全性和执行效率比较：
- get安全性非常低，post安全性较高。
- get执行效率比post方法好。
总结
- get方式的安全性较post方式要差一些，包含机密信息的话，建议用 post数据提交 方式。
- 在做数据查询时，建议用 get 方式；而在做 数据添加、修改 或者是 删除 时，建议使用post 方式。
文章引用：
HTML入门与进阶以及HTML5_wuyxinu的博客-CSDN博客 - HTML入门与进阶以及HTML5
4477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
