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 +向下(上)箭头：可以快速地使拷贝的内容每隔一行出现一次，适

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

相关推荐
无咎.lsy几秒前
vue之vuex的使用及举例
前端·javascript·vue.js
fishmemory7sec8 分钟前
Electron 主进程与渲染进程、预加载preload.js
前端·javascript·electron
fishmemory7sec10 分钟前
Electron 使⽤ electron-builder 打包应用
前端·javascript·electron
豆豆1 小时前
为什么用PageAdmin CMS建设网站？
服务器·开发语言·前端·php·软件构建
twins35202 小时前
解决Vue应用中遇到路由刷新后出现 404 错误
前端·javascript·vue.js
qiyi.sky2 小时前
JavaWeb——Vue组件库Element（3/6）：常见组件：Dialog对话框、Form表单（介绍、使用、实际效果）
前端·javascript·vue.js
煸橙干儿~~2 小时前
分析JS Crash（进程崩溃）
java·前端·javascript
安冬的码畜日常2 小时前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕（下）—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
l1x1n03 小时前
No.3 笔记 | Web安全基础：Web1.0 - 3.0 发展史
前端·http·html
昨天；明天。今天。3 小时前
案例-任务清单
前端·javascript·css
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache