title: "Html"
date: 2019-07-29T15:47:30+08:00
本章内容为：《HTML基础与使用各种标签》
作者：nuoccc
1丶首先我们来了解一下什么是HTML；
- HTML全称为:Hyper Text Markup Language,翻译为中文就是超文本标记语言。
- 超文本:除了可以包含文本，还可以包含图片，声音，视频等等资源
- 标记:HTML文档的元素是以标签对的形式出现的。
2丶介绍完HTML，我们来看看HTML的整体结构：
HTML文件的后缀名为.html
<!DOCTYPE html>
</!doctype>HTML的语法：<标签></标签>
属性:<标签 属于1=值1 属性2=值2....></标签>,属性与属性之间可以空格隔开
HTML的标签可以嵌套
<html lang="en">根标签，HTML文档起源的地方，lang属性告诉搜索引擎，这个页面是关于"en"英文的页面</html>
<head>头标签，包含了<title>标签，还可以包含其他的标签，比如引入外部的css样式，外部的javascrpit代码等等</head>
<meta charset="UTF-8"><meta>为自然结束标签，其中属性charset为指定的字符编码 <meta http-equiv="keywords" content="">告诉搜索引擎这是该页面的关键字
<meta http-equiv="description" content="">告诉搜索引擎这是该页面的描速<title>HTML基础及标签使用</title>HTML页面的标题
<body>主体，指整个HTML文档</body>
3丶常用标签使用方式
1）块级标(block element)：独占一行，可以设置宽高
-
<div></div> 分块标签，例:<div>测试</div><div>测试</div>，看一下输出图:
html1.png
-
<center></center> 例如：<center>测试居中</center>,看一下输出图
html2.png
-
h1~h6：标题标签 例如：<h1>一号标签</h1><h2>二号标签</h2><h3>三号标签</h3><h4>四号标签</h4><h5>五号标签</h5><h6>六号标签</h6>,看一下输出图:
html3.png
-
<ol>-<li>: 有序列表 ，ol：ordered lists有序列表，li：list item列表项，有序列表可以包含多个li，例如:,看下输出图
html4.png
-
<ul>-<li>:无序列表， ul：unordered lists，li：list item列表项，无序列表可以包含多个li，例如：<ur><li>一号列表</li><li>二号列表</li></ur>,看下输出图：
html5.png
<p></p>：段落标签，paragraph
<pre></pre>:格式化文本，通常用于包含代码
<fieldset>--<legend>:设置分组，<legend>表示分组的名称
-
<table>--<tr>--<td> <table></table>:表格标签 <tr>:table row，表格的行,<td>:table data cell，表格的单元格 ，border属性：表格的边框的像素值 cellspacing：单元格的间距 cellpadding：单元格的内边距， 例如：
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
看下输出图:
html6.png hr:水平分割线
2）行级标签(inline element)：所有元素排在一行，不能设置宽高，高度随着内容的大小变化。
- <span>:行级实现特殊功能标签
-
<font>:设置字体 例如：<font face="隶书">这是字体</font><font face="微软雅黑">这是字体</font> 看下输出打印:
html7.png
-
<del>加删除线 例如：<del>删除</del> 看下输出打印：
html8.png -
<a>超链接标签(锚点标签)，放在该标签内的内容可以是文本，也可以是图片等，例如：<a href="www.baidu.com">点击跳转百度</a> 看下打印输出:
html9.png br：换行
-
<b>粗体
<big>大字体
<em>强调
<strong>粗体强调
<i>斜体
sub：下标
sup：上标 这些全部放一起来看看效果：
html10.png
3）行级块级标签(inline-block element):所有元素排在一行，但是可以设置宽高
-
<img>：图片标签，属性：src--要显示的图片的位置，alt--如果图片不能正常显示，给出的提示信息,width---图片宽度，height--图片高度，例如：img src="img/chuangwei.jpg" alt="失败",width="200",height="200"> 看下输出打印:
html11.png
4）转义字符
&+nbsp; 空格
&+lt; less than,小于 <
&+gt; great than,大于 >
&+amp; 与符号,"&"
&+quot; 引号,"
&+reg; 已注册
&+copy; 版权
&+trade; 商标
我们直接来看下打印输出:
5）表单
<form></form> ：表单，是块级标签
action:指明处理该表单数据的后台服务器组件的地址
method:请求的方式，分为get方式和post方式
get:会将表单中填写的内容附加在请求的URL地址后面传递给服务器，只能传少量的数据
post:会将表单中的内容添加在Form-data中传递给服务器，安全性高，可以传送大量数据，理论上传送的数据无大小限制
enctype:设置表单的类型
application/x-www-form-urlencoded：普通表单，默认值
multipart/form-data:包含文件上传的复合表单
-
<input type="",name="">type:text单行文本输入框,name为它的名称
例如：<label>姓名：</label><input type="text" name="name">
看下输出打印：
html13.png
- <input type="",name="">type:password,密码输入框
例如：
<label>密码：</label><input type="password" name="pwd">
看下输出打印：
html14.png
-
<input type="",value="",checked="">type:radio:单选按钮，value:表单元素的值，checked:为默认选中该按钮
例如：
<input type="radio" name="sex" value="boy" checked="checked">男
<input type="radio" name="sex" value="girl">女
看下输出打印：
html15.png -
<input type="",value="",checked="">type:checkbox:单选按钮，value:表单元素的值
例如：
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="sports">运动
<input type="checkbox" name="hobby" value="tour">旅游
看下输出打印：
html16.png
-
<select>下拉组合框，<option>表示每一个选择项，value表示选项的值
例如：
<select name="city">
<option value="cd">成都</option>
<option value="cq">重庆</option>
<option value="bj">北京</option>
</select>
看下输出打印：
html17.png
-
textarea多行文本，cols:包含多少列，rows:包含多少
例如：
<textarea name="intro" id="" cols="30" rows="10"></textarea>
看下输出打印：
html18.png
- <input type="" name="" value=""> type:hidden:隐藏域，不会显示在页面上，但其数据会提交给服务器
例如：
<input type="hidden" name="id" value="100">
-
<input type="" value="提交">
type=submit,提交按钮，value指明该提交按钮上显示的文字，该提交按钮会将用户填写的数据提交到服务器后台，即
action属性指明的地址
例如:
<input type="submit" value="提交">
<input type="" value="重置"> type:reset
例如:
<input type="reset" value="重置">
看下两个按键的输出打印：
html19.png
HTML基础就这些了,其实以上大部分属性和标签已经用不到了，已经被css取代，但是也可以了解一下。
