HTML基础2

HTML入门——课本预习简记2HTML常用标签——图像图像标签
* 图像由定义

	* 空标签，只包含属性，并且没有闭合标签
	* 语法

		* src源属性（source）
		* url指图像存储位置
		* alt为图像定义一串预备的可替换的文本

HTML图像其他常见属性设置
* height与width 高度与宽度

	* 
	* 默认单位为像素
	* 缩放图像只改其中一个值就可以等比例缩放，都设置图像按可能显示畸形
* 与嵌套
* body background背景图片设置
* align图像对齐方式

	* right、left、top、bottom、middle
	* 不同浏览器对align属性值处理方式不一样

思考练习
1. 图像与文本混合排列，在格式上是否存在什么问题？
2. 常见的图像元素，还具备那些样式？

HTML常用标签——超链接本节目标
* 熟练使用超链接标签及其常用样式
* 理解URL资源定位的相对路径与绝对路径
* 能够利用超链接完成页面与页面之间的跳转

超链接
* 含义
* 标签

	* 双标签
	* href属性 用来描述链接的地址 示例
	* 链接在浏览器中显示的三种形式

		* 蓝色字体带下划线——未访问
		* 紫色字体带下划线——已访问
		* 红色字体带下划线——点击时
* 相对路径与绝对路径

	* 相对路径：相对于当前目录而言其他文件所在的地址
	* 绝对路径：  一般以http:// 或者ftp:// 或者系统盘符（c:）开头的地址
	* 相对地址中上一级目录（../） ,下一级目录(/)
* target对链接打开页面的设置

	* target_blank 让链接在新页面打开
* 锚点

	* 使超链接定位到某个具备ID属性的标签上
	* 超链接后面加#即可

思考练习
1. 如果没有了超链接，我们又该如何访问一个网页？

HTML常用标签——表格本节目标
* 理解

的作用与属性 * 理解单元格合并、表格的边框，背景，对齐等关键属性 * 理解表格对于展现数据和页面布局的关键因素

表格的核心标签
*

*
*

表格的核心用法（可与word表格进行对比操作验证）
* 用于存放数据或内容，只是一个容器，其本身不存在内容
* 用table的border属性加边框后可显示

HTML表格
* 定义
* 结构——

* 边框之间的像素 * thead与th标签——表格标题设置，父子关系，加粗加黑，剧中显示。 * 单元格高度与宽度设置只设一个，默认对其他单元格产生同等效果 * 对齐方式——align与valign * 单元格合并——colspan、rowsapan

思考练习
1. 如何利用表格结合文本等元素完成计算器的布局？
2. 与word表格对比，看看HTML与WORD的表格有何不同？
3. 为什么说表格可以用于网页布局？

HTML常用标签——表单本节目标
* 理解各类表单元素的基本用法与关键属性

表单标签
* input type

表单属性
1. 文本框 text value
2. 密码框 password value
3. 按钮 button value
4. 单选框
5. 复选框
6. 下拉框
7. 文本域
8. 提交和重置表单

思考练习
1. 利用表格、文本、表单等元素，尝试完成倒计时程序的页面布局

HTML常用标签——其他标签本节目标
* 熟练使用常用标签如列表、滚动字幕、水平线、iframe内嵌网页、音频视频等标签

其他标签
1. 水平线
2. 有序列表
3. 无序列表
4. iframe
5. 特殊符号
6. 颜色取值

HTML文本相关标签
* 可以嵌套使用
* 粗体与加粗

	* 加粗与粗体区别

		* 粗体是字体类型，加粗是对所用字体进行加粗操作
		* 正常浏览器里  和  都显示为粗体。「在网页显示中」没有什么区别。在代码编写上有区别
		* CSS兴起后，逐渐弃用，这种语义标签重用
* 斜体与斜体
* 下划线

HTML核心基础——图片img标签 双标签
* src属性——放置图片的地址
* 绝对路径与相对路径

	* 绝对路径：以httpl://、ftp://或系统盘符开头的地址
	* 相对路径：相对于当前目录而言其他文件的位置

		* 编辑器里不能跨项目链接内容
	* 尽量少用绝对路径，如果前端人员设置有变动可能报错。
	* src可以存放本地图片地址。建议使用相对路径。也可以放置在线图片。
* width与height图片的高宽设置
* align标签 对齐方式

	* 图像如何居于浏览器中央位置显示
* title标签

	* 鼠标悬停时的文字说明
* alt标签

	* 图片找不到时的文字提醒
	* 地址混乱方法

HTML核心基础——超链接a标签 双标签
* 使文本拥有跳转页面的功能
* href属性 跳转的地址，可以是图片、文字、视频、音频等

	* 可以和嵌合使用，达到点击图片跳转链接的目的
	* 嵌入位置如右  嵌入到这里
* target属性

	* target_self在原有窗口中打开
	* target_blank在新窗口中打开

src与href区别
* src一般引入非文本内容，herf一般引入文本内容
* link、a标签使用href，其余使用src

特殊符号
* © 版权符号
* ® 注册符号
* &trade 商标
*   空格
* < <
* > >
* & &

特殊标签
* bgcolor 背景色
* background 背景
* 上述要写在body开头内部，写在主体里无效，因为和body开头冲突。

HTML核心基础——表格表格标签
*

表格最外层的标签；表格由行和列构成
* 表格的一行
*

表格的单元格 *	字体加黑加粗，对齐方式为剧中

	* 批量建行快捷键tr*3 tab键
* 与、
* align对齐方式 
* border边框设置
* cellspacing单元格之间的距离——外间距
* cellspadding单元格边框和内容之间的距离——内间距

单元格合并
* colspan跨列合并

	* 在td中使用
* rowspan跨行合并

表格优势
* 简单通用
* 结构稳定

x^y●计算器编制过程中问题
* 小圆点所在行高度缩小有限 不能
* 一开始忘记设表格边框宽度和高度
* width数值相等就是平分
* align的middle与center区别

	* middle一般用于垂直（valign）居中，center一般用于水平（align）居中
* 粘贴复制

照片墙项目中问题
1. 表格中行与行之间的间距无法消除

进存销管理系统界面项目中问题
1. 设计方案中途变更

	* 一开始计划利用整个表格完成，后来发现整体布局的三个部分展现样式不一样，单元格间距也不一样，而整体用一个表格又牵一发而动全身。
	* 所以改为独立出三个表格。但这样会导致代码增加，不够简洁高效
2. 红色横线怎么与表头顶端贴合？
3. 一行多列的表格如何设置不同单元格位置与宽度？
4. 如何理解与测量像素？
5. 下拉列表的选框长度怎么设置？
6. 背景色如何匹配案例颜色？
7. 六个表单部分怎么设置首端对齐？
8. 如何在表单里抓取显示当天时间？
9. 新增按钮如何使用？
10. 查询按钮如何实现积分变化显示？
11. 积分显示框如何只显示，不能修改？

表单标签为form
* 用户名或密码错误
* action内容提交到哪里
* method

	* 属性值有get 和 post
	* get是获取信息时候的方式——打开一个页面，搜索网页
	* post是提交数据信息的方式——登录、注册、上传
* input 单标签

	* type


			* name

				* 后端根据值来提取数据
			* ID
			* value 按钮名字
		* text

			* maxlength
			* size
			* placeholder文本框内的提示信息
		* password

			* 一般用于密码确认时使用
			* 输入时会用特殊符号遮盖，并不是加密
		* submit提交
		* reset重置
		* radio单选按钮

			* name值设置相同，达到互斥；不然都可以选
			* checked值默认选择；
			* checked值相同时会产生覆盖效果，后面的生效
		* image图片
		* button按钮

			* 借助onclick绑定JS
		* email邮箱

			* 加入submit按钮点击提交会判断邮箱地址是否正确
			* 加@就可以绕过邮箱地址错误提示（红框显示）
		* textrea文本域

			*  双标签
			* cols 与 rows 属性值来赋值
* select

	* option

		* name名称
		* size显示行数
		* value
		* selected默认选项
* 

PS：
1. HTML中空格表示 
2. 分号文本里不显示
3. 有时候缓存不清理会影响测试结果
4. Hbulider里批量修改操作

	1. CTRL+鼠标逐个单击
	2. 查找替换

如何让一条线和表格贴合？思路一:插入背景图片思路二:嵌套4个边框，三个方向设置边框对齐方式如何消除行与行之间的间距？HTML核心基础——其他标签有序列表 双标签
*

	* 

无序列表
*

	* 

漫谈
* DuckDuckGoog

	* 号称不收集用户隐私
* Google
* CSDN

	* 可以开通博客收费
* 博客园

	* 后期可以引用当作面试介绍
* 开发者头条

	* 手机端app
* 菜鸟教程
* W3school
* 掘金