HTML超文本标记语言
HTML是用来开发网页的。(网页后缀 html,htm)html是标记语言不是编程语言。
标记:也叫做标签,这个是html里面的一个基本语法,所有的结构都是通过标记来控制的。
使用工具 notepad++
标记的语法
成对的标记,必须有开始标记<XX>
,必须有结束标记</XX>
。
单个的标记<XX/>
直接结束,XX是标记名。
不区分大小写 <Html></Html>
基本网页结构
<html>
<title>标题</title>
<head>头部<head>
<body>身体</body>
</html>
文档类型声明放在第一行
<!DOCTYPE html>
网页编码声明
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/
>
(支持中文的utf-8 ,gbk ,gb2312)
标签
<hn></hn>
n从1到6,逐渐变小。
水平线 <hr/>
换行 <br/>
预格式标签<pre></pre>
这个<pre>
会保留多余的空格和空行
标记的属性(可以有多个属性,不分先后顺序) <xxx name="value"></xxx>
<xxx name="value"/>
段落标签(分段落,自动换行,产生段落间距) <p alight="left,center right justify"></p>
字体标签 <font color="red" size="1~7" face="字体幼圆"></font>
短引用 <q>
自动添加双引号:
缩写 <abbr>
鼠标移到缩略词上会显示全称
加粗 <b></b> <strong></strong>
倾斜 <i></i> <em></em>
下标 <sub></sub>
上标 <sup></sup>
空格  
style,是用于改变元素样式的属性。
style的使用越来越广泛,可普遍用于多数元素中,取代了一些旧的属性,
<body bgcolor="#f1e2c3">today is a good day
</body>
<body style="background-color=#f1e2c3">today is a good day
</body>
图片显示
<img src="xx/xx/xx.jpg" align="right middle left" width = "xxxpx " height = "xxxpx " alt="解释" />
src后面接路径,有相对路径和绝对路径
align是针对于水平布局,valign是针对于垂直布局width,height可以使用百分比XX%,也可以直接表明像素;若仅规定一个,按规定值成比例显示
alt后面接的是描述性语句,当图片尚未加载或加载不出时显示
相对路径和绝对路径
path =…
当前路径./xx.jpg
上一级路径../xx.jpg
上上一级路径../../xx.jpg
(相对路径就是从当前路径寻找,当前路径指当前html文件所在路径)
下一级路径 xx/xx.jpg
path=“C:\Users\souke\Desktop\web01\01.jpg”
一般在项目中都使用相对路径
无序列表 type后面接样式如circle,square,默认实心圆点
<ul type="xxx">
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表 start表示起点数,默认1;亦可type=“xxx”使排序为字母或罗马数字“I”“i”
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
自定义列表
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>运动</dt>
<dd>打篮球</dd>
<dd>踢足球</dd>
</dl>
超级链接
<a href="http://www.baidu.com" target="xxxxx">百度一下</a>
<a href="web02.html" name="xxxxxx">百度</a>
链接可以是本机页面,也可以是任意的网页地址(内部链接或者外部链接)
target 属性规定在何处打开链接文档
name属性 定义锚名称,配合空链接跳转到锚点href="#锚名"
或者跳转到别的页面的锚点位置href="xxx.html#锚名"
空链接
href="#"
邮件链接
<a href="charlson_S@weixin.com">发送邮件</a>
文件下载
<a href="xxx.zip">下载</a> 浏览器会根据链接类型,决定是否下载
表格
<table border="1px" width="500px" height="400px" align="center" bgcolor="#f0f0f0"cellspacing="5px"cellpadding="60px">
<caption>标题</caption>
<tr height="320px" bgcolor="red" valign="top">
<td bgcolor="#f0e3d2">wo</td>
<td>wo</td>
</tr>
<tr>
<td>wo</td>
<td>wo</td>
</tr> <!-- table row, table data-->
caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上;
boder表示边框厚度;
cellspacing表示单元格之间的空间
cellpadding表示单元格与内容之间的内边距
跨行合并:rowspan 跨列合并:colspan
th 比td 多出来的效果:内容居中,加粗显示
<table border="1px"width="500px"height="200px"align="center"bgcolor="#a1b2c3">
<tr align="center" valign="middle">
<th rowspan="2">商品</th><th colspan="2">上月</th><th colspan="2">本月</th>
</tr>
<tr>
<th >销量</th><th>销售额</th><th>销量</th><th >销售额</th>
</tr>
<tr>
<th>手机</th><td>100</td><td>500</td><td>200</td><td>400</td>
</tr>
<tr>
<th>笔记本</th><td>200</td><td>450</td><td>45</td><td>700</td>
</tr>
<tr>
</tr>
</table>
表单标签 <form></form>
在表单标签里面可以包含各种其他标签:文本框,文本域,列表,单选框,多选框,按钮…一个或者多个来组成一个表单
input 可以做文本输入框,按钮,文件,单选按钮,复选按钮
<input type="" name="" />
text 文本
password 密码
file 文件
checkbox 多选按钮
radio 单选按钮
button 按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏
image 图片
<input type="text" />
text和password的其他属性
name 名字
maxlength 最大字符长度
value 默认值
placeholder 提示信息
单选框
<input type="radio" name="sex" value="man" checked />
<input type="radio" name="sex" value="woman"/>
复选框
<input type="checkbox" name="hobby" value="reading" checked />
按钮(普通按钮,提交按钮,重置按钮)
<input type="button" name="" value="普通按钮" />
<input type="submit" name="" value="" />
<input type="reset" name="" value="" />
图片提交按钮按钮
<input type="image" name="image_submit" src="xxx.jpg" />
下拉列表
<select name="city" size =" " mutiple>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
文本域
<textarea name="" placeholder="提示信息" rows="2" cols="34">
</textarea>
form表单属性:
action 提交路径
method get/post传送数据的方式
get直接把要传输的数据放在URL里面,适合传输少量数据,一般用于请求数据,明文传输
post把数据封装到http请求里面,适合传输大量数据和重要数据传输(登录,注册,发表文章)
框架
<frameset cols="25%,75%"> rows上下划分 cols 左右划分
<frame src="frame_a.htm"/>
<frame src="frame_b.htm" name="myname"/>
</frameset>
frame的name,可以作为超链接的target(目标)
注意:不能将 <body></body>
标签与 <frameset></frameset>
标签同时使用!