前端学习——HTML
HTML概述和基本结构
HTML是什么？
http://www.w3school.com.cn/index.html
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，
超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，
用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，
如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
HTML是由：标签和内容构成
<title>这是文档中的标题</title>
HTML标签（标记）的语法
标签是由"<"和">"括起来
双标签：<标签名>....</标签名>
单标签：<标签名/>
HTML基本结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是网页的标题</title>
</head>
<body>
<!--这是网页的内容-->
</body>
</html>
HTML文档规范
html制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
HTML注释：
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
<!-- 这是一段注释 -->
HTML中Head头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
HEAD标签里面负责对网页进行一些设置以及定义标题，
设置包括定义网页的编码格式，外链css样式文件和javascript文件等，
设置的内容不会显示在网页上，标题的内容会显示在标题栏
设置网页编码：<meta charset="utf-8"/>
关键字：<meta name="Keywords" content="关键字" />
描述： <meta name="Description" content="简介、描述" />
网页标题：<title>本网页标题</title>
导入CSS文件：<link type="text/css" rel="stylesheet" href="**.css"/>
CSS代码：<style type="text/css">嵌入css样式代码</style>
JS文件或代码： <script >。。。</script>
... ...
HTML标题
通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。
6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题（最重要的），其后是 <h2>（次重要的），
再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--这是<h*>标题练习-->
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
HTML段落,换行,图片，链接，字符实体
<!DOCTYPE HTML>
<html>
<head>
<meta charset = 'utf-8' />
<title>二</title>
<meta name='keywords' content='~~~~~'>
<meta name='description' content='!!!!!'>
<link rel='shortcut icon' href='baidu.ico'>
</head>
<body>
<h1>满江红·怒发冲冠</h1>
<h3 >作者：岳飞</h3>
<p>怒发冲冠，凭阑处、潇潇雨歇。</p>
<p>抬望眼，仰天长啸，壮怀激烈。</p>
<p>三十功名尘与土，八千里路云和月。</p>
<p>莫等闲，白了少年头，空悲切。</p>
<p>靖康耻，犹未雪；臣子恨，何时灭？</p>
<p>驾长车，踏破贺兰山缺。</p>
<p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
<p>待从头，收拾旧山河，朝天阙。</p>
<br>人生伟业的建立，不在能知，乃在能行。</br>
挫折其实就是迈向成功所应缴的学费。<br />
<b>hello</b><br />
<strong>hello</strong><br />
<i>hello</i><br />
<em>hello</em><br />
<del>hello</del><br />
H<sub>2</sub><br />
10<sup>2</sup><br />
<pre>hello dcds</pre><br />
<marquee>翻滚吧~牛宝宝</marquee>
<marquee direction='right'>奔跑吧~皮卡丘~~</marquee>
<center>
<button>提交</button>
</center>
<center>
<img src='imgs/11.jpg' alt='啊，报错啦' title='哈哈哈哈哈'>
</center>
</body>
</html>
列表
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8' />
<title>列表实例</title>
<link href='imgs/baidu.ico' />
</head>
<body>
<h1>列表的实例</h1>
<!--这是一个无序列表-->
<ul>
<li><a href=''>PYthon</a></li>
<li><a href=''>JAVA</a></li>
<li><a href=''>PHP</a></li>
<li><a href=''>RUBY</a></li>
<li><a href=''>C++</a></li>
<li>C++</li>
</ul>
<!--有序列表-->
<ol>
<li><a href=''>PYthon</a></li>
<li><a href=''>JAVA</a></li>
<li><a href=''>PHP</a></li>
<li><a href=''>RUBY</a></li>
<li><a href=''>C++</a></li>
</ol>
</body>
</html>
表格：
<!DOCTYPE HTML>
<html>
<head>
<title>个人简历</title>
<meta charset='utf-8'>
</head>
<body>
<center>
<table width='1000px' border='1' cellpadding='20px' bgcolor='yellow'>
<caption height='20px'>我的个人简历</caption>
<tr valign='middle' align='center'>
<th>姓名</th>
<th>hello</th>
<th>性别</th>
<th>男</th>
<th rowspan='5' colspan='2'></th>
</tr>
<tr align='center'>
<td>民族</td>
<td>汉族</td>
<td>年龄</td>
<td>18岁</td>
</tr>
<tr align='center'>
<td>政治面貌</td>
<td>团员</td>
<td>身高</td>
<td>175CM</td>
</tr>
<tr align='center'>
<td>学历</td>
<td>本科</td>
<td>户籍</td>
<td>甘肃</td>
</tr>
<tr align='center'>
<td>驾驶证</td>
<td>A1</td>
<td>毕业时间</td>
<td>2017.07.28</td>
</tr>
<tr align='center'>
<td>通讯地址</td>
<td colspan='2'>济南市</td>
<td>邮编</td>
<td colspan='2'>210000</td>
</tr>
<tr align='center'>
<td>QQ</td>
<td>1541623372</td>
<td>手机</td>
<td>1387267321321</td>
<td>E-mail</td>
<td>@yuxiang.com</td>
</tr>
<tr align='center'>
<td>爱好特长</td>
<td colspan='5'></td>
</tr>
<tr>
<div width='1000px' height='500px' border=2 color='blue'>
<td colspan='6' >教育经历：</td>
</div>
</tr>
</table>
</center>
</body>
</html>
表单：
<!DOCTYPE HTML>
<html>
<head>
<title>tablesheel example</title>
<meta charset='utf-8'>
<style type="text/css">
.two{
height:20px;
}
.one{
height:20px;
}
.three{
font-size:30px;
}
body form select {
height:30px;
width:100px;
valign:middle;
}
</style>
</head>
<body>
<form action='./1.py' method='post' enctype='multipart/form-data'>
<label style='font-size:30px';>username:</label><input class='two' type='text' name='username' value='' placeholder='plese input your name' maxlength='10' size='15px' aotufocus /><br />
<label class='three'>username:</label><input class='one' type='password' name='passwd' value=''><br />
sex:<label><input type='radio' name='sex' value='w' checked />男</label>
<label><input type='radio' name='sex' value='m' />女<br /></label>
hobby:<label><input type='checkbox' name='check[]' value=''>篮球</label>
<label><input type='checkbox' name='check[]' value=''>足球</label>
<label><input type='checkbox' name='check[]' value=''>排球<br /></label>
籍贯:<select name='city' >
<option value='GS'>甘肃</option>
<option value='SD'>山东</option>
<option value='BJ'>北京</option>
<option value='HB'>河北</option>
<option value='TJ'>天津</option>
<option value='SH'>上海</option>
<option value='CD'>成都</option>
</select><br />
fileup:<input type='file' name='file' /><br />
内容:<textarea name='areas' style='resize:none' rows='5' col='40'></textarea><br />
<input type='submit' value='注册' />
<input type='image' src='./imgs/11.jpg' width='40' height='18' />
<input type='reset' value='重置' />
隐藏域:<input type='hidden' name='id' value='100' >
</form>
</body>
</html>
表单注释说明：
input表单项中的属性，可以提供
*type属性:表示表单项的类型:值如下:
text:单行文本框
password:密码输入框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
image:图片提交按钮
reset:重置按钮, 还原到开始\(第一次打开时\)的效果
hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
*name属性:表单项名,用于存储内容值的
*value属性:输入的值\(默认指定值\)
size属性:输入框的宽度值
maxlength属性:输入框的输入内容的最大长度
readonly属性:对输入框只读属性
*disabled属性:禁用属性
*checked属性:对选择框指定默认选项
src和alt是为图片按钮设置的
注意：reset重置按钮是将表单数据恢复到第一次打开时的状态，并不是清空
image图片按钮，默认具有提交表单功能。
