DAY02 HTML

scx_link2024-06-22 20:28

这里写目录标题

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

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 版权声明 &copy;

圈R 注册商标 &reg;

TM 商标符号 &trade;

关闭符号/乘号 &times;

带圈的关闭符号 &otimes;

除号 &divide;

小于号 &lt;

大于号 &gt;

用小于号和大于号包裹的英文，会被浏览器解释为标签，如果要显示 <英文> 需要用这里的转义字符来表示大于号和小于号.

空格 &nbsp;

空格折叠现象：多个空格或换行会折叠成一个空格显示，所以多个空格要使用转义符号 &nbsp;

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"> </结束标签>

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

U niform R esource L ocator 统一资源定位符，俗称路径，用来标识资源的位置
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行，复制到右侧的

用户设置区域内 将非注释的部分的 注释掉的内容打开，也可以自定义里面的颜色

  1. Ctrl + C 之后 ，连续 按Ctrol +V +向下(上)箭头：可以快速地使拷贝的内容每隔一行出现一次，适

用给每行内容都添加分割线或者换行符时使用。

相关推荐
王解1 小时前
webpack loader全解析，从入门到精通（10）
前端·webpack·node.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心，方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS，三大选择器，游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记（webAPI—DOM）
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_6 小时前
【Linux】多线程（概念，控制）
linux·运维·前端
蜗牛快跑2136 小时前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy6 小时前
vue 依赖注入（Provide、Inject ）和混入（mixins）
前端·javascript·vue.js
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04新版微信小程序获取用户手机号05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【Flutter】基于 GetX 实现 Dio 的生命周期自动化