目录
⚪概述
- HTML：超文本标记语言——决定页面上显示什么内容
- CSS：页面上的内容显示的风格
- JavaScript：页面特效
一、HTML介绍
- html语言是静态解释型语言，不是编译型语言，不区分大小写
- 浏览器是容错的
二、HTML中的基础标签
1.html页面中由一对标签组成：<html></html>
- <html>：开始标签
- </html>：结束标签
- title：网页的标题
- meat：设置编码的方式
- <br/>：表示换行。br标签是一个单标签
- 单标签：开始标签和结束标签是同一个，斜杠放在单词后面
- <p>：表示段落标签
<html>
<head>
<title>我的第一个网页</title>
<meta charset="GBK">
</head>
<body>
HELLO WORLD!<br/>你好，HTML！
<p>这里是第一个段落</p>
<p>这里是第二个段落</p>
</body>
</html>
2.img：表示图片标签
- ——src：图片文件的路径
- — —width&height：图片的大小
- ——alt：图片的提示
<img src="imgs/1.jpeg" width="72" height="72" alt/>
3.h1~h6：标题标签
<h1>amazing</h1>
<h2>amazing</h2>
<h3>amazing</h3>
<h4>amazing</h4>
<h5>amazing</h5>
<h6>amazing</h6>
4.列表标签：
①有序列表
武林高手排行榜：
<ol>
<li>张一</li>
<li>张二</li>
<li>张三</li>
<li>张四</li>
<li>张五</li>
<li>张六</li>
</ol>
武林高手排行榜：
<ol type="A">
<li>张一</li>
<li>张二</li>
<li>张三</li>
<li>张四</li>
<li>张五</li>
<li>张六</li>
</ol>
武林高手排行榜：
<ol type="A" start="3">
<li>张一</li>
<li>张二</li>
<li>张三</li>
<li>张四</li>
<li>张五</li>
<li>张六</li>
</ol> 
- ol：有序列表
- start：表示从*开始
- type显示的类型：A a I i 1
②无序列表
学生名单
<ul>
<li>张一</li>
<li>张二</li>
<li>张三</li>
<li>张四</li>
<li>张五</li>
<li>张六</li>
</ul>
<ul type="square">
<li>张一</li>
<li>张二</li>
<li>张三</li>
<li>张四</li>
<li>张五</li>
<li>张六</li>
</ul>
学生名单
<ul type="circle">
<li>张一</li>
<li>张二</li>
<li>张三</li>
<li>张四</li>
<li>张五</li>
<li>张六</li>
</ul>
- ul：无序列表
- type disc(default),circle,square...
5.加粗、斜体、下划线
你喜欢吃<b>甜</b>豆腐脑还是<i>闲</i><u>豆腐脑</u>？
- <b></b>：字体加粗
- <i></i> ：斜体
- <u></u>：下划线
- 标签内部可以嵌套其它的标签
6.html字符实体
水分子的化学式：H<sub>2</sub>O <br/>
12的平方：12<sup>2</sup>
5小于10：5<10 <br/>
10大于5：10>5 <br/>
5小于等于10：5≤10 <br/>
10大于等于5：10≥5 <br/>
注册商标：® <br/>
版权符号：© <br/>
7.超链接
<a href="http://www.baidu.com">百度一下，你就知道</a>
此时点击当前页面将跳转至百度页面
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>此时点击将重新打开一个页面前往百度页面
- a：表示超链接
- herf：表示连接的地址
- target：
- ——_self：（默认值）在本窗口打开
- ——_blank：在新窗口中打开
- ——_parent：在父窗口打开
- ——_top：在顶层窗口打开
8. div 层
<html>
<head>
<title>我的第二个网页</title>
<meta charset="GBK">
<style type="text/css">
div{
width:200px;
height:200px;
position:absolute;
}
#div1{
background-color:#ABC
}
#div2{
background-color:#CBA
left:100px;
top:100px;
}
#div3{
background-color:#ACB
left:200px;
top:200px;
}
#div4{
background-color:#CAB
left:400px;
top:400px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</body>
</html>9.HTML中的table标签
<html>
<head>
<title>表格标签</title>
<meta charset="GBK">
</head>
<body>
<table border="1" width="600" cellspacing="0" cellpadding="10">
<tr align="center">
<th>姓名</th>
<th>学号</th>
<th>班级</th>
<th>排名</th>
</tr>
<tr align="center">
<td>张三</td>
<td>001</td>
<td>2005</td>
<td>1</td>
</tr>
<tr align="center">
<td>李四</td>
<td>002</td>
<td>2005</td>
<td>10</td>
</tr>
</table>
<hr/>
</body>
</html>
- table：表格
- tr：行
- td：列
- th：表头列
🐟table中有如下属性（虽然已经淘汰）
-
width：表格的宽度
-
cellspacing：单元格间距
-
cellpadding：单元格填充
-
border：表格边框的粗细
-
<hr/>：分割线
🐟tr中有一个属性
align---->center(居中) , left , right
⚪练习
<table border="10" cellspacing="0" cellpadding="8" width="600">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr align="center">
<td>苹果</td>
<td rowspan="2">5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/th.jfif" width="20" height="20"></td>
</tr>
<tr align="center">
<td>菠萝</td>
<td>40</td>
<td>200</td>
<td><img src="imgs/th.jfif" width="20" height="20"></td>
</tr>
<tr align="center">
<td>香蕉</td>
<td>10</td>
<td>8</td>
<td>80</td>
<td><img src="imgs/th.jfif" width="20" height="20"></td>
</tr>
<tr align="center">
<td>总计</td>
<td colspan="4">380</td>
</tr>
- rowspan：行合并
- colspan：列合并
10.表单标签
<html>
<head>
<title>表单标签</title>
<meta charset="GBK">
</head>
<body>
<form action="demo04.html" method="post">
昵称：<input type="text" name="nickName" value="请输入你的昵称"/> <br/>
密码：<input type="password" name="pwd"/> <br/>
性别：<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女 <br/>
爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="badminton"/>羽毛球
<input type="checkbox" name="hobby" value="ping-pong"/>乒乓球<br/>
星座：<select name="star">
<option value="1">白羊座 Aries 3月21日～4月19日</option>
<option value="2">金牛座 Taurus 4月20日～5月20日</option>
<option value="3">双子座 Gemini 5月21日～6月21日</option>
<option value="4">巨蟹座 Cancer 6月22日～7月22日</option>
<option value="4">狮子座 Leo 7月23日～8月22日</option>
<option value="6">处女座 Virgo 8月23日～9月22日</option>
<option value="7">天秤座 Libra 9月23日～10月23日</option>
<option value="8">天蝎座 Scorpio 10月24日～11月22日</option>
<option value="9">射手座 Sagittarius 11月23日～12月21日</option>
<option value="10">摩羯座 Capricorn 12月22日～1月19日</option>
<option value="11">水瓶座 Aquarius 1月20日～2月18日</option>
<option value="12">双鱼座 Pisces 2月19日～3月20日</option>
</select><br/>
备注：<textarea name="remark" rows="4" cols="50"></textarea> <br/>
<input type="submit" value="注 册"/>
<input type="reset" value="重 置"/>
<input type="button" value="这是一个普通的按钮"/>
<form>
</body>
</html>
<!--
1.input type="text"表示文本框，其中name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
2.input type="password"表示密码框
3.input type="radio"表示单选按钮。需要注意的是，name属性值保持一致，这样才会有互斥的效果
4.checked：默认选中
5.input type="chechbox"表示复选框。name属性值建议保持一致，这样将来服务器端获取值的时候获取的是一个数组
6.select：表示下拉列表。每一个选项是option，其中value属性是发送给服务器的值，selected表示默认选中的项
7.textarea表示多行文本框(或者称之为文本域)，它的value值就是开始结束标签之间的内容
8.input type="submit"表示提交按钮
9.input type="reset"表示重置按钮
10.input type="button"表示普通按钮
-->
<!--
demo 04代码
-->
<html>
<head>
<title>表单标签</title>
<meta charset="GBK">
</head>
<body>
<h1><font color="red">注册成功</font></h1>
</body>
</html>
- input type="text"表示文本框，其中name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
- input type="password"表示密码框
- input type="radio"表示单选按钮。需要注意的是，name属性值保持一致，这样才会有互斥的效果
- checked：默认选中
- input type="chechbox"表示复选框。name属性值建议保持一致，这样将来服务器端获取值的时候获取的是一个数组
- select：表示下拉列表。每一个选项是option，其中value属性是发送给服务器的值，selected表示默认选中的项
- textarea表示多行文本框(或者称之为文本域)，它的value值就是开始结束标签之间的内容
- input type="submit"表示提交按钮
- input type="reset"表示重置按钮
- input type="button"表示普通按钮
填入信息后点击注册：
11. frameset、iframe
①frameset
- 表示页面框架，该标签已经被淘汰，需了解
- frame表示框架中的具体引用
<html>
<head>
</head>
<frameset rows="20%,*">
<frame src="frames/top.html"/> <!-- frameborder="no"去除边框-->
<frameset cols="15%,*">
<frame src="frames/left.html"/>
<frameset rows="80%,*"/>
<frame src="frames/main.html"/>
<frame src="frames/bottom.html"/>
</frameset>
</frameset>
</frameset>
</html>
② iframe
在一个页面嵌入一个子页面
<html>
<head></head>
<body>
这里是demo06的内容
<iframe src="frames/top.html">
</body>
</html>
⚪相对路径&绝对路径
- 相对路径：相对于当前的文件某一个资源的位置
- 绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
扫一扫
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
