本文详细讲解了网页的三大要素（HTML、CSS、JavaScript）、书写规范，包括标签使用和结构，以及表格、列表、链接、表单和框架的基础知识。重点介绍了HTML标签、CSS样式应用和JavaScript动态效果，适合初学者入门。
一、简介
二、网页三要素
网页的三个组成部分：
- HTML：页面上的内容
- CSS：对页面上内容的进行装饰
- JavaScript：页面的动态效果
三、书写规范
- HTML的标签是使用<>包围的关键字，例如：
- HTML标签通常是成对出现的，有开始就有结束，例如:
- HTML标签通常都有属性，多个属性使用空格隔开。例如：
- HTML标签不区分大小写，推荐小写。
四、结构标签
结构标签是网页结构组成
:表示页面的开始和结束
<head>:表示页面的头部，头部中的内容一般不会显示在页面，主要用来设置当前页面的属性。
<body>：表示页面的主体，页面上显示的内容。注意：
<head>标签和<body>标签是同级的
五、排版标签
注释标签：
<!--我是注释-->换行标签：
<br/>，自结束标签段落标签：
<p></p>，上下会空一行
- 属性：align（对齐方式）
- left、center、right
水平线标签：
<hr/>
- 属性
- width：水平线长度，像素或百分比表示
- size：水平线的粗细像素，例如：10px
- color：水平线颜色
- align：水平线对齐方式
六、标题标签
随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行。
| 标签 | 描述 |
|---|---|
| h1 | 1号标题，最大字号 |
| h2 | 2号标题 |
| h3 | 3号标题 |
| h4 | 4号标题 |
| h5 | 5号标题 |
| h6 | 6号标题，最小字号 |
七、块标签
- 使用DIV+CSS是现下流行的一种布局方式。
| 标签 | 描述 |
|---|---|
| div | 行级块标签，独占一行，换行 |
| span | 行内块标签，所有内容都在同一行 |
八、文字标签和文本格式化标签（基本被CSS样式替代）
- font标签处理网页中文字的显示方式。
| 属性 | 代码 | 描述 |
|---|---|---|
| size | <font size="7"></font> | 用于设置字体的大小，最小1号，最大7号 |
| color | <font color="#f00"></font> | 用于设置字体的颜色 |
| face | <font face="宋体"></font> | 用于设置字体的样式 |
- 格式化标签实现内容的简单样式处理
| 标签 | 描述 |
|---|---|
| b | 粗体标签 |
| strong | 加粗 |
| em | 强调字体 |
| sub | 下标标签 |
| sup | 上标标签 |
| del | 删除线 |
九、案例
按照效果图完成页面制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>望庐山瀑布</h1>
<b>作者：李白</b>
<hr>
<p>日照香炉生紫烟，</p>
<p>遥看瀑布挂前川。</p>
<p>飞流直下三千尺，</p>
<p>疑是银河落九天。</p>
<hr>
<h3>作者简介：</h3>
<p><font size="6" color = "red">李白</font>（701-762），字太白，号<b>青莲居士</b>，是屈原之后最具个性特色、最伟大的<font color="red">浪漫主义诗人</font>。
有“<font color="green">诗仙</font>”之美誉，与杜甫并称“李杜”。
其诗以抒情为主，表现出蔑视权贵的傲岸精神，对人民疾苦表示同情，又善于描绘自然景色，表达对祖国山河的热爱。</p>
<h3>创作背景：</h3>
<p>这首诗一般认为是<font color = "red">唐玄宗</font>开元十三年（725）前后李白出游金陵途中初游庐山时所作。</p>
<h3>创作背景：</h3>
这首诗，紧扣题目中的“<b>望</b>”字，以庐山的香炉峰入笔描写庐山瀑布之景，用“<font size = "6">挂</font>”字突出瀑布如珠帘垂空，<br/>
以高度夸张的艺术手法，把瀑布勾画的传神入画，然后细致的描写瀑布的具体景象，<br/>
将飞流直泻的瀑布描写的<font color = "green"><strong>雄伟奇画，气象万千，宛如一幅生动的山水画</strong></font>。<br/>
</body>
</html>
十、列表
10.1 有序列表
无序列表：使用一组无序的符号定义，标签为
<ul></ul>。
| 属性值 | 描述 | 用法举例 |
|---|---|---|
| circle | 空心圆 | <ul type="circle"></ul> |
| disc | 实心圆 | <ul type="disc"></ul> |
| square | 黑色方块 | <ul type="square"></ul> |
10.2 无序列表
有序列表：使用一组有序的符号定义，标签为
<ol></ol>。
| 属性值 | 描述 | 用法举例 |
|---|---|---|
| 1 | 数字类型 | <ol type="1"></ol> |
| A | 大写字母 | <ol type="A"></ol> |
| a | 小写字母 | <ol type="a"></ol> |
| I | 大写古罗马 | <ol type="I"></ol> |
| i | 小写古罗马 | <ol type="i"></ol> |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>第一行</li>
<ol>
<li>我是第一行的嵌套有序列表1</li>
<li>我是第一行的嵌套有序列表2</li>
</ol>
<li>第二行</li>
<ul>
<li>我是第二行的嵌套无序列表1</li>
<li>我是第二行的嵌套无序列表2</li>
</ul>
<li>第三行</li>
<li>第四行</li>
</ol>
<ul>
<li>我是无序列表1</li>
<ol>
<li>我是无序列表1嵌套的有序列表1</li>
<li>我是无序列表1嵌套的有序列表2</li>
<li>我是无序列表1嵌套的有序列表3</li>
</ol>
<li>我是无序列表2</li>
<li>我是无序列表3</li>
</ul>
</body>
</html>
十一、图片标签
在页面显示图片
<img>可以显示网络图片，也可以显示本地图片。
属性：
width：宽度，单位px，也可以设置百分比，但是该百分比是占据外部容器的百分比。height：高度，宽高一般只需要设置其中一个，会自适应宽高，如果两个都设置，可能会变形。**注意：**如果没有外部容器的情况下，直接把body当做外部容器，此时width设置百分比有效，高度设置百分比无效。
align：图文混排时对齐方式。默认文字在图片的下方bottom，也可以设置为top或centeralt：当图片无法显示时，会显示的描述文字。title：当图片无法显示时，会显示的描述文字；当图片显示时，鼠标移动到图片上，会显示的描述文字。hspace：图片左右留白。vspace：图片上下留白。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 页面显示图片 src="图片地址" -->
<!-- <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Rq5h9rKa8uBoUxtGTCCVRQHaKd?pid=ImgDet&rs=1"> -->
<!-- 显示项目中img目录中的指定图片 -->
<!-- <img src="img/1.jpg"> -->
<!-- 无法显示磁盘中的图片 -->
<!-- <img src="D:\study\java\java学习文档（自学时）\文档\JavaWeb\images\图片.png"> -->
<!-- 图文混排时可以排版图片后面的文字 -->
<img src="img/1.jpg" align = "center" width="200px">123
</body>
</html>
十二、链接标签
12.1 基本用法
使用
<a>来实现一个链接。通过该链接跳转到另一个页面。属性：
- href：链接地址，可以链接到外网，也可以链接到本地的一个地址。
- target：跳转时打开的方式
- _self:默认值，在当前窗口打开
- _blank：在新窗口打开
- _parent：在父级窗口打开
- _top：在顶层窗口打开
- 自定义：在自定义的窗口打开
<body>
<!-- 链接到百度网站 -->
<a href="https://www.baidu.com">百度</a><br/>
<!-- 链接到百度网站，点击后在新窗口打开百度 -->
<a href="https://www.baidu.com" target="_blank">百度在新窗口打开</a><br/>
<!-- 链接到百度网站 -->
<a href="1.html" target="_blank">链接本地的网页</a><br/>
<!-- 在窗口中打开一个子窗口，宽高为300px，窗口链接本地网页，不能链接外部网站 -->
<!-- 可以在子窗口页面中设置超链接在顶部或者父类窗口打开 target= "_top"-->
<iframe width = "300px" height="300px" src="1.html"></iframe>
</body>
12.2 锚点
打开某个页面的某个位置。
步骤：
- 通过name属性来定义一个位置
- 使用
href="#name"来跳转到对应的位置如果要跳转到某个页面的某个位置，可以使用
href="页面#name"
十三、表格标签
- 表格标签用来在页面中规则整齐显示数据
- 标签：
table：定义一个表格tr：定义行td：定义列th：定义列标题加粗显示
13.1 表格常用属性
| 属性名 | 代码 | 描述 |
|---|---|---|
| border | <table border="1"></table> | 设置表格边框 |
| width、height | <table width="300" height="200"></table> | 设置表格的宽度和高度 |
| align、valign | <tr align="center" valign="middle"> | 设置单元格的水平或垂直对齐 |
| bgcolor | <table bgcolor="red"> | 设置表格的背景颜色 |
颜色表示方式：
- 可以使用颜色的英语单词：red、green等
- 可以使用16进制表示颜色，如：“000000”、“FFFFFF”等
13.1.1 练习
<body>
<table border="1" width="400px" height = "300px" align="center">
<!-- 表格标题 -->
<caption><font color = "red" size = "5">三国人物表</font></caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>张三</td>
<td>18</td>
<td>000</td>
</tr>
<tr bgcolor="red">
<td>李四</td>
<td>50</td>
<td >111</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>222</td>
</tr>
</tbody>
</table>
</body>
13.2 列合并、行合并
- 列合并：cols
- 行合并：rows
13.2.1 练习
<body>
<table border="1" width = "400px" height = "300px">
<tr>
<!-- 使用colspan标签占3列 -->
<th colspan="3" bgcolor="red">课程表</th>
</tr>
<tbody align="center" bgcolor = "green">
<tr>
<th rowspan="2" bgcolor="red">周一</th>
<td>上午</td>
<td>语文</td>
</tr>
<tr>
<td>下午</td>
<td>数学</td>
</tr>
<tr>
<!-- 使用rowspan标签，指定占2行 -->
<th rowspan="2" bgcolor="red">周二</th>
<td>上午</td>
<td>语文</td>
</tr>
<tr>
<td>下午</td>
<td>数学</td>
</tr>
</tbody>
</table>
</body>
十四、表单标签
- 表单用于收集不同类型的用户输入数据
14.1 form常用属性
- form标签定义表单
| 属性名 | 代码 | 描述 |
|---|---|---|
| action | <form action = "服务器地址"></form> | 把表单的数据提交到该地址上处理 |
| method | <form method = "提交方式"></form> | get:不安全、post相对安全 |
| enctype | <form enctype = "提交类型"></form> | application/x-www-form-urlencoded 默认，普通表单 multipart/form-data 文件上传使用 |
14.2 表单元素
- input元素：不同type值呈现为不同状态。
注意:name属性必须，否则不能提交给服务器，value是提交的数据。
| 属性值 | 描述 | 代码 |
|---|---|---|
| text | 单行文本框 | |
| password | 密码框 | |
| radio | 单选按钮 | |
| checkbox | 复选框 | |
| submit | 提交按钮 | |
| button | 普通按钮 | |
| reset | 重置按钮 | |
| image | 图片提交按钮 | |
| file | 文件 | |
| hidden | 隐藏域 | |
| 邮箱 | ||
| number | 数值输入 | |
| range | 取值范围 | |
| color | 取色按钮 | |
| date | 日期框 | |
| time | 时间框 | |
| datetime | 日期和时间框 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 定义表单，action 提交给服务器 method 默认为get提交 -->
<form action="111" method="get">
<!-- 单行文本框 value 设置默认值 placeholder 提示 -->
<input type="text" name="username" value="zhangsan" placeholder="姓名"/><br>
<input type="password" name="userpassword" placeholder="密码"/><br>
<!-- 单选按钮 name名称设置一致视为任选按钮中的其一 checked 默认值-->
性别：<input type="radio" name = "agx" value="男" >男
<input type="radio" name = "agx" value="女" checked>女<br>
<!-- 复选框 需要将name名称设置一致视为整体 checked 默认值 -->
爱好：<input type="checkbox" name = "hobby" value="打游戏" checked>打游戏
<input type="checkbox" name = "hobby" value="追剧" checked>追剧
<input type="checkbox" name = "hobby" value="看书">看书<br>
<!-- 文件提交 -->
<input type="file" name = "file"><br>
<!-- 隐藏域提交就是用户提交时不会给用户看提交了什么 -->
<input type="hidden" name = "id" value="123">
<!-- 邮箱 用户输入邮箱时必须遵守一些格式，格式错误则无法提交表单 -->
<input type="email" name = "email" placeholder="邮箱"><br>
<!-- 数值输入，限定只能输入数字，无法输入字母特殊符号，但是也可以输入负数小数 -->
<input type="number" name = "age" placeholder="年龄"><br>
<!-- 取值范围 可以设置最大值和最小值 -->
<input type="range" name = "range" min = 0 max = 150><br>
<!-- 取色 -->
<input type="color" name = "color" placeholder="取色"><br>
<!-- 日期框 -->
<input type="date" name="date" placeholder="日期"><br>
<!-- 时间框 -->
<input type="time" name = "time" placeholder="时间框"><br>
<!-- 日期时间框 -->
<input type="datetime-local" name="datatime1" placeholder="日期时间本地"><br>
<!-- 下拉框，selected表示默认选项 -->
<select name="op">
<option value="1">老师</option>
<option value="2">学生</option>
<option value="3" selected>教授</option>
</select><br>
<!-- 文本区域 cols和rows为默认文本框长度 文本框可以拉大-->
<textarea name="desc" placeholder="自我介绍" cols="30" rows="10"></textarea>
<br>
<!-- 按钮 -->
<input type="submit" name = "submit" value="提交按钮">
<!-- 图片提交按钮，就是将按钮给个皮肤 -->
<input type="image" name = "image" value="图片提交按钮" src="img/1.jpg" width="50px">
<input type="reset" name = "reset" value="重置按钮">
<!-- 普通按钮可以与js一同使用，点击产生特殊事件 -->
<input type="button" name = "button" value="普通按钮" onclick="alert('Java很好学！！！')">
</form>
</body>
</html>
14.3 其他表单元素
- select:
- 下拉列表
- selected：默认选中
- textarea：
- 文本域
- cols：列数
- rows：行数
<!-- 下拉框，selected表示默认选项 -->
<select name="op">
<option value="1">老师</option>
<option value="2">学生</option>
<option value="3" selected>教授</option>
</select><br>
<!-- 文本区域 cols和rows为默认文本框长度 文本框可以拉大-->
<textarea name="desc" placeholder="自我介绍" cols="30" rows="10"></textarea>
14.4 案例
按照效果图完成页面制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="11" method="get">
<table>
<tr>
<td colspan="2" align = "center"><p><h1>用户注册</h1></p></td>
</tr>
<tr>
<th align = "right">用户名：</th>
<td><input type="text" name="username" placeholder="姓名"></td>
</tr>
<tr>
<th align = "right">密码：</th>
<td><input type="password" name="userpasswd"></td>
</tr>
<tr>
<th align = "right">确认密码：</th>
<td><input type="password" name="Confirmpasswd"></td>
</tr>
<tr>
<th align = "right">性别：</th>
<td><input type="radio" name="agx" value="男" checked>小哥哥
<input type="radio" name="agx" value="女">小姐姐</td>
</tr>
<tr>
<th align="right">爱好：</th>
<td>
<input type="checkbox" name="hobby" value="学习">学习
<input type="checkbox" name="hobby" value="编程">编程
<input type="checkbox" name="hobby" value="健身">健身
</td>
</tr>
<tr>
<th align="right">出生日期：</th>
<td>
<input type="date" name="dataLocal">
</td>
</tr>
<tr>
<th align="right">工资：</th>
<td>
<input type="text" name="wage">
</td>
</tr>
<tr>
<th align="right">学历：</th>
<td>
<select name="school">
<option value="大专" selected>大专</option>
<option value="本科">本科</option>
</select>
</td>
</tr>
<tr>
<th align="right">基本信息：</th>
<td>
<textarea name="information" cols="20" rows="2"></textarea>
</td>
</tr>
<tr>
<th></th>
<td>
<input type="submit" name ="submit" value="提交">
<input type="reset" name = "reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
十五、框架标签
- 框架
- 使用框架可以再同一个浏览器窗口中显示不止一个页面
- 每一份HTML文档称为一个框架，并且每一个框架都独立于其他的框架。
- frameset：
- rows/columns：规定每行或每列占据屏幕的面积
- frameborder：是否有框架边框
- frame：
- noresize = “noresize”：不能调整大小
现在常用iframe来替代以上标签，让其浏览器窗口设置不止一个页面。
<body>
我是一个页面<br/>
<!-- 可以指定页面的长宽，以及点击链接如何跳转（target属性），在哪里跳转（target属性） -->
<iframe src="表单案例.html" frameborder="1" width="300px" height="400px"></iframe>
</body>
十六、其他标签、特殊字符
- 其他标签
| 标签 | 描述 |
|---|---|
| meta | 定义网页元信息 |
| link | 链接样式表 |
| script | 定义JS代码 |
- 特殊字符
| 特殊字符 | 描述 |
|---|---|
| 空格 |
> | > |
< | < |
® | 注册符号 |
" | 双引号 |
¥ | 人民币 |
328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
