首页 > 代码库 > HTML5基础入门
HTML5基础入门
HTML是HyperText Markup Language（超文本标记语言）的缩写，虽然说HTML也算是一种程序语言，但是实际上HTML并不像C++或Visual Basic语言那样记住大量的语法。正确的说，HTML是一种标记（tags），每个标记都是一个特定的指令，这些指令组合起来就是我们在浏览器上看到的网页。
HTML语法的概念与架构
所有的HTML标记都有固定的格式，必须用“<”符号与“>”符号括住，例如<html>。HTML有容器标记和单一标记两种。
1.容器标记
容器标记顾名思义就是成对的开始标记与结束标记，利用这两个标记将文字围住，已达到预期的效果。大部分的HTML标记都属于此种标记，终止标记前会加上一个斜线“/” 。
<开始标记>.....</结束标记>
例如：
<title>我的网页</title>
<title></title>标记的功能是将文字显示在浏览器的标题栏中。
2.单一标记
单一标记只有起始标记而没有结束标记，例如<hr>、<img>等标记都属于单一标记，<hr>标记的功能是添加分隔线，<img>标记的功能是插入图片。这些标记加上结束标记是没有意义的，这时只要将标记表示成<hr/>即可，不必写成<hr></hr>。
文字变化与排版技巧
HTML用来设置段落的标记有<p>、<br>、<pre>、<blockquote>、<hr>、<h1>~<h6>等。
1.设置段落样式的标记
在HTML语法中可以利用<p>标记来区分段落，换行可以利用<br>标记来完成。
2.设置对齐与缩进的标记
除了分段与分行外，段落处理中最重要的就是对齐与缩进的功能。
（1）<pre></pre>标记
此标记可以让文字按照原始代码的排列方式进行显示。
（2）<blockquote></blockquote>标记
此标记用来表示引用文字，会将标记内的文字换行并缩进。
<blockquote>标记的属性：
| 属性 | 设置值 | 说明 |
| cite | URL网址 | 说明引用的来源 |
3.添加分隔线
为了版面编排的效果，可以在网页中添加分隔线，让画面更容易区分主题或段落。
<hr>标记
作用是添加分隔线。
4.设置段落标题
<h1><h2><h3><h4><h5><h6>这几个标记的作用是设置段落标题的大小级别，<h1>字体最大，<h6>字体最小。由<h1>~<h6>标记标识的文字会独占一行。
5.文字效果
span（文本）:无实际意义，用于包裹某部分文字，修改特定样式
这是<span style="color: red; font-size: 36px;">Span</span>中的文字
em（强调）strong（强调）i（倾斜）b（加粗）
【Strong、em、b、i 标签的区别】
1、Strong和em都表示强调，Strong显示为粗体，em显示为倾斜。而且，Strong的强调程度要比em更高
2、Strong和b都能加粗，em和i都能倾斜。但是，Strong和em多了一层强调的语义。HTML5语言，要求标签尽可能的实现语义化。
项目符号与编号
1.编号列表
有序列表：<ol></ol> order list
列表项：<li>可以有N多个</li>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
2.符号列表
无序列表：<ul></ul> unorder list
列表项：<li>可以有N多个</li>
<ul>
<li>无序第一项</li>
<li>无序第二项</li>
<li>无序第三项</li>
</ul>
3.定义列表
定义描述列表：<dl></dl>
列表标题：<dt>一般只有一项</dt> 标题顶格显示
列表描述项：<dd>可以有N多项</dd> 描述项相对标题进行缩进显示
<dl>
<dt>这是定义列表的标题</dt>
<dd>描述项第一项</dd>
<dd>描述项第二项</dd>
<dd>描述项第三项</dd>
</dl>
img（图片）标签及相关属性
1、src：表示引用图片的地址。
路径地址的写法：
① 相对路径：以当前文件为准，去寻找图片地址。
a、与当前文件处于同一层的图片，直接写图片名
b、图片在当前文件下一层：文件夹名/图片名
c、图片在当前文件上一层：../图片名
② 绝对路径：file:///盘符:/文件夹/图片.后缀名。但是，严禁使用。
③ 网络地址：网络上的图片链接。但是，一般不使用。因为。。。
2、height="" width="" 图片的宽度高度。可以用css样式(style="width: ; height: ;")代替
3、title:图片标题。当鼠标指上后显示的文字。
4、alt:当图片无法加载的时候，显示的文字。
5、align：设置图片周围文字相对于图片的位置。top center bottom
【form表单】
1、两个重要属性：action：表单提交的服务器地址。method：表单提交数据的方法（get/post）。
2.get post方法的区别:
⑴ get:使用url传参：http：//服务器地址？name1=value1&name2=value2
(?表示传递参数，?后面采用name=value的形式传递，多个参数之间用&连接)
因此，url传参不安全，所有信息都在地址栏显示，并且可以通过地址栏随意传递其他数据。
url传参数据量有限，只能传递少量数据。
⑵ post:使用http请求传递数据，url地址不可见，比较安全，且传递数据没有限制。
综上所述常用post传递数据。
3、【input标签常用属性】
⑴ type：表示input输入框的类型，可选值
⑵name：input输入框的别名，一般情况，必填，因为传递数据时用name=value的形式传递。
⑶value：input输入框的默认值。
⑷placeholder：input的提示内容，当输入框有value的时候，提示内容消失。
⑸tabindext="1" 控制点击tab键时的跳转顺序，从最小的开始，逐个往大的跳转，获得焦点
【input特殊属性值】
⑴checked="checked" 默认选中
⑵disabled="disabled" 设置控件不能使用。用在按钮上不能点击，用在输入框上不能修改，
而且如果输入框disabled，则输入框信息不能往后台传递。
⑶hidden="hidden"：隐藏。等同于<input type="hidden" name="username"value="http://www.mamicode.com/1234"/>
常用于配合disabled，或根据其它需要，使用隐藏域传递数据。
4、【input-type属性详解】
⑴ text：文本输入框
⑵password：密码输入框，输入内容时显示小黑点
⑶radio：单选按钮，
checkbox：复选按钮，
>>>name和value属性需同时存在，提交时提交的是value中的属性值
例如 ：<input type="radio" value="http://www.mamicode.com/男" name="sex"/>提交时显示sex=“男”
>>>radio凭借name属性来区分是否为同一组，name相同为同一组，同组中只能选一个。
>>>checked="checked" 默认选中 (radio只能选一个，checkbox可以选多个)
⑷file：文件上传按钮。
⑸submit：提交按钮，提交表单数据
⑹reset:重置按钮，将表单数据重置为初始状态
⑺image：图形提交按钮，功能同submit，可以提交数据
⑻button：普通按钮，没有任何功能
5、【下拉框控件select】
⑴写法：<select>
<option></option>
<option></option>//可以有多个
<option></option>
</select>
⑵name属性，应该写在<select></select>上，所有选项只有一个name.
⑶multiple=“multiple”设置select控件为多选，可在控件按Ctrl+鼠标进行多选，一般不用。
⑷option常用属性：
value=""：当option没有value属性值时，往后台传递的是<option></option>标签中的文字。
当option有value值时，往后台传递的是value属性值。
title=""鼠标指上后显示的文字。
selected=“selected”：默认选中。
⑸<optiongroup label="山东省"></optiongroup>：用于将option标签进行分组，label属性表示分组名。
例：<select name="city" style="border-width: 2px;">
<optgroup label="山东省">
<option value="http://www.mamicode.com/yantai">烟台</option>
<option value="http://www.mamicode.com/weihai">威海</option>
<option value="http://www.mamicode.com/qingdao">青岛</option>
</optgroup>
<option value="http://www.mamicode.com/select" selected="selected">[请选择]</option>
</select>
6、【textarea文本域】
⑴ 写法：<textarea></textarea>
⑵设置宽高style="width:200px ; hight=150px ;" 自身有cols="" rows="" 属性，但不常用
⑶readonly="readonly"设置为只读模式，不允许编辑。
⑷style="resize:none;" 设置为宽高不允许修改。
⑸style="overflow: ;"设置当文字超出区域时，如何处理。
>>>也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式
>>> 常用属性值：hidden 超出区域的文字，隐藏无法显示
scroll 无论文字多少，均会显示滚动条
auto 自动 根据文字多少，自动决定是否显示滚动条
7、【form表单的边框与标题】
<fieldset>//表单边框
<legend>联系方式</legend> //表单标题
</fieldset>
注意：>>>如果想要让标题嵌入到边框中，需将标题标签写到边框标签里面。
>>>一个表单，可以有多个边框+标题的组合。
8、【HTML5智能表单】
(1)h5新增的input 的form属性，用于指向特定form表单的id，
实现input不需放在form标签之中，即可通过表单进行提交。
<form id=foo>
...
</form>
<input ... form="foo">
例：
<form action="t.html" method="get" id="form1"></form>
<input type="text" name="test" form="form1" />
（2） <input type="">新增属性详见 img中type新增属性图片
Email、 url、 date、time、month、week、number、range、color。
例：
<form action="t.html" method="get" id="form1"></form>
<input type="color" name="test" form="form1" />
（3）input元素的新增属性：
Autocomplete:自动完成功能，记录用户之前输入的内容，并在下次输入时自动提示完成输入。
>>>属性值：on/off
>>>可以在form表单上使用，对整张表单的所有控件进行自动完成的开关。
也可在input上使用，对特定输入框进行修改。
>>>绝大部分浏览器，默认开启。
autofocus：自动获取焦点，autofocus="autofocus",只能设置input元素自动获得焦点。
form：所属表单。通过from表单的id，确定此input输入哪张表单。
required：必填，required="required" 设置input必填，否则阻止提交。
pattern：使用正则表达式验证input的模式（后续讲解）
placeholder:提示内容，当有value时，取消提示。
HTML5基础入门