HTML
HTML:Hypertext Markup Language 超文本标记语言
超文本:能够记录文字、标点符号,输入文本、图片、视频、音频和超链接等内容
标记(标签):将所有内容封装成标签,需要时使用对应标签
HTML用于编写网页,可以使用开发者模式(F12)查看源码。
特点:
(1)HTML文件名的扩展名为.html或.htm
(2)根标签是<html>,里面分为两个部分<head> , <body>
(3)标签名称不区分大小写,推荐小写
(4)大部分标签成对出现,这类标签必须有开始标签和结束标签
(5)HTML文档是树状结构
(6)HTML嵌套时需谨慎
HTML文件的编辑工具:
常用工具:Nodepad++,WebStorm,HBuilder
推荐工具:HBuilder
HTML常见标签
标题标签<h1></h1>...<h6></h6>
分割线标签:<hr/>
width---宽度 size---粗细 color---颜色
文字标签:<font>
size---字体大小 color---颜色
加粗标签:<strong></strong>,<b></b>
斜体标签:<em></em>,<i></i>
段落标签<p></p>
实体字符: < > " ©
:空格
<:<
>:>
":双引号
©:版权符号
注释标签:<!-- 注释内容 -->
HTML图片标签
img标签的语法格式:<img src=”图片路径” width=”” height=”” alt=”” title=””/>
src:设置路径:绝对路径和相对路径,推荐使用相对路径
相对路径:相对于当前文件寻找目标文件。
注意点:
1、同级直接找
2、内部/找
3、返回上一级../
width:宽度,如果只设置宽度不设置高度,那么高度会随着宽度等比变化
height:高度
alt:由于某种原因图片无法显示时的替代文本
title:鼠标悬浮在图片上时的提示文字
HTML列表标签
无序列表
<ul>用来定义无序列表
<li>用来定义列表项
type属性改变列表项前面的符号
属性值:disc(实心圆点),circle(空心圆),square(实心方块)
<ul type="circle">
<li>韩跳跳</li>
<li>李白</li>
<li>李元芳</li>
</ul>
有序列表
<ol>用来定义有序列表
<li>用来定义列表项
type属性设置列标签前面的字符:
属性值:1(阿拉伯数字),a(小写字母),A(大写字母),i(小写罗马数字),I(大写罗马数字)
<ol type="1">
<li>水果</li>
<li>动物</li>
<li>人物</li>
</ol>
HTML超链接标签
超链接标签主要用于HTML中页面间的跳转。
语法结构:<a href=”跳转的路径” target=””>点击的内容(图片,文本...)</a>
属性解析:
href:跳转路径,推荐使用相对路径
target:打开页面的方式,常用值:_blank,在新选项卡中打开;_self,在本选项卡打开
跳转方式:
1、网上资源:资源的完整域名
2、自己的资源:相对路径
3、回到顶部:#顶部的ID值-----<font id="1"></font>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="another.html" target="_blank">点击一下</a>
<a href="#1">回到顶部</a>
HTML表格标签
<table>标签用来定义表格
<tr>标签用来定义行,是<table>的子标签
<td>标签用来定义列(单元格),是<tr>的子标签
<th>标签:定义表头信息,是<tr>的子标签,写在<th>中的内容会自动居中加粗
<table>标签的常用属性:
width:表格宽度
height:表格高度
border:边框的粗细
cellpadding:表格边缘与内容之间的空白
cellspacing:单元格之间的空白
<tr>标签可以使用height来设置当前行高度,剩下的被剩余行均分
<td>标签可以是用width来设置当前列宽度,剩余的被剩余列均分
<table><tr><td>都可以使用的属性:
align:
针对table标签,设置整个表格相对于浏览器的对齐方式;
针对tr和td标签,设置标签中内容的对齐方式
取值:left,center,right
bgcolor:设置表格的背景颜色
<td>标签常用属性:
colspan:合并列
rowspan:合并行
HTML表单标签
HTML表单作用:收集用户输入的数据,并按照指定的方式发送到指定的位置,从而实现用户与Web服务器的交互。
<form>:在页面中创建出表单
属性解析:
action:数据提交的路径,通常是服务器地址
method:数据提交的方式,常用值:get,post
表单控件及按钮
1、输入标签:<input/>
该标签用于获取用户输入数据,通过type属性值的不同收集不同的信息。
type属性:
text:文本框
password:密码框
radio:单选按钮
checkbox:多选框
file:上传文件
hidden:隐藏框,在页面上但用户看不到
submit:提交按钮
reset:重置按钮
button:一般按钮
image:图形提交按钮
name属性:为当前组件提供一个名称,服务器会根据这个名称获取数据
value属性:设置当前组件的值
size属性:设置文本框长度大小
maxlength属性:设置最多输入数据的字符数
readonly属性:只读
disabled属性:设置组件是否可用
2、下拉列表<select>
name属性:当前下拉框的名字
<option>标签:<select>的子标签,下拉列表选项
value属性:设置当前列表项提交的数据
selected属性:设置默认选中项
3、文本域<textarea>
rows属性:设置文本域可见行数
cols属性:设置最大列数
<form action="" method="post">
账号:<input type="text" name="userName" value="请输入账号" size="10" maxlength="4" ><br />
密码:<input type="password" name="password" /><br />
性别:<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女<br />
爱好:<input type="checkbox" name="hobby" value="0"/>篮球
<input type="checkbox" name="hobby" value="1"/>排球
<input type="checkbox" name="hobby" value="2"/>足球<br />
头像:<input type="file" name="photo"/><br />
出生地:
<select name="pro">
<option value="sc">四川</option>
<option value="hn" selected="selected">湖南</option>
</select>省
<select name="city">
<option>成都</option>
<option>长沙</option>
</select>市<br />
自我介绍:<textarea rows="5" cols="100"></textarea><br />
<input type="submit" value="提交"/><br />
<input type="reset" value="重置" /><br />
<input type="button" value="注册"/><br />
<input type="image" src="img/李白.jpg" width="50"/>
</form>
表格表单的布局
<form>
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<b>表单布局-用户注册</b>
</td>
</tr>
<tr>
<td align="right" width="30%">用户名:</td>
<td>
<input type="txet" name="username" />
</td>
</tr>
<tr>
<td align="right" >密码:</td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
男<input type="radio" name="sex" value="1" />
女<input type="radio" name="sex" value="0"/>
</td>
</tr>
<tr>
<td align="right">手机号码:</td>
<td>
<input type="text" name="phone" />
</td>
</tr>
<tr>
<td align="right">爱好:</td>
<td>
爬山<input type="checkbox" name="hobby" value="0"/>
看书<input type="checkbox" name="hobby" value="1"/>
阅读<input type="checkbox" name="hobby" value="2"/>
</td>
</tr>
<tr>
<td align="right">自我介绍:</td>
<td>
<textarea rows="5" cols="20" name="introduce"></textarea>
</td>
</tr>
<tr>
<td align="right">
<input type="submit" value="提交信息"/>
</td>
<td></td>
</tr>
</table>
</form>
HTML框架标签
1、框架标签<frameset>
在本页面内用多个窗口将多个页面整合到一起。<frame>是<frameset>的子标签,用于将不同的页面整合进来。
<frameset>属性:
rows:确定行数
cols:确定列数
noresize:禁止调整大小
注意:<frameset>不能与<body>同时出现
<frame>属性:
src:指定页面路径
noresize:当前frame禁止调整大小
2、框架<frameset rows=”” cols=””><frame src=””/></frameset>
如下是frameset.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="20%,*">
<frame src="top.html" noresize="noresize"/>
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="right.html" name="right"/>
</frameset>
</frameset>
</html>
如下是left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<a href="Day01.html" target="right">第一天</a>
</p>
<p>
<a href="Day02.html" target="right">第二天</a>
</p>
<p>
<a href="Day03.html" target="right">第三天</a>
</p>
</body>
</html>
如下是top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 color="black" align="center">学习笔记</h1>
</body>
</html>
如下是right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>