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.英语单词，例如：红色 red2.光三原色，R（0~255）G（0~255）B（0~255），通过代码6位十六进制数标识 #ff ff ffwidth：宽度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年科技革命最重要的发展方向。世界各国越来越重视，我国政府也高度关注人工智能的发展，无论是党的十八大、十九大，还是、、的政府工作报告，均提出要重点发展人工智能、机器人，并提升到国家战略层面。<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.绝对地址（外部资源）2.相对地址（内部资源）./（省略） 当前目录../ 上级目录../../ 上上级target：打开方式_self（默认值）：当前窗口跳转_blank：打开新窗口--><a href="">绝对地址_传智官网</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="/" 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="/timg?image&quality=80&size=b9999_10000&sec=1586065394921&di=1aee13ca0a97eb524c6ad6867baee602&imgtype=0&src=http%3A%2F%%2Fent%2F%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、rightcellspacing：单元格外边距，通常取值：0cellpadding：单元格内边距，通常取值：0bgcolor：表格背景色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（默认）、postget：格式：提交地址?username=张三 & password=999 & birthday=-04-11特点：参数在地址栏拼接，不太安全浏览器地址栏大小有限制，几KB左右post：格式：username=张三 & password=999 & birthday=-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 -, All Rights Reserved 苏ICP备16007882</td></tr></table></body></html>
day01【HTML基础】HTML表单【重点】 表单控件 水平线标签 段落和换行标签 超链接标签 图像标签 列表标签 div和span标签 转义（实体）字符 基本表格 合并表格
如果觉得《day01【HTML基础】HTML表单【重点】 表单控件 水平线标签 段落和换行标签 超链接》对你有帮助，请点赞、收藏，并留下你的观点哦！
