目录
HTML基本标签
基本标签 | 标签写法 | 标签作用 |
标题标签 | <h1>-<h6> | 是标明文章、作品等内容的简短语句。 |
段落标签 | <p> | 在网页中描述具有一个相对完整的内容 |
斜体标签 | <em> | 标签作用:实现的一种倾斜的字体样式 |
粗体标签 | <strong> | 实现的一种加粗的字体样式 |
水平线标签 | <hr/> | 在网页中加入平行线用来区分上下文 |
换行标签 | <br/> | 跳到下一个新行 |
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登鹳雀楼</title>
</head>
<body>
<!-- 诗 -->
<h1>登鹳雀楼</h1>
<hr/>
<p>白日依山尽,</p>
<p>黄河入海流。</p>
<em>欲穷千里目,</em>
<br/>
<strong>更上一层楼。</strong>
</body>
</html>
效果图
HTML注释
<!--注释内容--> |
方便代码的阅读,在代码调试中可以暂时注释掉一些不必要的代码,当浏览器遇到注释时会自动忽略注释内容 |
快捷方式:ctrl+/ |
特殊符号
键盘中无法输入的内容
页面中特殊含义的符号
页面中输入不间断空格
HTML中相冲突的符号如小于号(<)和大于号(>)
特殊符号 | 源代码 |
空格 | |
大于号 | > |
小于号 | < |
引号 | " |
注册商标 | ® |
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>学习 html 中的特殊符号</h1>
<h2>10>6 10<15 </h2>
<h2>"学习"</h2>
<h2>®学习</h2>
</body>
</html>
效果图
图像标签
<img src="图片" alt="替换文本" title=''提示内容'' width="x" height="y"/>
标签属性 | |
图片路径 | src 引用图片的路径 |
替换文本 | alt 在图片不能正常加载时候显示的提示语 |
提示内容 | title 鼠标划上去显示的内容 |
宽度高度 | width/height 设置图片的宽度和高度 |
路径
相对路径:不带有盘符,通常是以HTML网页文件为起点,通过层级关系描述目标图像的位置。
绝对路径:一般是指带有盘符的路径或完整网络地址。(不常用)
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./img/1.jpg" alt="" title="图片" height="600px" width="600px">
</body>
</html>
效果图
超链接
HTML 使用超级链接与网络上的另一个文档相连。点击链接可以从一个页面跳转到另一个页面
语法
<a href="链接地址" ></a>
其它属性:
target="目标窗口位置"
属性值:
_self:自身窗口
_blank:新建窗口
源代码:
<a href="./demo2.html" target="_blank">123</a>
列表标签
标签 | 属性 |
<ul></ul> | 无序列表。 |
<li></li> | 表示列表项。 |
<ol></ol> | 有序列表。 |
<dl></dl> | 自定义列表。 |
<dt></dt> | 列表标题。 |
<dd></dd> | 列表内容。 |
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 无序列表 -->
<ul type="disc">
<li>html</li>
<li>web</li>
<li>css</li>
<li>java</li>
<li>mysql</li>
</ul>
<!-- 有序列表 -->
<ol type="I">
<li>html</li>
<li>web</li>
<li>css</li>
<li>java</li>
<li>mysql</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>web前端</dt>
<dd>html</dd>
<dd>css</dd>
<dd>javascrript</dd>
<dd>wachat</dd>
</dl>
<dl>
<dt>后台服务器</dt>
<dd>java</dd>
<dd>php</dd>
<dd>c#</dd>
<dd>python</dd>
</dl>
<dl>
<dt>数据库</dt>
<dd>mysql</dd>
<dd>sql server</dd>
<dd>oracle</dd>
<dd>DB2</dd>
</dl>
</body>
</html>
效果图
HTML表格的基本语法
<table> 标签 | 定义表格 |
<tr> 标签 | 表格均有若干行组成使用tr定义 |
<td> 标签 | 每行被分割为若干单元格使用td定义 |
跨行跨列 | rowspan跨行colspan跨列 |
HTML表格的表头
<th> 标签:定义 HTML 表格中的表头单元格
HTML表格美化
borde | 设置边框 |
bgcolor | 设置背景颜色 |
align | 设置表格在网页中的对齐方式 |
cellspacing | 设置单元格与单元格之间的距离 |
cellpadding | 设置文字与单元格之间的距离 |
width/height | 表格的宽度/表格高度 |
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table cellspacing="0" border="1" bgcolor="green" align="center" height="500px" width="500px">
<tr>
<th>学号</th>
<th>姓名</th>
<th>班级</th>
<th>性别</th>
<th>学校</th>
</tr>
<tr bgcolor="rgb(255,234,123)">
<td rowspan="2" bgcolor="#dhr345">111</td>
<td colspan="2">111</td>
<td>111</td>
<td>111</td>
</tr>
<tr bgcolor="#D35230">
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td rowspan="2" colspan="2">444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
</table>
</body>
</html>
效果图
HTML表单
什么是表单?
表单在网页中主要负责数据采集,定义采集数据的范围
HTML表单的分类
1.文本域 | 2.按钮 | 3.单选框 | 4.复选框 | 5.选项菜单 |
HTML表单基本结构
<form method="post" action="xxx.html"></form>
发送表单数据的方式:标签属性:method常用值:get | post
<input type="submit" value="注册" >
<input type="button" value="按钮">
<input type="reset" value="取消">
<input type="file" name="files"><br>
<input type="image" src="../day6/img/电影封面/2.jpg"
height="50px" width="50px"><br>
向何处发送表单数据:标签属性:action
表单需求 | 属性值 | 作 用 |
文本输入 | text,password | text,表单中键入字母、数字等内容 password,输入密码字段。 |
文件选择 | file | file,定义了文件选择 |
按钮 | button | button,定义了普通按钮。 |
选择 | checkboxes,radio | checkboxes,表单复选框。 radio,表单单选框。 |
提交按钮 | submit,image | submit,定义了提交按钮。 image,定义了图片提交按钮 |
重置按钮 | reset | reset,定义了重置按钮。 |
表单元素属性
size属性 | 元素的宽度,当 type 为 text 或 password时。 |
maxlength | type为text 或 password 时,输入的最大字符数 |
checked | type为radio或checkbox时,指定按钮是否是被选中 |
源代码·:
账号:<input id="username" type="text" name="username"
size="20" maxlength="5" ><br/>
<input type="checkbox" name="aihao" value="wangqiu" checked>网球<br>
HTML下拉列表
<select> 标签
select 标签用于声明下拉列表
option 标签用于声明列表项
源代码:
所在城市:
<select name="province">
<option value="陕西">陕西省</option>
<option value="广东">广东省</option>
<option value="河北">河北省</option>
<option value="甘肃">甘肃省</option>
<option value="山东">山东省</option>
</select>
HTML多行文本域
<textarea rows="3" cols="20" maxlength="50" name="demo"></textarea>
标签属性:rows rows 属性规定 textarea 的可见高度。
标签属性:col cols 属性规定 textarea 的可见宽度。
标签属性:maxlength maxlength 属性规定文本区域的最大长度(以字符计)。
标签属性:name name 属性为文本区规定名称。
源代码:
<textarea cols="30" rows="10" name="text" maxlength="10000"></textarea>
练习源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="./demo1.html" method="get">
<input type="hidden" name="id" value="1111111" >
<label for="username">账号:</label> <input id="username" type="text" name="username" size="20" maxlength="5" ><br/>
<label for="pwd">密码:</label> <input id="pwd" type="password" name="pwd" ><br/>
<input type="submit" value="注册" >
<input type="button" value="按钮">
<input type="reset" value="取消">
<input type="file" name="files"><br>
<input type="image" src="../day6/img/电影封面/2.jpg" height="50px" width="50px"><br>
性别:<input type="radio" name="gender" value="nan" id="nan"> <label for="nan">男</label>
<input type="radio" name="gender" value="nv" id="nv"><label for="nv">女</label>
<input type="radio" name="gender" value="other" id="other"><label for="other">性别不限</label> <br>
爱好:<input type="checkbox" name="aihao" value="lanqiu">篮球
<input type="checkbox" name="aihao" value="zuqiu">足球
<input type="checkbox" name="aihao" value="yumaoqiu">羽毛球
<input type="checkbox" name="aihao" value="pingpangqiu">乒乓球
<input type="checkbox" name="aihao" value="wangqiu" checked>网球<br>
所在城市:
<select name="province">
<option value="陕西">陕西省</option>
<option value="广东">广东省</option>
<option value="河北">河北省</option>
<option value="甘肃">甘肃省</option>
<option value="山东">山东省</option>
</select>
<select name="city">
<option value="西安">西安市</option>
<option value="宝鸡">宝鸡市</option>
<option value="渭南">渭南市</option>
<option value="咸阳">咸阳市</option>
<option value="汉中">汉中市</option>
</select> <br>
<textarea cols="30" rows="10" name="text" maxlength="10000"></textarea>
</form>
</body>
</html>
HTML5补充标签
避免使用大量的<div>标签
元素 | 描述 |
HTML 信息。 | |
HTML 可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、 交互式组件,或者其他独立的内容项目。 | |
HTML 并且可以被单独的拆分出来而不会使整体受影响。 | |
HTML <footer> 元素表示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页 脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。 | |
HTML 可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等。 | |
HTML 展于文档的中心主题、应用的主要功能部分的内容组成。 | |
HTML 分的常见示例是菜单,目录和索引。 |
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<address>
联系人:***
联系电话:123456
</address>
<article>
<p>大段文章</p>
</article>
<aside>
<h1>与网页无关内容</h1>
</aside>
<footer>
<ul>
<li>网站底部</li>
</ul>
</footer>
<header>
<ul>
<li>网站顶部</li>
</ul>
</header>
<main>
<p>网站中部</p>
</main>
<nav>
<ul>
<li>导航</li>
</ul>
</nav>
</body>
</html>
效果图