html入门基础(详解）
一、HTML
1.HTML：是一种用于创建网页的超文本标记语言(Hyper Text Markup Language)
-
“超文本”就是指页面可以包含图片，链接，甚至音乐，视频，程序等非文字元素。
-
HTML语言是Web的基础，可以说Internet是建立在HTML基础之上的。
-
HTML5是新一代HTML标准，大部分浏览器已经支持。
二、HTML5基本结构
<!DOCTYPE html>//html5网页声明
<html lang="en"> //<html>元素是HTML页面根元素
//lang属性：声明当前页面的语言类型，“en"英文，”zh“中文
<head>
<meta charset="utf-8" />//<meta />设置网页编码格式位utf-8
<title>文档标题</title>//<title>设置文档标题
</head>
<body>
....页面内容（各种标签）
</body>
</html>
三.基本标签
1、div和span
<div>标签：块级元素，可用于组合其他HTML元素的容器- div没有特定的含义，通常用于对文档结构进行逻辑上的分块
- div的前后会换行
<span>标签：
-
行内元素（内联元素），可用作文本的容器
-
span没有特点的含义
-
span的前后不会换行
-
span示例
<p>她有一双 <span style="color:blue">蓝色</span> 的眼睛</p>
2、文本相关
- 标题标签：
<h1>-<h6>
<h1 align="center">欢迎光临我的主页</h1>
<h2 style="text-align:center;">欢迎光临我的主页</h2>
<h3>欢迎光临我的主页</h3>
<h4>欢迎光临我的主页</h4>
<h5>欢迎光临我的主页</h5>
<h6>欢迎光临我的主页</h6>
- 段落标签，换行标签，label 标签：
段落标签：<p align="center/left/right"> 一段文字 </p>
换行标签：<br> 或者 <br/>
特别提醒：不要在<p>里嵌套块级元素，如嵌套p或div
<label> 标签：
<label for="…"> 标签文字 </label>
for属性：绑定一个控件id值，当用户点击label标签内文本，就会将焦点
切换到绑定的控件上。
<label for="username">用户名</label>
<input type="text" id="username" />
- 点击"用户名"时，文本框将获得焦点
嵌套写法：嵌套时可省略 for 属性
<label> 用户名<input type="text" /> </label>
格式标签：部分
粗体：<b> 斜体：<i> 下划线：<u> 删除线：<strike>
下标：<sub> 上标：<sup>
小号字：<small> 大号字：<big>
强调(加粗)：<strong> 强调(斜体)：<em>
突出显示(黄色背景)：<mark>
**HTML注释： <!-- 注释文字 -->**
3.图片
<img src="url"width="宽度值" height="高度值"alt="说明" />
无法载入图像时显示alt信息
宽度值和高度值单位是像素点px
<img src="https://s3.pstatp.com/toutiao/static/img/logo.271e845.png" alt="今日
头条" height="50px" width="200px">
运行截图：
4. 超链接
超链接标签： <a href="url"> 链接文字 </a>
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
<a href="http://www.wust.edu.cn" target="_blank" >武汉科技大学</a>
target="_blank"新开窗口打开页面
运行截图：
超链接的 URL。可能的值：
- 绝对 URL - 指向另一个站点（比如 href=“http://www.example.com/index.htm”）
- 相对 URL - 指向站点内的某个文件（href=“index.htm”）
- 锚 URL - 指向页面中的锚（href="#top"）
5、列表
- 无序列表ul
<ul>
<li><a href="http://www.wust.edu.cn">武汉科技大学</a></li>
<li><a href="http://www.hust.edu.cn">华中科技大学</a></li>
<li><a href="http://www.whu.edu.cn">武汉大学</a></li>
</ul>
运行截图：
- 有序列表ol
默认序号从1开始
<ol start="100">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
运行截图：
6.HTML表格
border边框厚度，width/height表格宽度/高度
rowspan="2"表格单元横跨两行的表格：
colspan="2"表格单元横跨两列的表格
<table border="1" width="值"height="=值">
<caption>
<!--表格标题-->
</caption>
<tr>
<th> </th> <th> </th><!--表头行-->
</tr>
<tr>
<td> </td> <td> </td><!--数据行-->
</tr>
</table>
表格示例
<table border=1 width=600>
<caption>学生名单</caption>
<tr>
<th>学号</th> <th>姓名</th> <th>院系</th>
</tr>
<tr>
<td>2017001</td> <td>张无忌</td> <td>计算机学院</td>
</tr>
<tr>
<td>2017002</td> <td>令狐冲</td> <td>计算机学院</td>
</tr>
</table>
运行截图：
<table border=1 width=600>
<caption>专业设置表及在校人数表</caption>
<tr>
<th>录名</th> <th colspan="4">专业人数</th>
</tr>
<tr>
<th rowspan="6">计算机学院</th>
<th colspan="4">计算机科学技术专业</th>
</tr>
<tr>
<th>16级</th><th>17级</th><th>18级</th>
<th>19级</th>
</tr>
<tr>
<th>150人</th> <th>150人</th> <th>200人</th> <th>220人</th>
</tr>
<tr>
<th colspan="4">软件工程专业</th>
</tr>
<tr>
<th>16级</th><th>17级</th><th>18级</th>
<th>19级</th>
</tr>
<tr>
<th>80人</th> <th>80人</th> <th>90人</th> <th>90人</th>
</tr>
<tr>
<th rowspan="3">外国语学院</th>
<th colspan="4">英语专业</th>
</tr>
<tr>
<th>16级</th><th>17级</th><th>18级</th>
<th>19级</th>
</tr>
<tr>
<th>60人</th> <th>80人</th> <th>90人</th> <th>90人</th>
</tr>
</table>
四、Form表单
1.表单概念
- Form：为用户输入创建表单
- 其中可包含文本框，密码框，单/复选框，列表框，按钮。
- 表单常用于向指定的url提交用户数据。
Form基本结构
url:提交后跳转的页面
get或post 传送数据的方法
form元素是块级元素，其前后会产生换行
Form基本结构
<html>
<body>
<form action="URL" method="get或post">
表单元素
…
<input type="submit" value="提交">
<input type="reset" value="重填">
</form>
</body>
</html>
<form action="url页面" method="get" >
用户名：<input type="text" name="username"> <br/>
密 码：<input type="password" name="psd" maxlength=6>
<br/>
<input type="submit" value="提交">
<input type="reset" value="重填">
</form>
运行截图：
get方法提交数据会在地址栏中显示
get方法：跳转页面后用用问号"?“连接请求串
多个值(name)之间用单个”&"连接
2. Form常用元素
- 2.1 文本框和密码框
用户名：<input type="text" name="username" value="lzm" title="提示信息" autofocus> <br />
密 码：<input type="password" name="psd" maxlength="8" placeholder="长度8个字符">
value设置初始值，
maxlength=“8” ,输入的最大长度
placeholder=“长度8个字符”,占位提示(输入时消失)
获得焦点autofocus,autofocus="autofocus"简写
其他属性：
- 只读属性：readonly=“readonly”
- 禁用属性：disabled=“disabled”
- 自动填充属性：autocomplete=“on” (配合提交按钮)
**
- 2.2隐藏域
隐藏于在页面中对用户是不可见的。
目的：
收集信息以利于表单处理
程序使用。
提交数据时，有name值的隐藏域或其value值会一并提交
2.3单选框
<form>
性别：
<label>
<input type="radio" name="sex" value="male" checked="checked"> 男
</label>
<label>
<input type="radio" name="sex" value="female"> 女
</label>
</form>
- 套一个label的好处：点击选项文字也可以选中
- name值相同才能互斥
- value=“male”，提交的实际值
- checked=“checked”，设置为选中状态
2.4复选框
- 复选框使用相同的name值主要是为取值方便
<form>
爱好：
<label>
<input type="checkbox" name="like" value="football">足球
</label>
<label>
<input type="checkbox" name="like" value="basketball">篮球
</label>
</form>
2.5 列表框
<select id或name="名称" size=可见行数>
<option value="值1" >内容1</option>
…
<option value="值n" >内容n</option>
</select>
- 单选下拉列表示例：
增加 selected=“selected” 指定默认选中项
<form>
专业：
<select name="major">
<option value="0">计算机科学与技术</option>
<option value="1" selected="selected" >软件工程</option>
<option value="2">网络工程</option>
</select>
</form>
- 多选列表框示例：
size=1 为下拉列表框(默认下拉列表框)
size>1 为列表框
multiple="multiple"多选（配合ctrl或shift键）
<form>
专业特长：<br/>
<select name="master" size=4 multiple="multiple">
<option value= "0" >.NET编程</option>
<option value= "1" >J2EE编程</option>
<option value= "2" >Java编程</option>
<option value= "3" >Android编程</option>
<option value= "4" >C语言编程</option>
</select>
</form>
2.6. 文件域
<form >
附件：<input type="file" name="myfile" accept="文件类型">
</form>
文件类型值
缺省 所有文件
image/* 图像文件
audio/* 声音文件
video/* 视频文件
MIME_type 某个有效MIME类型，不带参数
7. 文本区域
<form>
简历：<br/>
<textarea name="intro" cols="50" rows="10">请填写个人简历</textarea>
</form>
2.8 提交和重置按钮
submit按钮与form的action属性自动绑定
<input type="submit" value="提交">
<input type="reset" value="重填">
2.9 一般按钮
onclick事件属性
JavaScript代码 ："alert(‘你点击了按钮’) "
<input type="button" value="确定" onclick="alert('你点击了按钮') " >
2.10 Button按钮
<button type="button"> button一般按钮 </button>
<button type="submit"> button提交按钮 </button>
<button type="submit"> <img src="images/1.gif"> </button>
<button type="reset"> button重填按钮 </button>
2.11 日期域
<form>
<input type="date" name="mydate">
</form>
2.12 区间域
<form>
成绩<input type="range" min="0.0" max="100.0" step="0.5" value="60.0"
id="score" name="score" >
<span id="msg"></span>
<input type="submit" value="提交">
</form>
