当前位置：首页 > news >正文

DAY02 HTML

news 2025/9/10 23:09:31

这里写目录标题

一 WEB基础知识
- 1. 我们可以做什么?
- 2. WEB和Internet
- 3. WEB 开发时需要用到的两类软件
二 HTML入门
- 1. 前端涉及到的三个基础语言
- 2. 定义
- 3. HTML特点
三 HTML语法规则
- 1. HTML 语法基础
- 2. HTML网页结构
- 3. HTML 网页注释
四 HTML标签
- 1. 文本样式的标签
- 2. 换行标签
- 3. 转义符号
- 4. 段落标签
- 5. 标题字标签
- 6. 水平分割线标签
五分区元素
六图片与超链接
- 1. 图片
- 2. URL
- 3.超链接
七 Hbuilder使用技巧

一 WEB基础知识

1. 我们可以做什么?

WEB前端大前端技术
PC页面网站 APP 移动端页面微信公众号小程序轻应用….
游戏数据可视化
全栈工程师
前端：所有的界面展示都是前端

2. WEB和Internet

Internet:全球性计算机互联网，俗称因特网
互联网上存在着很多的服务和应用
其中，应用最多的就是网站，网站的服务叫做www(World Wide Web)
但是还有一些其他的服务，比如FTP/telnet/dns

3. WEB 开发时需要用到的两类软件

用户浏览网页的工具——浏览器器
1）功能：发送请求，把接收到的相应数据解析乘图形化页面展示给用户
2）产品：
Netscape Navigator / Mozilla Firefox [mə'zɪlə] Mozilla基金会
Microsoft IE/ Edge
Google Chrome (快速安全稳定程序员的最爱 )
Apple Safari [səˈfɑːri] 苹果默认浏览器，不支持windows系统
以上浏览器都是有其自己的独立内核的
程序员编写网页的工具——网页编辑器
记事本 notepad++ Dreamweaver Eclipse IDEA VSCode HBuilderX

二 HTML入门

1. 前端涉及到的三个基础语言

“前端三剑客”
HTML: 内容层——负责页面的内容
CSS: 样式层——负责页面的样式
JavaScript:交互层——负责页面的行为/交互

2. 定义

HTML即超文本标记语言（Hyper Text Markup Language）
超文本：文本图片链接视频音频….
标记：html的语法 <标签名>
我们可以简单理解为网页

3. HTML特点

以.html或.htm为后缀的文件
由浏览器解析执行(默认代码从上往下，同一行从左往右顺序执行)
页面中还可以嵌套JS脚本

三 HTML语法规则

1. HTML 语法基础

标签：
<标签名> 用尖括号来包裹标签名
标签的分类：
1) 双标记标签，封闭类型标签
<开始标签>内容区域</结束标签> 如： <html> </html>
2) 单标记标签，非封闭类型标签
<标签名/> 现在H5语法规定可以不加斜杠 <标签名> <br/> 或 <br> 都可以

2. HTML网页结构

<!DOCTYPE html>
写在HTML文件中的第1行
用于告诉浏览器当前html使用h5的语法编写的，请用h5的规范解析
<html> 代表网页的开始和结束，一个页面中，有且只有一对html标签<head>网页的头部<title>网页的标题部分</title> <meta charset="utf-8"> 指定页面的编码</head><body>Helo World</body> 网页的主体
</html>

3. HTML 网页注释

不被浏览器解析运行的文本，用于增强代码的可读性，解释代码
格式 
注意：注释内部不能嵌套注释
不能在<>里写注释
Ctrl + / 添加注释，再按一次取消注释

四 HTML标签

1. 文本样式的标签

加粗 b strong
斜体 i em
删除线 s del
下划线 u
高亮标记 mark
上标字 sup
下标字 sub

2. 换行标签

<br> 或者 <br/> 单标记标签
在编辑器中敲回车是不能让文字换行的，想换行就需要使用br标签

3. 转义符号

圈C 版权声明 ©
圈R 注册商标 ®
TM 商标符号 ™
关闭符号/乘号 ×
带圈的关闭符号 &otimes;
除号 ÷
小于号 <
大于号 >
用小于号和大于号包裹的英文，会被浏览器解释为标签，如果要显示 <英文> 需要用这里的转义字符来表示大于号和小于号.
空格  
空格折叠现象：多个空格或换行会折叠成一个空格显示，所以多个空格要使用转义符号  

4. 段落标签

p
自己单独成行，上下方向有垂直的行间距
lorem 是用于生成假文的，先输入Lorem出现提示回车或者tab补全均可

5. 标题字标签

<hn></hn> n从1~6
单独成行，h1最大 h6最小字体加粗上下有垂直的行间距
h6是最后一个标题字标签
h4的字号与普通文本的字号一样
写错了会怎样? 写错了也不会报错，只是不显示标题字的格式而已

6. 水平分割线标签

<hr> 或 <hr/> 单标记标签
在页面上添加一条独占一行的灰色分割线

五分区元素

1）块分区 div
专门用于页面布局，独占一行，没有任何样式
是最简单的块级元素，也是最为基本的分区标签
最重要的功能：作为标签的外包裹，以分块的形式将页面分区
可以包裹body中任何标签，也可以独立使用
2）行分区 span
span 称为行内标签，用于包裹在一行中需要单独特殊处理的文本内容
不换行，最简单的行内元素，没有特殊的样式

六图片与超链接

1. 图片

常见的图片格式：
jpg/jpeg 普通图片
png 透明图
gif 动图
webp 新出的，谷歌的图
图片的问题不用担心，UI设计师会把所需的图片资源切好给我们
标签的属性:
属性：也称为特征，描述当前标签某一方面的特点
html标签有很多的属性和值，用来修改元素的样式和状态
写法：<开始标签属性名1=”属性值1” 属性名2=“属性值2”> </结束标签>

属性的声明必须写在开始标签里
一个元素可能不只有一个属性，多个属性之间使用空格隔开
多个元素之间不区分先后顺序
属性名与属性值之间使用等号连接
属性值要写在双引号中
<img>图片标签单标记标签
属性：
src=”图片资源的路径/url”
alt=”资源加载失败时显示的替换文字”
width=”图片的宽度单位(%或px)”
height=”图片的高度单位(%或px)”
使用图片的时候要注意图片本身的尺寸
如果设置的宽高不符合图片本身的宽高比，图片会变形——图片的比例失真
解决方案：宽和高只写一个，另外一个自适应

<img src="./img/zichan4.jpg" width="200px" height="50px">
<!-- <img src="./img/zichan4.jpg" style="width: 200px;height: 50px;"> --> 效果同上

注意：对于标签元素自带的默认属性，则可以直接写在标签元素内，如上面的width和height都是img标签元素默认自带的属性。但是对于标签元素没有自带的属性，则需要使用CSS样式三种引入方式之一来操作，上面的第二条则采用CSS行内样式方式引入。对于标签元素自带的默认样式属性来说，写到style里面和写到与style同级的外面都一样。但是对于未自带的样式属性只能写到style里面。

2. URL

Uniform Resource Locator 统一资源定位符，俗称路径，用来标识资源的位置
1) 绝对路径
是一个完整的路径，使用网络资源的时候，使用绝对路径
例如:<img src="https://cdn.tmooc.cn/bsfile//courseImg///f044221ee737404e91584a4d083764bd.png">
优点：节省本服务器的本地存储空间
缺点：资源不稳定，如果远程服务器删除了资源，本地服务器就引用不到了
2) 相对路径—参照物就是当前的html文件
同一级 src=”./图片名.后缀名”
下一级 src=”./同级目录名/资源名”
下两级 src=”./同级目录名/下级目录名/资源名”
上一级 src=”./../图片名.后缀名”
上两级 src=”./../../图片名.后缀名”
注意：./ 表示当前目录可以省略不写 ../ 表示上一级目录

3.超链接

<a href=””> </a>
属性：
href="要跳转的资源路径"
target=""
_self 默认值，在本页面中打开新链接
_blank 在新的选项卡页面中打开新链接
锚点：
在页面上定义一个位置，叫做锚点
使用a标签，跳转到锚点，页面会直接在这个位置显示
定义锚点的方式：
H5定义锚点，使用元素的属性id值直接当做锚点名称，如:<h3 id="c1">第一章石猴出世</h3>
跳转锚点的方式：<a href="#锚点名称"></a>,如：<a href="#c1">快速跳转到第一章</a>
跳转到页面顶部：<a href="#">返回页面顶部</a>
除了作为返回页面顶部的作用以外
在写项目的时候，如果不知道href跳转到哪里，就先用#占位
汉唐网址：http://www.codece.cn/

七 Hbuilder使用技巧

1）工具 ——> 设置——>常用配置下的失去焦点自动保存这一项打上对钩
2）工具 ——> 设置——>常用配置下的制表符长度设置为 2
3）在html文件名上鼠标右键选择在外部资源管理器打开可以跳到文件所在的位置
4）Alt + Q 显示/隐藏项目管理器
5）Ctrl +C 复制当前行 Ctrl+V 向下粘贴当前行
6）Ctrl + 向下(上)箭头当前行和下(上)一行互换位置
7）修改注释文本的颜色
工具 ——> 设置——>源码视图下将默认设置区域内从294行到315行，复制到右侧的
用户设置区域内将非注释的部分的注释掉的内容打开，也可以自定义里面的颜色
8) Ctrl + C 之后，连续按Ctrol +V +向下(上)箭头：可以快速地使拷贝的内容每隔一行出现一次，适
用给每行内容都添加分割线或者换行符时使用。