前端web开发HTML 5+ c s s 3+移动web

最新推荐文章于 2023-07-29 21:56:04 发布

二十四时

最新推荐文章于 2023-07-29 21:56:04 发布

阅读量137

点赞数

文章标签： html servlet 前端

本文链接：https://blog.csdn.net/2302_77439339/article/details/130113853

版权

第一课时

一.HTML综合案例
- HEML的定义
 - 超文本标记语言
 - 超文本是链接
 - 标记也叫标签，带尖括号的文本
 - 开始标签 结束标签
 标签成对出现，中间包裹内容
 
 <>里面放英文字母（标签名）
 
 结束标签比开始标签多/
 - 拓展
 - 双标签：成对出现的标签
 - 点标签：只有开始标签，没有结束标签 :换行
 - <hr>:水平线

二.HTML基本骨架
- html:整个网页
- head:网页头部，用来存放给浏览器看到的信息，例如css。
  - title：网页标题
- body:是网页的主体，用来存放给用户看的信息，例如图片，文字。
VS Code 快速生成骨架：
- 在HTML文件（.html)中，!(英文)配合Enter/Tab健
三.标签之间的关系
- 作用是：明确标签的书写位置；让代码格式更整齐。
父子关系（嵌套关系）
- <html>
- <head></head>
- </html>
兄弟关系（并列关系）
- <head></head>
- <body></body>
*代码格式
- 父子关系：子级标签换行且缩进（Tab）
- 兄弟关系：兄弟标签换行要对齐
- <html>
- <head></head>
- <body></body>
- </html>
四.注释
- 作用：提高可读性
- 注释标签用来在文档中插入注释，注释不会在浏览器中显示
- 在VS Code 中，添加/删除注释的快捷键是：Ctrl+/
五.标签
1.标题标签
- 一般用在新闻标题，文章标题，网页区域名称，产品名称等等。
标签名：h 1-h 6(双标签)
- 显示特点：
  - 文字加粗
  - 字号逐渐减小
  - 独占一行
经验分享：
- h 1标签在一个网页中只能用一次，用来放新闻标题或网页的logo
- h 2-h 6没有使用的限制
2.段落标签
- 一般用在新闻段落，文章段落，产品描述信息等等
标签名：P(双标签)
- 显示特点：
  - 独占一行
  - 段落之间存在间隙
3.换行与水平线标签
- 换行：(单标签)
 - <body>
 - 第一行内容
 - 
 - 第二行内容
 - </body>
- 水平线：<hr>()
4.文本格式化标签
- 作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗，倾斜，下划线，删除线等
- 标签名效果
- strong /b 加粗
- em/i 倾斜
- ins/u 下划线
- d e l/s 删除线
- strong/em/ins/d e l标签自带强调含义（语义）。
5.图像标签—基本使用
- 作用：在网页中插入图片
- <img src="图片的URL">
- SRC用于指定图像的位置和名称，是<img>的必须属性。
- 以./开头，VS Code有提示功能
- 图片标签的属性
 - <img src="./cat.jpg>
 - <img src="./dog.jpg>
 - <img src="./cat.jpg" alt="替换文本” title=“提示文字”>
 - 属性名属性值
 - 属性名=“属性值”
 - 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
六.路径
- 路径指的是查找文件时，从起点到终点经历的路线
- 路径分类：
  - 相对路径：从当前文件位置出发查找目标文件
    - /
  - 绝对路径：从盘符出发查找目标文件
    - window 电脑从盘符出发
    - mac 电脑从更目录出发