HTML入门——课本预习简记2HTML常用标签——图像图像标签
* 图像由定义
* 空标签，只包含属性，并且没有闭合标签
* 语法<img src="url" alt="some_text">
* src源属性（source）
* url指图像存储位置
* alt为图像定义一串预备的可替换的文本
HTML图像其他常见属性设置
* height与width 高度与宽度
* <img src="url" height="300" width=“200”>
* 默认单位为像素
* 缩放图像只改其中一个值就可以等比例缩放，都设置图像按可能显示畸形
* <img>与<a>嵌套
* body background背景图片设置
* align图像对齐方式
* right、left、top、bottom、middle
* 不同浏览器对align属性值处理方式不一样
思考练习
1. 图像与文本混合排列，在格式上是否存在什么问题？
2. 常见的图像元素，还具备那些样式？
HTML常用标签——超链接本节目标
* 熟练使用超链接标签及其常用样式
* 理解URL资源定位的相对路径与绝对路径
* 能够利用超链接完成页面与页面之间的跳转
超链接
* 含义
* 标签
* 双标签<a></a>
* href属性 用来描述链接的地址 示例<a href="url" text></a>
* 链接在浏览器中显示的三种形式
* 蓝色字体带下划线——未访问
* 紫色字体带下划线——已访问
* 红色字体带下划线——点击时
* 相对路径与绝对路径
* 相对路径：相对于当前目录而言其他文件所在的地址
* 绝对路径： 一般以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文本相关标签
* 可以嵌套使用
* 粗体与加粗
* 加粗与粗体区别
* 粗体是字体类型，加粗是对所用字体进行加粗操作
* 正常浏览器里 <b> 和 <strong> 都显示为粗体。「在网页显示中」没有什么区别。在代码编写上有区别
* CSS兴起后，<b>逐渐弃用，<strong>这种语义标签重用
* <em>斜体</em>与<i>斜体</i>
* <u>下划线</u>
HTML核心基础——图片img标签 双标签
* src属性——放置图片的地址
* 绝对路径与相对路径
* 绝对路径：以httpl://、ftp://或系统盘符开头的地址
* 相对路径：相对于当前目录而言其他文件的位置
* 编辑器里不能跨项目链接内容
* 尽量少用绝对路径，如果前端人员设置有变动可能报错。
* src可以存放本地图片地址。建议使用相对路径。也可以放置在线图片。
* width与height图片的高宽设置
* align标签 对齐方式
* 图像如何居于浏览器中央位置显示
* title标签
* 鼠标悬停时的文字说明
* alt标签
* 图片找不到时的文字提醒
* 地址混乱方法
HTML核心基础——超链接a标签 双标签
* 使文本拥有跳转页面的功能
* href属性 跳转的地址，可以是图片、文字、视频、音频等
* <a href>可以和<img>嵌合使用，达到点击图片跳转链接的目的
* <img>嵌入位置如右 <a>嵌入到这里</a>
* target属性
* target_self在原有窗口中打开
* target_blank在新窗口中打开
src与href区别
* src一般引入非文本内容，herf一般引入文本内容
* link、a标签使用href，其余使用src
特殊符号
* © 版权符号
* ® 注册符号
* &trade 商标
*   空格
* < <
* > >
* & &
特殊标签
* bgcolor 背景色
* background 背景
* 上述要写在body开头内部，写在主体里无效，因为和body开头冲突。
HTML核心基础——表格表格标签
*
* 表格的一行
*
| 表格的单元格 * | 字体加黑加粗，对齐方式为剧中 |
|---|
* 批量建行快捷键tr*3 tab键
* <thead>与<thbody>、<thfoot>
* align对齐方式
* border边框设置
* cellspacing单元格之间的距离——外间距
* cellspadding单元格边框和内容之间的距离——内间距
单元格合并
* colspan跨列合并
* 在td中使用
* rowspan跨行合并
表格优势
* 简单通用
* 结构稳定
xy●计算器编制过程中问题
* 小圆点所在行高度缩小有限 不能
* 一开始忘记设表格边框宽度和高度
* 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核心基础——其他标签有序列表 双标签
*
* <li>
无序列表
*
* <li>
漫谈
* DuckDuckGoog
* 号称不收集用户隐私
* Google
* CSDN
* 可以开通博客收费
* 博客园
* 后期可以引用当作面试介绍
* 开发者头条
* 手机端app
* 菜鸟教程
* W3school
* 掘金
174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
