HTML
HTML概述:
HTML: Hyper Text Markup Language 超文本标记语言
超文本: 比普通文本功能更加强大,可以添加各种样式
标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行
HTML的主要作用:
设计网页的基础,HTML5
HTML语法规范
<!--
1. 上面是一个文档声明
2. 根标签 html
3. html文件主要包含两部分. 头部分和体部分
头部分 : 主要是用来放置一些页面信息
体部分 : 主要来放置我们的HTML页面内容
4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成
5. 标签不区分大小写, 官方建议使用小写
-->
h1~h6 标题大小
<hn></hn> 标题标签 加粗的字体标签 n越大字体越小 n取值（1~6）
b : 加粗
i : 斜体
s:中划线
u: 下划线
blink:<blink>闪烁</blink>
strong: 加粗, 带语义标签
em: 斜体, 带语义
<hr />:一条水平线
<hr color="yellow #00FFFF" width="100px"/>
<br />:换行
上标 2的四次方 2<sup>4</sup>
下标 水的分子式 H<sub>2</sub>O
商标注册：®<---> R+圆圈
© <---> C+圆圈
™ <--->小写的TM
" <---> 双引号
font:字体标签
<font color="" size="1~7 +N -N"></font> 字体标签 +N -N 在之前的基础上 增加/减小
center：居中标签
p:段落标签
HTML的块标签:
div标签: 默认占一行,自动换行
span标签: 内容显示在同一行
ul:无序列表 <ul type="circle"><li></li></ul>
ol:有序标签 <ol><li></li></ol>
ul属性type代表列表样式 ol的type="a"
列表标签:
无序列表: ul
type: 小圆圈(circle),小圆点(disc), 小方块(square)
有序列表: ol
type: 1,a ,A,I,
start : 指定是起始索引
img:图片标签 <img src="" /> src="寻求静态文件的位置"
img 标签:
常用的属性;
width : 宽度
height: 高度
src : 指定文件路径
alt: 图片加载失败时的提示内容
a标签：超链接 <a>提示信息</a>
1）不同网页 href 链接地址 target：
2）同网页 相同网页不同位置 可以设置 锚点 让超链接 相互跳转 <a name="锚点值">
a 超链接标签
常用的属性:
href: 指定要跳转去的链接地址
如果是网络地址需要加上http协议 ,
如果访问的是本网站的html文件,可以直接写文件路径
target : 以什么方式打开
_self: 默认打开方式,在当前窗口打开
_blank: 新起一个标签页打开页面
背景设置：bgcolor/background
&的代表： & + amp；
代表空格的:&nbsp;( );
代表小于：<
代表大于：>
相对路径:
./ 代表的是当前路径
../ 代表的上一级路径
../../ 代表的上上一级路径
用a标签设置锚点
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Demo04</title>
</head>
<body>
<img src="images\01.jpg" width="300px" align="top">一张图片</img>
<hr>
<a name="top">锚点:</a>
<a href="Demo01.html" target="_blank">
<img src="images\01.jpg" width="300px"/>
</a>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<a href="#top">回到顶部</a>
</body>
</html>
表格标签
HTML表格 table 组标签
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
table的属性
* border: 指定边框
* width : 宽度
* height : 高度
* bgcolor : 背景颜色
* align : 对齐方式
cellpadding 内边距 （内容和边框的距离）
cellspacing 外间距 （单元格之间的距离）
valign 属性：垂直 体积的html和文字组合的时候，三个取值 top center buttom
align 属性：水平 三个取值 left middle right
排列方式 在table上整体移动 tr 一行的内容和边框的位置 td 单个单元格
td标签
colspan: 跨列操作
rowspan: 跨行操作
表单标签
<!--
表单标签
action : 直接提交的地址
method :
get 方式 默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
post 方式 会将参数封装在请求体中, 没有这样的限制
input :
type: 指定输入项的类型
text : 文本
password : 密码框
radio : 单选按钮(checked默认被选中
checked取值可以为：checked/true/false
radio的name 值一致的时候 形成互斥)
checkbox : 复选框（checked 默认被选中
checked取值可以为：checked/true/false）
file : 上传文件
submit : 提交按钮
button : 普通按钮
reset : 重置按钮
hidden : 隐藏域
date : 日期类型
tel : 手机号
number : 只允许输入数字
placeholder : 指定默认的提示信息
name : 在表单提交的时候,当作参数的名称
id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
textarea : 文本域, 可以输入一段文本
cols : 指定宽度
rows : 指定的是高度
select : 下拉列表
option : 选择项（selected 默认被选中）
multiple="multiple" ：可多选（需按住ctrl或shift）
size="2" ：设置高度
-->
表单示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<center><h1>表单+表单元素</h1></center>
<form action="ok.html" method="get"><!--get:url传值 post服务跳转-->
<table border="1px" width="800px" cellspacing="0px" cellpadding="0px" align="center">
<tr>
<th width="150px">项目</th>
<th>内容</th>
</tr>
<!--文本输入框 input标签 type类型为 text的时候 -->
<tr height="35px">
<td align="right">姓 名</td>
<td><!--html 的通用属性 name id style-->
<input type="text" name="username" value="ABC" size="4" readonly/>
<input type="hidden" name="hiddeName" value="Naughty Cat"/><!--隐藏域-->
</td>
</tr>
<!--密码输入框 input标签 type类型为 password的时候 -->
<tr height="35px">
<td align="right">密 码</td>
<td>
<input type="password" name="userpass" />
</td>
</tr>
<!--单选框 input标签 type类型为 radio-->
<tr height="35px">
<td align="right">性 别</td>
<td><!--checked 默认被选中 checked取值可以为：checked/true/false
radio的name 值一致的时候 形成互斥-->
男:<input type="radio" name="sex" checked value="man"/>
女:<input type="radio" name="sex" value="woman" />
</td>
</tr>
<!--复选框 input标签 type类型为 checkbox-->
<tr height="35px">
<td align="right">爱 好</td>
<td><!--checked 默认被选中 checked取值可以为：checked/true/false-->
篮球:<input type="checkbox" name="hobby" value="lq"/>
足球:<input type="checkbox" name="hobby" checked value="zq"/>
乒乓球:<input type="checkbox" name="hobby" value="qqq"/>
</td>
</tr>
<!--下拉菜单 select标签-->
<tr height="35px">
<td align="right">住 址</td>
<td><!--selected 默认被选中 selected取值可以为：selected/true/false-->
<select name="address" size="5">
<option value="bj">--北京--</option>
<option selected value="sh">--上海--</option>
<option value="xa" selected>--西安--</option>
</select>
</td>
</tr>
<!--文本域 textarea -->
<tr height="35px">
<td align="right">备 注</td>
<td>
<textarea rows="7" cols="" name="more" value="abc">
</textarea>
</td>
</tr>
<!-- 按钮 -->
<tr height="35px">
<td align="center" colspan="2">
<input type="button" value="按 钮"/><!--普通按钮-->
<input type="submit" value="提 交"/><!--提交按钮-->
<input type="reset" value="清 除"/><!--表单元素回归最原始状态-->
</td>
</tr>
</table>
</form>
</body>
</html>
frameset框架
frameset框架：将浏览器分开，然后用不同的网页填充
frameset 切割网页 rows 上下切割 cols 左右切割
frame 填充 scrolling="no" 设置滚动条 空间不足显示整个页面 会出现可以拉动的滚动条
noresize 不可拖动 大小固定
切割的方式 rows/cols(rows="值1，值2，值3...,值n" 页面切割为了n份，每个值都是占据的像素
*剩余所有 )
<!--cols 横向切割 rows 纵向切割 scrolling滚动条 noresize是否可以拖动-->
<frameset cols="20%,20%,*" border="10px">
<frame src="demo01.html" scrolling="no" noresize/>
<frame src="demo01.html"/>
<frame src="demo01.html"/>
</frameset>
iframe: 在一个网页中呈现另外一个网页。
注意: 使用了frameset必须将body删掉,否则页面会有问题
frame
常用属性:
src: 引入的html文件路径
name: 指定框架的名称
frame示例
第二个页面被分为四部分，我们希望点击第一部分（第一个页面）的 #点我# 链接将信息显示在第四部分
在第二个页面的第四部分
frame中给起名 name=“show”;
然后将第一部分中点击链接的跳转target改为show(也就是这里代码中第一个页面的a标签)
点我
在show这个页面打开ok.html
第一个页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>test01</title>
</head>
<body>
<a href="ok.html" target="show">点我</a>
<div>
<iframe src="demo01.html"/>
</div>
</body>
</html>
第二个页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>framedemo02</title>
</head>
<frameset rows="20%,*">
<frame src="test01.html"/>
<frameset cols="15%,20%,*">
<frame src="demo01.html"/>
<frame src="demo01.html"/>
<frame src="demo01.html" name="show"/>
</frameset>
</frameset>
</html>
HBuilder常用快捷键
Ctrl + D 删除光标当前所在的行
Ctrl + Shift + R 复制当前行到下一行
Ctrl + Enter 将光标移动到下一行
Ctrl + Shift + Enter 将光标定位在上一行
Ctrl + Shift + / 注释当前行
Ctrl + R 运行当前网页/刷新当前网页
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
