HTML
工具：
HBuilder
常用快捷键
| 按键 | 功能 |
|---|---|
| ctrl+D | 删除光标当前所在的行 |
| ctrl+ Shift+R | 复制当前行到下一行 |
| Ctrl+Enter | 将光标移动到下一行 |
| Ctrl+Shift+Enter | 将光标定位在上一行 |
| Ctrl+Shift+/ | 注释当前行 |
| Ctrl+R | 运行当前网页/刷新当前网页 |
| Tab | 整体向右缩进 |
| Shift+Tab | 整体向左缩进 |
| Shift+/ | 添加单行注释 |
HelloWorld!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
HelloWorld!
</body>
</html>
Html基本标签
| Coding | Fnnction |
|---|---|
| <br / > | 换行符 |
| <hr / > | 分割线 |
| < b> | 加粗 |
| < i> | 斜体 |
| < strong > | 加粗 |
| < em> | 斜体 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>Title1</h1>
<h2>Title2</h2>
<h3>Title3</h3>
<h4>Title4</h4>
<!--
作者：offline
时间：2018-11-15
描述：水平分割线
-->
<hr />
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<hr />
<!--
作者：offline
时间：2018-11-15
描述：font 属性
color
size: 1- 7
-->
Hello<font color="red" size="1">World!</font><br />
Hello<font color="red" size="2">World!</font><br />
Hello<font color="red" size="3">World!</font><br />
Hello<font color="red" size="4" face="宋体">World!</font><br />
</body>
</html>
| font属性 | 意义 |
|---|---|
| size | 1-7 |
| face | 字体 |
| color | 颜色 |
简单网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页信息</title>
</head>
<body>
<h3>新版黄鹤楼</h3>
<hr />
<p>故人西辞<font size="3" color="red">富士康</font>，
</p>
<p>
为学技术来<b><i>蓝翔</i></b>。
</p>
<p>
<strong>蓝翔</strong>毕业包分配，
</p>
<p>
尼玛还是<em>富士康</em>。
</p>
</body>
</html>
网页图片
| img属性 | function |
|---|---|
| src | 图片路径 |
| width | 图片长(单位:px) |
| height | 图片高(单位: px) |
| alt | 图片加载不出来显示 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者：offline
时间：2018-11-15
描述：img :常见属性
src:图片路径
width:图片宽度 单位（px)
height:图片高度
alt:图片加载有问题使显示
-->
<img src="../picture/timg.jpg" width="500px" height="300px" alt="这张图片有问题"/>
</body>
</html>
路径问题
| 路径 | 意义 |
|---|---|
| ./ | 当前路径 |
| …/ | 上一级路径 |
| …/…/ | 上上级路径 |
网页链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者：offline
时间：2018-11-15
描述：无序列表
ul
li
type:circle,black point ,square
-->
<ul type="circle">
<li>百度</li>
<li>优快云</li>
<li>虎牙</li>
</ul>
<hr />
<!--
作者：offline
时间：2018-11-15
描述：有序列表
ol
li
type:1,a,A,i
start: 2指定开始的大小
-->
<ol type="A">
<li><a href="http://www.baidu.com">百度<</a>/li>
<li><a href="http://www.youkuaiyun.com">优快云</a></li>
<li><a href="http://www.huya.com">虎牙</a></li>
</ol>
<!--
作者：offline
时间：2018-11-15
描述：网址连接
a
href：url
target:_self,_blank(新标签)
-->
<ol type="A">
<li><a href="http://www.baidu.com" target="_blank">百度<</a>/li>
<li><a href="http://www.youkuaiyun.com" target="_self">优快云</a></li>
<li><a href="http://www.huya.com">虎牙</a></li>
</ol>
</body>
</html>
表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者：offline
时间：2018-11-15
描述：table
tr(行）标签
td(列) 标签
常用属性：
border:边框
width； 宽
height: 高
bgcolor: 背景色
align:对齐方式
-->
<table border="1px" width="400px" bgcolor="yellow" align="center">
<tr bgcolor="red" align="center">
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td bgcolor="white" align="center">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>
表格合并及嵌套
colspan：跨列
rowspan: 跨行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" width="400px" align="center">
<!--
作者：offline
时间：2018-11-15
描述：表格的合并：
colspan: 跨列
rowspan: 跨行
-->
<tr>
<td colspan="2" align="center">11</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2">
<table border="" width="100%">
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td rowspan="2">44</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
</tr>
</table>
</body>
</html>
注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者：offline
时间：2018-11-15
描述：form 表单标签
提交的东西，包住提交的东西
属性:
action:提交的地址
method:提交的方式
get:
post
-->
<form action="../Demo1.html" method="get">
<input type="hidden" value="faljfajf" name="id" />
用户名称：<input type="text" name="username"/><br />
用户密码：<input type="password" /><br />
确认密码：<input type="password" /><br />
邮箱：<input type="text" /><br />
手机号码：<input type="text" /><br />
帅照：<input type="file" /><br />
<!--
作者：offline
时间：2018-11-15
描述：单选的话，给他们取一个相同的名字
-->
性别：<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
<input type="radio" name="sex"/>妖<br />
爱好：<input type="checkbox" />LoL
<input type="checkbox" />抽烟
<input type="checkbox" />喝酒
<input type="checkbox" />泡妞<br />
择偶要求:
<textarea cols="10" rows="2"></textarea><br />
籍贯:
<select>
<option>---请选择---</option>
<option>---山西---</option>
<option>---山东---</option>
<option>---陕西---</option>
</select>
<br />
<!--
作者：offline
时间：2018-11-15
描述：提交
-->
<input type="submit" value="完事了" />
<input type="button" value="普通按钮" />
<input type="reset" value="重置按钮" />
</form>
</body>
</html>
界面划分
Frame
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
作者：offline
时间：2018-11-16
描述：如果使用frameset需要把body删掉
-->
<!-- <frameset cols="10%,30%,*">
<frame src="aaa.html"/>
<frame src="bbb.html"/>
<frame src="ccc.html"/>
</frameset>-->
<!--<frameset rows="15%,30%,*">
<frame src="aaa.html" />
<frame src="bbb.html" />
<frame src="ccc.html" />
</frameset>-->
<frameset rows="15%,*">
<frame src="aaa.html" />
<frameset cols="15%,*">
<frame src="bbb.html" />
<frame src="ccc.html" name="rightFrame"/>
</frameset>
</frameset>
</html>
aaa.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body background="../picture/timg.jpg">
aaa
</body>
</html>
bbb.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="purple">
<a href="date.html" target="rightFrame">1.收件箱</a><br />
<a href="#">2.发件箱</a><br />
<a href="#">3.垃圾箱</a><br />
</body>
</html>
ccc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="yellow">
ccc
</body>
</html>
date.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="white">
helloworld
</body>
</html>
CSS
div标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者：offline
时间：2018-11-16
描述：div:默认占一行，自动换行
-->
<div >
张三
</div>
<div >
赵四
</div>
</body>
</html>
span标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者：offline
时间：2018-11-16
描述：span：内容显示在同一行
-->
<span>王五</span>
<span>赵六</span>
</body>
</html>
选择器入门
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<!--将字体设置为红色
-->
<div>Hello World!</div>
<div>Hello World!</div>
<div>Hello World!</div>
<div>Hello World!</div>
</body>
</html>
元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<span>Hello World!</span>
<span>Hello World!</span>
<span>Hello World!</span>
<span>Hello World!</span>
</body>
</html>
ID选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
作者：offline
时间：2018-11-16
描述：ID必须是唯一的
-->
<style>
#div1{
color: red;
}
</style>
</head>
<body>
<div id="div1">Hello World!</div>
<div>Demo!</div>
<div>New Class!</div>
</body>
</html>
类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.fruit{
color: red;
}
.vegetable{
color: yellow;
}
</style>
</head>
<body>
<!--
作者：offline
时间：2018-11-16
描述：水果类为红色
蔬菜类为黄色
-->
<div class="vegetable">黄瓜</div>
<div class="fruit">苹果</div>
<div class="vegetable">茄子</div>
<div class="fruit">香蕉</div>
</body>
</html>
引入方式
外部引入
作用是更方便修改
style.css
.fruit{
color: red;
}
.vegetable{
color: yellow;
}
.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
作者：offline
时间：2018-11-16
描述：选择的时候选择link:css
-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="vegetable">黄瓜</div>
<div class="fruit">苹果</div>
<div class="vegetable">茄子</div>
<div class="fruit">香蕉</div>
</body>
</html>
内部引入
其实就是上面所说的几种选择器
行内引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="vegetable" style="color: red;">东瓜</div>
<div class="fruit">柚子</div>
<div class="vegetable">茄子</div>
<div class="fruit">香蕉</div>
</body>
</html>
浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者：offline
时间：2018-11-16
描述： float属性：浮动：浮动的元素会脱离正常的文档流，
在正常的文档流中不占空间
left:
right
流式布局
clear属性：
both:两边都不准浮动
right:右边不准浮动
left:左边不准浮动
-->
<!--<div style="float: left;width: 200px;height: 200px;background-color: red;"></div>
<div style="float: left;width: 200px;height: 200px;background-color: green;"></div>
<div style="float: left;width: 200px;height: 200px;background-color: blue;"></div>
<div style="float: left;width: 200px;height: 200px;background-color: red;"></div>
<div style="float: left;width: 200px;height: 200px;background-color: green;"></div>
<div style="float: left;width: 200px;height: 200px;background-color: blue;"></div>
-->
<!--
作者：offline
时间：2018-11-16
描述：理解一下浮动：
-->
<!-- <div style="float: left;width: 200px;height: 200px;background-color: green;"></div>
<div style="width: 250px;height: 200px;background-color: red;"></div>
<div style="width: 200px;height: 200px;background-color: black;"></div>-->
<!--
作者：offline
时间：2018-11-16
描述：右边浮动
-->
<!-- <div style="float: right;width: 200px;height: 200px;background-color: green;"></div>
<div style="width: 250px;height: 200px;background-color: red;"></div>
<div style="width: 200px;height: 200px;background-color: black;"></div>-->
<!--
作者：offline
时间：2018-11-16
描述：clear
不准浮动
-->
<div style="float: left;width: 200px;height: 200px;background-color: green;"></div>
<div style="clear: both;"></div>
<div style="width: 250px;height: 200px;background-color: red;"></div>
<div style="width: 200px;height: 200px;background-color: black;"></div>
</body>
</html>
简单实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.logo{
width: 33%;
height: 50px;
border: 1px, solid;
float: left;
align-self: center;
}
.menu{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<!--
第一部分：LOGO
第二部分：导航
第三部分：商品/浮动
第四部分：广告
-->
<div>
<!--LOGO-->
<div>
<div class="logo" style="background-color: pink;">DenmD_</div>
<div class="logo" style="background-color: plum;">Hello World!</div>
<div class="logo" style="background-color: lightseagreen;">
<a href="#">登陆</a>
<a href="#">注册</a>
<a href="#">客服</a>
</div>
</div>
<!--取消浮动
-->
<div style="clear: both;"></div>
<!--导航-->
<div style="background-color: black;height: 50px;">
<a href="#" class="menu">首页</a>
<a href="#" class="menu">LoL</a>
<a href="#" class="menu">QQ飞车</a>
<a href="#" class="menu">DNF</a>
<a href="#" class="menu">王者荣耀</a>
</div>
<!--轮播图-->
<div style="height: 100px;">
<img src="timg.jpg" width="100%" />
<!--浮动图-->
<div>
<div style="height: 50px;">
<h3>Welcome to here</h3>
</div>
<div style="float: left;width: 15%;">
<img src="timg1.jpg" width="100%"/>
</div>
<div style="float: left;width: 70%;">
<img src="timg2.jpg" width="100%"/>
</div>
</div>
</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
