1.1 HTML基础知识点
HTML是什么?
Hyper Text Markup Language 超文本标记语言 的缩写
开发一个html文件,可以有很多方式 :比如Dreamweaver,HBuilder等等专业工具。 最简单的方式就是用记事本写一个
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
二、中文乱码问题
对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 。
三、基础结构
<!DOCTYPE html>
声明为 HTML5 文档
<html>
元素是 HTML 页面的根元素
<head>
元素包含了文档的元(meta)数据,如
<meta charset="utf-8">
定义网页编码格式为 utf-8。
<title>
元素描述了文档的标题
<body>
元素包含了可见的页面内容
<h1>
元素定义一个大标题
<p>
元素定义一个段落
注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>行标题</h1>
<p>段落。</p>
</body>
</html>
四、常用标签
HTML 标题(Heading)是通过<h1> - <h6>
标签来定义的.(由大变小)
HTML 段落是通过标签 <p>
来定义的.(会自动换行)
<b> <strong>
都可以用来实现粗体的效果
<i> <em>
都可以表示斜体效果
HTML 链接是通过标签 <a>
来定义的.
HTML 图像是通过标签<img>
来定义的.
<hr>
标签在 HTML 页面中创建水平线。
注释:<!-- 这是一个注释 -->
删除标签 <del>
使用del标签实现的删除效果
五、标签的格局
<img>
即图像标签 ,需要设置其属性 src指定图像的,路径src直接使用文件名,不需要/(绝对路径、相对路径),可用width=“200” height="200"描述大小。用块确定相应位置
<div align="left">
<img src="example.gif"/>
</div>
<div align="center">
<img src="example.gif"/>
</div>
<div align="right">
<img src="example.gif"/>
</div>
alt图片的默认文字,图片不存在的时候,alt就会出现
2.超链接<a href="跳转到的页面地址">
超链显示文本属性target点击变色
当鼠标放在超链上的时候,就会弹出提示文字。title=“跳转到http://www.12306.com”
使用图片也可以超级链接</a href="www.baidu.com"><img src="1.jsp"></a>
3、表格,border表示边框
tr(table row)表示行,所有3个tr元素
td(table data)表示列,每一行,有2列,所以每一个tr元素里,有2个td元素
比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素,width可以填像素和百分比。
<table border="1" width="200px">
<tr>
<td width="50%" align="left">1</td>
<td>2</td>
</tr>
<tr>
<td align="center">3</td>
<td>4</td>
</tr>
<tr>
<td align="right">a</td>
<td>b</td>
</tr>
</table>
设置td的属性valign;valign=“top”、“middle”、“bottom”
设置td的属性colspan(行合并)、设置td的属性rowspan(列合并)
同时:设置tr或者td的属性bgcolor背景色。
4、列表
列表分无序列表和有序列表
分别用<ul>
标签和<ol>
标签表示
六、HTML的块div和span
div是块元素,即自动换行 ,常见的块元素还有h1,table,p
span是内联元素,即不会换行 ,常见的内联元素还有img,a,b,strong
这两种标签都是布局用的 这种标签本身没有任何显示效果 ,通常是用来结合css进行页面布局
<div align="left">
<img src="http://how2j.cn/example.gif"/>
</div>
<div align="center">
<img src="http://how2j.cn/example.gif"/>
</div>
<div align="right">
<img src="http://how2j.cn/example.gif"/>
</div>
七、表单标签
<form> 用户要输入的内容 </form> 表单标签
<input type = "类型" /> 采集用户输入的内容(内部闭合)
属性
type = "text" 文本框
type = "password" 密码框
在密码框和文本框 指定name属性,方便后台获取数据
指定value属性,设置默认值的内容(看情况添加)
<input type = "text" name = "名称(必须要指定)" value = "值的内容">
---------------------------------------------------------
type = "raido" 单选框 name = ""属性标记同一组选项
<input type = "raido" name = "sex">
<input type = "raido" name = "sex">
设置默认值:checked = "checked" 或者true 默认被选中
<input type = "raido" name = "sex" checked = "checked" />
----------------------------------------------------------
type = "checkbox" 多选按钮
设置默认值:checked = "checked" 或者true 默认被选中
type = "reset" 重置按钮 (恢复默认值)
type = "submit" 提交按钮 (提交表单信息)
----------------------------------------------------------
*在普通文本框上添加name属性后 地址栏发生的变化 会根据相应的name属性=输入的或者默认的value信息
username=aaa&passsword=1234567&sex=0&mz=xiaoze&mz=boduo
-----------------------------------------------------------
type = "file" 选择上传文件
name属性指定
type = "hidden" 隐藏组件
<input type="hidden" name="userID" values="001"/><br />
用于接收一些后台数据
-----------------------------------------------------------
type = "button" 按钮
指定value属性显示按钮上的文字
和js(javaScript)配合使用绑定事件
-----------------------------------------------------------
type = "imags" src="图片地址"
导入一张图片,将图片设置为提交按钮
-----------------------------------------------------------
<select></select> 下拉选单
name指定属性
<option></option> 选项内容
value 指定属性 方便后台接收
selected = "selected" 设置默认值
-----------------------------------------------------------
选择佳丽<select name="jiali">
<option value ="qxz">---请选择---</option>
<option value ="xl" selected = "selected">小丽</option>
<option value ="xm">小美</option>
<option value ="ax">阿香</option>
<option value ="ly">刘英</option>
</select>
八、表单的属性
<form action="表单的提交路径">
表单的提交路径,一般为后台地址,也可以使一个html页面
------------------------------------------------
<form method = "提交方式">
表单的提交方式(默认采用get方式)
主要有post和get
post和get的区别
get方式会把参数列表显示在地址栏上,post不会
get的安全级别低,post安全级别高
get方式不支持大数据,post方式支持大数据。