一、HTML 介绍
1. 网页效果图
2. html 的定义
HTML 的全称为:HyperText Mark-up Language,指的是超文本标记语言。标记就是标签,<标签名称></标签名称>,例如:<html></html>、<h1></h1>等,标签大多是成对出现的。
超文本有两层含义:
(1)网页中的图片、视频、音频等内容(超越文本限制);
(2)在网页中跳转到另一个网页,与世界各地主机的网页链接(超链接文本)。
3. html 的作用
html 是用来开发网页的,它是开发网页的语言。
二、HTML 的基本结构
1. 结构代码
<!--文档声明,用来指定页面所使用的 html 版本,这里声明是一个 html5 的文档-->
<!DOCTYPE html>
<!--告诉浏览器,整个网页从<html>开始,到</html>结束-->
<html>
<!--定义文档的头部,负责对网页设置标题、编码格式以及引入 css 和 js 文件的-->
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<!--编写网页上显示的内容-->
<body>
网页显示内容
</body>
</html>
2. HTML 基本结构
3. 第一个 HTML 网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
</head>
<body>
第一个html
</body>
</html>
三、常用的 HTML 标签
<!-- html基本骨架生成:!+tab/enter -->
<!DOCTYPE html>
<!-- lang="en"(一般不需要指定)表示网页是英文网页,如果是英文网页,谷歌浏览器可能会转成中文进行翻译 -->
<html lang="en">
<head>
<!-- 网页的编码格式 -->
<meta charset="UTF-8">
<!-- 在移动端浏览网页,网页不缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 在ie浏览器浏览网页时,使用ie最高版本 -->
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Document</title>
</head>
<body>
<!-- 成对标签 -->
<h1>一级标题</h1>
<h6>六级标题</h6>
<div>div标签</div>
<p>段落标签</p>
<!-- 单标签 -->
<br>
<img src="imgs/logo.png" alt="图片加载不成功会显示">
<hr>
<!-- 给标签设置其他属性 -->
<a href="http://www.baidu.com">百度</a>
<!-- 标签不允许交替嵌套,但html要求不严格 -->
<!-- 标签可以使用大写,但推荐使用小写 -->
<P>段落2</P>
</body>
</html>
四、资源路径
绝对路径和相对路径部分略!
五、列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
</body>
</html>
六、表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- border-collapse: collapse; 合并边框 -->
<table style="border-collapse: collapse;">
<tr>
<th style="border: 1px black solid;">姓名</th>
<th style="border: 1px black solid;">年龄</th>
</tr>
<tr>
<td style="border: 1px black solid;">lb</td>
<td style="border: 1px black solid;">45</td>
</tr>
</table>
</body>
</html>
七、表单标签和表单元素标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<!-- label标签标识用户信息 -->
<p>
<label>用户名:</label>
<input type="text">
</p>
<p>
<label>密码:</label>
<input type="password">
</p>
<p>
<label>性别:</label>
<input type="radio">男
<input type="radio">女
</p>
<p>
<label>爱好:</label>
<input type="checkbox">吃喝
<input type="checkbox">学习
</p>
<p>
<label>图片:</label>
<input type="file">
</p>
<p>
<label>个人描述:</label>
<textarea></textarea>
</p>
<p>
<label>籍贯</label>
<select>
<option>北</option>
<option>上</option>
<option>深</option>
</select>
</p>
<p>
<!-- 提交按钮 -->
<input type="submit" value="提交">
<!-- 重置按钮 -->
<input type="reset" value="重置">
<!-- 普通按钮 -->
<input type="button" value="普通">
</p>
</form>
</body>
</html>
八、表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 默认是GET方式,请求方式不区分大小写 -->
<!--
get 以地址栏传参
post 以请求体传参
-->
<form action="https://www.baidu.com" method="GET">
<!-- label标签标识用户信息 -->
<p>
<label>用户名:</label>
<input type="text" name="username">
</p>
<p>
<label>密码:</label>
<input type="password" name="passwd">
</p>
<p>
<label>性别:</label>
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</p>
<p>
<label>爱好:</label>
<input type="checkbox" name="hobby" value="吃喝">吃喝
<input type="checkbox" name="hobby" value="学习">学习
</p>
<p>
<label>图片:</label>
<input type="file" name="file">
</p>
<p>
<label>个人描述:</label>
<textarea name="descript"></textarea>
</p>
<p>
<label>籍贯</label>
<select name="position">
<option value="北">北</option>
<option value="上">上</option>
<option value="深">深</option>
</select>
</p>
<p>
<!-- 提交按钮 -->
<input type="submit" value="提交">
<!-- 重置按钮 -->
<input type="reset" value="重置">
<!-- 普通按钮 -->
<input type="button" value="普通">
</p>
</form>
</body>
</html>