HTML
一 HTML概述
超文本标记语言（Hyper Text Markup Language）
作用：搭建基础网页
超文本：具有普通文本的特性，同时还可以加入图片、视频、超链接等等。
标记：即标签，与定义好的标签有不同的功能和效果；例如：
语言：人与计算机沟通桥梁
现在学习使用html5版本，这哥们是由W3C组织（万维网联盟）制定统一标准。
二 HTML基础【掌握】
2.1 快速入门
编写人生中第一个html网页
① 文本工具
<html>
<head>
<!-- 当前页面的描述信息，给浏览器看的 -->
<meta charset="UTF-8" />
<title>人生的第一个网页</title>
</head>
<body>
<!--当前页面的主体内容，给用户看的-->
hello，world
</body>
</html>
② idea工具
从今天开始，需要创建一个新的工作空间（空工程）
- jdk版本必须是1.8
- 字符集UTF-8
创建前端 static web（模块）
标准前端工程结构
|-- 项目名
|- css 目录
|- js 目录
|- img 目录
index.html
<!DOCTYPE html> <!--文档声明，声明当前html版本为5，固定格式-->
<html lang="zh-CN"> <!--表示当前网页语言 en 英语 zh-CN 简体中文 -->
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
你好，传智播客
</body>
</html>
2.2 书写规范
1. 文档声明
要求：必须在第一行，固定格式
2. 标签
要求：正确嵌套，正确闭合
双标签
<开始></结束>
单标签
<开始/>
3. 属性
要求：必须在开始标签中编写，属性值单双引都可
<开始 属性名="属性值"></结束>
4. 文本
要求：在标签体内编写
5. 注释
<!-- 注释内容 -->
三 HTML常用标签【记忆】
3.1 标签语义
学习标签是有技巧的，重点记住标签的语义，简单的理解为：这个标签能干啥
3.2 标题标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>01-标题</title>
</head>
<body>
<!--
标题：
<hn></hn>
n表示取值范围：1~6
特点：数值越大 字体越小
常用属性：
align：对齐方式
取值：left（左）、center（中）、right（右）
-->
<h1 align="center">我是h1标题</h1>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>
</body>
</html>
3.3 水平线标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>02-水平线</title>
</head>
<body>
<!--
水平线:<hr/>
常用属性：
color：颜色
1.英语单词，例如：红色 red
2.光三原色，R（0~255）G（0~255）B（0~255），通过代码6位十六进制数标识 #ff ff ff
width：宽度
1.像素 px 固定值
2.百分比 % ，屏幕自适应
-->
<hr color="#382728" width="500px">
<hr color="#382728" width="50%">
</body>
</html>
3.4 段落和换行标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>03-段落和换行</title>
</head>
<body>
<!--
换行：<br/>
段落：<p></p>
特点：上下留白
-->
<p>
传智专修学院是一所为互联网、人工智能、工业4.0培养高精尖科技人才的应用型大学。学校经江苏省宿迁市教育局批准，由江苏传智播客教育科技股份有限公司投资创办。<br>
</p>
<p>
当今世界已进入人工智能、机器人时代，人工智能、机器人已成为未来30年、甚至50年科技革命最重要的发展方向。世界各国越来越重视，我国政府也高度关注人工智能的发展，无论是党的十八大、十九大，还是2017、2018、2019的政府工作报告，均提出要重点发展人工智能、机器人，并提升到国家战略层面。
<br>
</p>
<p>
技术发展首要是人才，而我国这方面人才非常紧缺。根据国家相关部门测算，目前我国人工智能人才的缺口就已经超过了500万，国内的供求比例仅为1:10，供需比例严重失衡。并且随着社会信息革命的进一步深入，相应人才的缺口会越来越大。但在这些新技术面前，目前我国关于这方面人才的规模化培养，无论是高校还是科研机构，均没有成熟的培养体系和方案，都还处于摸索阶段。<br>
</p>
</body>
</html>
3.5 超链接标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>04-超链接</title>
</head>
<body>
<!--
超链接：<a></a>
常用属性：
href：页面跳转地址
1.绝对地址（外部资源）
http://www.itcast.cn
2.相对地址（内部资源）
./（省略） 当前目录
../ 上级目录
../../ 上上级
target：打开方式
_self（默认值）：当前窗口跳转
_blank：打开新窗口
-->
<a href="http://www.itcast.cn">绝对地址_传智官网</a> <br>
<a href="./01-标题.html">相对地址_标题</a> <br>
<a href="02-水平线.html">相对地址_水平线</a> <br>
<!--
如果页面出现404 问题，一定是 路径写错了 检查 a标签
-->
<a href="../index.html">相对地址_默认访问页</a> <br>
<a href="./下级/测试页面.html">测试页面</a> <br>
<a href="https://www.douyu.com/" target="_blank">打开斗鱼，新窗口方式</a>
</body>
</html>
3.6 图像标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>05-图像</title>
</head>
<body>
<!--
图像：<img/>
常用属性：
src：图片资源地址
相对地址
绝对地址
alt：图片资源丢失后，文字提示
width：图片宽度，特点：纵横比缩放
1.px像素固定值
2.%百分比
height：高度
-->
<img src="../img/cj.jpg" alt="" width="400px">
<img src="../img/slol.jpg" alt="听帅哥课不写代码，排位10连败...">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586065394921&di=1aee13ca0a97eb524c6ad6867baee602&imgtype=0&src=http%3A%2F%2Fimg.3gcdn.cn%2Fent%2F2014%2F5%2F6%2F143353752_419_246_480.jpg" alt="">
</body>
</html>
3.7 列表标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>06-列表</title>
</head>
<body>
<!--
有序列表：<ol></ol>
无序列表：<ul></ul>
共同的子标签：<li></li>
-->
<ol>
<li>提莫</li>
<li>剑圣</li>
<li>拉克丝</li>
</ol>
<ul>
<li>java</li>
<li>php</li>
<li>python</li>
</ul>
</body>
</html>
3.8 div和span标签
- 没有语义的，他们就是一个盒子，用来装内容，前端有一句话万物皆盒子
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>07-容器标签</title>
</head>
<body>
<!--
<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的，通常结合css样式实现网页布局...
div（块级元素）：是一个大盒子，特点：独自占用一行
span（行内元素）：是一个小盒子，特点：内容有多大就占用多大
-->
<div>我是国民老公，我爱吃热狗...</div>
<span>班长</span>
<span>如花</span>
</body>
</html>
3.9 转义（实体）字符
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>08-实体字符</title>
</head>
<body>
<!--
在html中有两种特殊的转义符号
1.与html语法有冲突 例如 a<b>c 小于号 <
2.输入法不方便输入 例如 ♥ ♥
常用的实体字符(了解)
-->
  爱传智，爱学生.... <br>
半个英语字母英文空格
一个汉字中文空格  
小于号 <
大于号 >
&符号 &
</body>
</html>
3.10 基本表格
- 有条理性的展示数据内容
案例效果图…
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>09-基本表格</title>
</head>
<body>
<!--
table -- 表格
tr -- 行
td -- 普通单元格
th -- 列标题单元格（居中，加粗）
table常用属性
border：边框
width:宽度
height:高度
align：表格对齐方式
取值：left、center、right
cellspacing：单元格外边距，通常取值：0
cellpadding：单元格内边距，通常取值：0
bgcolor：表格背景色
tr常用属性
bgcolor：表格背景色
align:内容对齐方式
height:行高
td常用属性
bgcolor：表格背景色
align:内容对齐方式
-->
<!--三行三列表格-->
<table border="1" width="300px" align="center" cellspacing="0" cellpadding="0" bgcolor="#dbecb4">
<tr bgcolor="red" height="50">
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td bgcolor="#ffc0cb" align="center">8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
3.11 合并表格
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>10-表格合并</title>
</head>
<body>
<!--
跨行合并：rowspan="合并行数"
夸列合并：colspan="合并列数"
-->
<table width="300px" height="200px" align="center" border="1" cellpadding="0" cellspacing="0" >
<tr>
<td>1-1</td>
<td colspan="2">1-2</td>
<!--<td>1-3</td>-->
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!-- <td>3-1</td>-->
<td>3-1</td>
<td>3-3</td>
</tr>
</table>
</table>
</body>
</html>
四 HTML表单【重点】
4.1 表单概述
- 采集用户数据
- 发送数据到服务器端（java服务器）
4.2 表单控件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>11-表单控件</title>
</head>
<body>
<!--
表单：<form></form>（容器）
常用属性：
action：表单提交服务器的地址，今天暂时使用 # （当前页面）
method：表单提交方式，有二种：get（默认）、post
get：
格式：提交地址?username=张三 & password=999 & birthday=2020-04-11
特点：
参数在地址栏拼接，不太安全
浏览器地址栏大小有限制，几KB左右
post：
格式：username=张三 & password=999 & birthday=2020-04-11
特点：
参数没有在地址栏拼接，相对安全（请求体）
浏览器不会对请求体做大小限制
表单项标签
1）文本框：<input/>
常用属性：
name:表单项的参数名（要想被表单提交，必须知道name的值）
value:表单项的值（用户输入、用户选择）
type:表单项类型，有很多种，不同的类型功能和展示效果也有所不同，常用：
a）text 文本框（默认）
b）password 密码框 特点：掩码
c）date 日期选择框
d）radio 单选框 特点：同一组（name的值相等）只能选择一个 checked="checked" 设置为默认选中
e）checkbox 复选框 特点：同一组（name的值相等）可以选择多个 checked="checked" 设置为默认选中
f）file 文件上传 特点：必须post方式
7）reset 重置按钮（清空表单），特点：value属性就是按钮名称
8）submit 提交按钮，特点：value属性就是按钮名称
2）下拉框：<select></select>
列表项：<option></option>
常用属性：selected="selected" 默认列表项被选中
3）文本域：<textarea></textarea>
常用属性：
rows：行高
cols：列宽
-->
<form action="#" method="post">
姓名：<input type="text" name="username" placeholder="请输入姓名"/> <br>
密码：<input type="password" name="password" placeholder="请输入密码"> <br>
生日：<input type="date" name="birthday"> <br>
性别：
<input type="radio" name="gender" value="male" checked="checked"> 男
<input type="radio" name="gender" value="female"> 女 <br>
爱好：
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm" checked>烫头 <br>
头像：
<input type="file" name="pic"> <br>
段位：
<select name="dan"> <!-- dan=2 -->
<option value="1">黑铁</option>
<option value="2" selected="selected">青铜</option>
<option value="3">白银</option>
</select> <br>
简介：
<textarea name="intro" cols="20" rows="5"></textarea> <br>
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮"> <br>
</form>
</body>
</html>
五 案例：黑马旅游网注册页面【作业】
需求：通过今天所学的table搭建黑马旅游网注册页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<!--绘制一个 6行1列表格
table>tr*6>td + tab 快速创建表格方式
-->
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="./img/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<tr>
<td>
<img src="./img/logo.png" width="100%" alt="">
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffc900" height="40px">
首页      
周边游      
山水游      
古镇游      
出境游      
国内游      
港澳游      
台湾游      
5A景点游      
全球自由行      
</td>
</tr>
<tr>
<td height="500px">
明天完成的内容
</td>
</tr>
<tr>
<td>
<img src="./img/footer_service.png" width="100%" alt="">
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffc900" height="50px">
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2020, All Rights Reserved 苏ICP备16007882
</td>
</tr>
</table>
</body>
</html>
扫一扫
826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
