一、了解html语言
-
Html(Hypertext Markup Language),超文本标记语言，它是互联网上应用最广泛的标记语言。文件的命名方式为index.html（推荐） 或者index.htm。
基本结构
1.区分HTMl4.01和XHTML(约束):
- XHTML:eXtensible Hypertext Markup Language,可拓展的超文本标记语言, 比HTML更严格,可以理解XHTML是新的HTML规范;所有标签必须闭合，也就是说开始标签要有相应的结束标签。
2.认识HTML5
- HTML5的优势不容小视,主要是增强了Web应用程序的功能如客户端校验,绘图支持,多媒体支持等，如video、audio和canvas 标记;
<html>
<head>
<title>页面的标题</head>
</head>
<body>
这是我的第一个html页面
</body>
</html>
3. 注释标签
- <!- -注释的内容- ->;
4. 标签(元素)
HTML的标签不区分大小写,但是为了兼容XHTML,建议大家都小写;
双标签：开始标签和结束标签一起出现，
如:<font>要显示的文字 </font>
没有斜杠的是开始标签，有斜杠的是结束标签。
单标签：<br/> <hr/>
规范的写法是在右尖括号前加上反斜杠。
注意:写标签的时候,标签与标签之间是不允许错乱嵌套.
5. 属性和值
- <font color = "red"> 叩丁狼教育 </font>
color:属性名
red:属性值
属性名和属性值用“=”连接,假如属性值是阿拉伯数字或英文字母可以不使用引号（单引号或双引号）,假如属性值是汉字，那么一定得加上引号,建议都使用引 号。每个标签都有id,style,class等核心属性;
6. 标签属性
标签属性中分了三种：
1 HTML 标准属性，可以理解成事几乎所有的HTML和XHTML都有支持的属性；
class 规定元素的类名（classname）；
id 规定元素的唯一 id
style 规定元素的行内样式（inline style）
title 规定元素的额外信息（可在工具提示中显示）
以及其它的语言键盘属性等，上面是几个比较常用的属性。
2 标签上的可选和必选属性，这些属性只针对单个的标签有效果；
3 事件属性，HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript
7. 特殊字符与转义字符
html字符
二、常用HTML标签
<!-- .... -->:定义HML注释的标签;
<html>:定义HTML文档的根标签;
<head>:定义HTML页面的头部标签;
<title>:定义HTML页面标题,放置于<head></head>之间;
<body>:定义HTML页面主体部分;
<style>:用于引入CSS文件,一般放于<head></head>之间;
<script>:用于引入JavaScript文件,一般放于<head></head>之间;
<h1>到<h6>:定义标题一到标题六,和world一致;
<p>:定义段落,使用如:<p>床前明月光</p><p>疑是地上霜</p>
<div>:定义文档中的结构;为HTML提供结构和背景;
<span>:和<div>基本相似,区别是<span>定义的节默认不换行;
<br/>:单标签,插入一个换行;
<hr/>:单标签,定义一条水平线;
<p>,<div>,<span>之间的默认情况下效果区别:
<span>...</span>标签不会导致换行,<div>...</div>会换行,而<p>...</p>会产生一个段落,所以段落和段落之间默认有很大的间距;
三、超链接和锚点
<a> 标签的两个重要属性:
href:它指链接的目标,也就是超链接关联的另一个资源;
target:指定使用框架集中的哪个框架来装载另一个资源;属性值有:
_slef:表示自身,默认;
_blank:新窗口;
_top:顶层框架;
_parent:父框架;
<a>:可定义锚(anchor)
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）;
<a href =”#A1”>第一章</a>
<a href =”#A2”>第二章</a>
<a name =”A1”>第一章内容</a>
<a name =”A2”>第二章内容</a>
四、列表标签
-
<ul>:定义无序列表;
该元素只能包含<li>子标签;
type属性:可指定列表项目符号类型,属性值有:
disc:表示实心圆点;●
square:表示空心圆圈;■
circle:表示实现方块;○ -
<ol>:定义有序列表;
该元素只能包含<li>子标签;
type属性:可指定列表项目序号类型,属性值有:
A:表示使用大写英文字母作为序号;如A、B、C 等;
a:表示使用小写英文字母作为序号;如a、b、c 等;
I:表示使用大写罗马数字作为序号;如I、II、III 等;
i:表示使用小写罗马数字作为序号;如i、ii、iii 等;
1:表示使用阿拉伯数字作为序号;如1、2、3 等;
start属性:可表示列表的起始序号; -
<li>:定义列表项目,该标签可以包含多种子元素;如<li>三国演义</li>
-
<dl>:用于定义列表;该标签只能有<dt>,<dd>两种子标签;
-
<dt>:定义列表项的标题;
-
<dd>:定义普通列表项;
五、图片标签
-
<img>:
用于向网页中嵌入一张图片;请注意,从技术上讲<img> 标签并不会在网页中插入图像,而是从网页上链接图像。 -
<img> 标签有两个必需的属性：src和alt:
src:该属性指定显示图片文件所在位置;
alt:该属性指定一段文本,可用于当图片不能显示时显示的提示信息;
height:指定图片高度,可是像素值或百分比;
width:指定图片宽度,可是像素值或百分比;
将<a>和<img>标签一起使用可以做图片超链接;
六、表格标签
-
<table>:
用于定义表格,<table>可以有多个<tr>子标签 -
<table>常用的属性如下:
border:指定表格边框的宽度,默认是0;
cellpadding:指定单元格内容和单元格边框的间距,值可是像素或百分比;
cellspacing:指定单元格之间的间距,值可是像素或百分比;
width:指定表格的宽度,值可是像素或百分比; -
<tr>:
align: 设置行中的单元格内容的位置(left/center/right)
定义表格行,该标签只能有<td>或<th>子标签; -
<td>:
定义单元格,放在<tr>中,表示把一行分成N个单元格;(N取决于N对<td>); -
<td>常见属性如下:
colspan:指定该单元格跨多少列,属性值是数字; colum
rowspan:指定该单元格横跨的行数; row
height:指定单元格的高度;
width:指定单元格的宽度; -
<th>:定义表格页眉的单元格;用法和<td>标签一直,只是显示效果有差别;
七、表单标签
<form>:用于生成输入表单,该标签不可见;在HTML5之前,表单控件,如单行文本框,密码框,单选框等都必须放在<form></form>之间;常见属性如下:
action:必填属性,表示当点击”提交”按钮时,表单数据提交到哪个地址;
method:指定表单提交时的请求类型,该属性值有get或post,分别用于GET或POST请求,默认是get方式,开发建议使用post方式;
enctype:指定表单数据的编码方式,属性有3个值:
input标签
<input>:表单控件标签里功能最丰富的,用于接收用户输入的信息;
其中的type属性指定输入标签的类型。
单行文本框:type = text,输入的文本信息直接显示在框中;
密码输入框:type = password,输入的文本以圆点形式显示;
单选框:type = radio,如：性别选择;
复选框:type = checkbox,如：多个兴趣选择;
隐藏域:type = hidden, 在页面上不可见,但在提交的时候会一起提交数据,用于隐式向后台传输一个数据;
提交按钮:type = submit,用于提交表单中的数据内容;
重置按钮:type = reset,将表单中填写的内容均设置为初始值;
无动作按钮:type = button,可使用javascript为其自定义事件;
文件上传域:type = file,会生成一个文本框和一个浏览按钮;
图像域:type = image, 它可以替代submit按钮,即图像提交按钮。
<input>标签其他常见属性:
name:指定input标签的名字,没有设置name属性的标签不能提交数据;
value:指定input标签的初始值;
checked:设置单选框,复选框的初始状态是否选中;
disable:设置input标签加载时禁用此标签; 不能提交到
maxlength:文本框输入最大字符数,属性值是数字;
readonly:指定文本框内值不允许直接修改; 能被提交
select标签
下拉框标签，主要使用option标签作为字标签，<seclet>和<option>一般同时使用：
<select name="country" >
<option value="">---请选择---</option>
<option value="zh" selected="selected">中国</option>
<option value="en">英国---</option>
</select>
<select >常用属性：
multiple="multiple" 表示可以选中多个
size="2" 表示显示几个，（浏览器之间有差异）
<option>常用的属性
select=”selected”:默认选中哪个选项
textarea标签
文本域标签
<textarea cols="50" rows="5">
要显示的内容
</textarea>
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- form表单： 生成输入表单，用来和用户进行交互，收集用户输入的数据 的
属性：
action :设置数据提交的地址
method :提交的方式(常见的方式: get默认的方式和post )
enctype :对收集的数据进行的编码格式application/x-www-form-urlencoded (默认的编码格式)
-->
<form action="#" method="get" enctype="application/x-www-form-urlencoded">
<!-- input表单
单行文本框:type = text,输入的文本信息直接显示在框中;
密码输入框:type = password,输入的文本以圆点形式显示;
单选框:type = radio,如：性别选择;
复选框:type = checkbox,如：多个兴趣选择;
隐藏域:type = hidden, 在页面上不可见,但在提交的时候会一起提交数据,用于隐式向后台传输一个数据;
提交按钮:type = submit,用于提交表单中的数据内容;
重置按钮:type = reset,将表单中填写的内容均设置为初始值;
无动作按钮:type = button,可使用javascript为其自定义事件;
文件上传域:type = file,会生成一个文本框和一个浏览按钮;
图像域:type = image, 它可以替代submit按钮,即图像提交按钮。
-->
<!-- type：属性 ，提交的内容的类型 name：必须有name才能提交数据-->
姓名：<input type="text" name="username"/> <br/>
密码：<input type="password" name="password"/> <br/>
性别：<input type="radio" name = "sex" value = "1"/>男
<input type="radio" name="sex" value = "0" checked />女 <br/>
爱好：<input type="checkbox" name="hobby"/>java
<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>唱歌
<input type="checkbox" name="hobby" checked />跳舞 <br/>
隐藏域：<input type="hidden" name="id" value="1111"/> <br/>
<!-- disabled 不可修改 ,还不能提交 readonly 不能修改 -->
购物车数量<input type="text" value = "5" name="number" disabled> <br/>
数量<input type="text" name="phone" maxlength="11" readonly value="123"> <br/>
常住地：<select name="place" multiple="multiple" size="3">
<option value="gz">广州</option>
<option value="fz">福州</option>
<option value="hz">杭州</option>
<option value="sz" selected="selected">苏州</option>
<option value="zz">郑州</option>
</select>
<br/>
个人简介：<textarea rows="5" cls="10">
</textarea>
<br/>
<input type="submit" value = "注册" />
<input type="reset" value = "重置"/>
<input type="button" value = "按钮"/>
<input type="file" />
</form>
</body>
</html>
form表单示例
网友评论