DAY02 HTML

这里写目录标题

  • 一 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 版权声明 &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)”
    使用图片的时候要注意图片本身的尺寸
    如果设置的宽高不符合图片本身的宽高比，图片会变形——图片的比例失真
    解决方案：宽和高只写一个，另外一个自适应
<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 +向下(上)箭头：可以快速地使拷贝的内容每隔一行出现一次，适
用给每行内容都添加分割线或者换行符时使用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/28027.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

模型 WOOP

模型 WOOP

说明&#xff1a;系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。不再拖延和懒惰&#xff0c;让梦想照进现实。 1 WOOP模型的应用 1.1 WOOP模型提高自己健身习惯 如果你想要养成健身的习惯&#xff0c;那么使用WOOP模型来提高自己健身习惯&#xf…
阅读更多...
linux执行mysql命令备份回复数据库

linux执行mysql命令备份回复数据库

java工程中需要对数据库进行备份、还原功能 windows环境执行 备份 “cmd /C mysqldump -uroot -ppassword dp > dp.sql” 还原 “cmd /C mysql -uroot -ppassword dp < dp.sql” linux中老是失败&#xff0c;不是意料之外的错误就是cannot find table …
阅读更多...
Vue基础面试题（三）

Vue基础面试题（三）

文章目录 1.Vue3.0有什么更新2.defineProperty和proxy的区别3.Vue3.0 为什么要用 proxy&#xff1f;4.对虚拟DOM的理解&#xff1f;5.虚拟DOM的解析过程6. 虚拟DOM真的比真实DOM性能好吗7.DIFF算法的原理8. Vue中key的作用 1.Vue3.0有什么更新 响应式原理改成了用proxy&#x…
阅读更多...
全光万兆时代来临：信而泰如何推动F5G-A（50PONFTTR）技术发展

全光万兆时代来临：信而泰如何推动F5G-A（50PONFTTR）技术发展

技术背景 F5G-A&#xff08;Fifth Generation Fixed Network-Advanced&#xff0c;第五代固定网络接入&#xff09;是固定网络技术的一次重大升级&#xff0c;代表了光纤网络技术的最新发展。F5G-A旨在提供更高的带宽、更低的延迟、更可靠的连接以及更广泛的应用场景。 F5G-A六…
阅读更多...
【多线程】如何使用jconsole工具查看Java线程的详细信息？

【多线程】如何使用jconsole工具查看Java线程的详细信息？

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. 先运行java程序&#xff01;2. 在jdk目录下的bin文件夹中找到jconsole.exe3. 新建连接4. 观察线程状态5. …
阅读更多...
OpenCV形态学

OpenCV形态学

什么事形态学处理 基于图像形态进行处理的一些基本方法&#xff1b; 这些处理方法基本是对二进制图像进行处理&#xff1b; 卷积核决定着图像出来后的效果。 一 图像二值化 什么是二值化 将图像的每个像素变成两种值&#xff0c;如0,255. 全局二值化。 局部二值化。 thres…
阅读更多...
【LVGL v8.3】修改 ARC 控件指针图片风格

【LVGL v8.3】修改 ARC 控件指针图片风格

文章目录 前言实现注意 前言 在车辆仪表中&#xff0c;ARC 控件作为仪表指针&#xff0c;常用图片做特定显示指针 Guider 1.7.2 初始化目前不能指定图片风格 通过修改代码&#xff0c;追加效果 实现 原生指针部件代码&#xff1a;只有颜色&#xff0c;宽度&#xff0c;透明…
阅读更多...
08 SpringBoot 自定定义配置

08 SpringBoot 自定定义配置

SpringBoot自定义配置有三种方式&#xff1a; 使用PropertySource进行自定义配置 使用ImportResource进行自定义配置 使用Configuration进行自定义配置 PropertySource ​ 如果将所有的配置都集中到 application.properties 或 application.yml 中&#xff0c;那么这个配置文…
阅读更多...
Python闯LeetCode--第1题：两数之和

Python闯LeetCode--第1题：两数之和

Problem: 1. 两数之和 文章目录 思路解题方法复杂度Code 思路 看到这道题第一思路就是暴力破解&#xff0c;枚举&#xff0c;两个for循环遍历&#xff0c;直到找到满足要求的答案。主要因题目假设只有一组满足结果的答案&#xff0c;因此难度大大降低&#xff0c;作为第一道题&…
阅读更多...
解决javadoc一直找不到路径的问题

解决javadoc一直找不到路径的问题

解决javadoc一直找不到路径的问题 出现以上问题就是我们在下载jdk的时候一些运行程序安装在C:\Program Files\Common Files\Oracle\Java\javapath下&#xff1a; 一开始是没有javadoc.exe文件的&#xff0c;我们只需要从jdk的bin目录下找到复制到这个里面&#xff0c;就可以使用…
阅读更多...
去掉eslint

去掉eslint

1、在vue.config.js文件里加上下面的代码&#xff0c;然后重启就可以了&#xff01; 2、vue.config.js文件代码&#xff1a; const { defineConfig } require(vue/cli-service) module.exports defineConfig({transpileDependencies: true,lintOnSave: false })
阅读更多...
堆栈溢出的攻击 -fno-stack-protector stack smash 检测

堆栈溢出的攻击 -fno-stack-protector stack smash 检测

在程序返回的一条语句堆栈项目处&#xff0c;用新函数的起始地址覆盖&#xff0c;将会跳转到执行新函数。 现在系统对这个行为做了判断&#xff0c;已经无法实施这类攻击或技巧。 1&#xff0c;测试代码 #include <stdio.h> void cc() {printf("I am cc( )\n"…
阅读更多...
设置SSHkeys多服务器免登录配置（ssh config）

设置SSHkeys多服务器免登录配置（ssh config）

一、背景&#xff1a; 多邮箱或者多git账号进行同一台电脑开发的情况。 有时候&#xff0c;开发时可能会面临一个情况&#xff0c;就是通过自己的电脑&#xff0c;可能同时需要开发多个不同地方的项目&#xff0c;或者说&#xff0c;自己建立的项目已经配置好SSH验证免密登录&a…
阅读更多...
C# WPF入门学习主线篇（二十三）—— 控件模板（ControlTemplate）和数据模板（DataTemplate）

C# WPF入门学习主线篇（二十三）—— 控件模板（ControlTemplate）和数据模板（DataTemplate）

C# WPF入门学习主线篇&#xff08;二十三&#xff09;—— 控件模板&#xff08;ControlTemplate&#xff09;和数据模板&#xff08;DataTemplate&#xff09; 在WPF开发中&#xff0c;控件模板&#xff08;ControlTemplate&#xff09;和数据模板&#xff08;DataTemplate&am…
阅读更多...
基于Python+OpenCV+SVM车牌识别系统(GUI界面)【W3】

基于Python+OpenCV+SVM车牌识别系统(GUI界面)【W3】

简介&#xff1a; 随着交通管理的日益复杂化和智能化需求的增加&#xff0c;车牌识别系统在安防、智慧交通管理等领域中扮演着重要角色。传统的车牌识别系统主要基于图像处理和模式识别技术&#xff0c;随着计算机视觉技术的发展&#xff0c;基于Python、OpenCV和机器学习算法的…
阅读更多...
Vue3新特性指南:探索新增指令、内置组件和改进

Vue3新特性指南:探索新增指令、内置组件和改进

Vue.js是一款流行的JavaScript框架,用于构建现代Web应用。Vue3是Vue.js的最新版本,引入了许多新特性和改进。本文将介绍Vue3新增的指令、内置组件以及其他值得关注的改进,并提供使用组合式API的用法示例。 一、新增指令 v-is指令: v-is指令用于动态组件,可以根据表达式的值来…
阅读更多...
2024年6月-Docker配置镜像代理

2024年6月-Docker配置镜像代理

步骤1&#xff1a;编辑 daemon.json 文件 vim /etc/docker/daemon.json步骤2&#xff1a;添加配置 将以下内容粘贴到文件中&#xff1a; {"insecure-registries": ["192.168.0.99:8800"],"data-root": "/mnt/docker","registr…
阅读更多...
redis 故障处理： 持续更新

redis 故障处理： 持续更新

redis 内存快满&#xff1a; 突发性&#xff1a; 1.1 当突发的时候&#xff0c;先进行扩容redis 内存&#xff1a; CONFIG SET maxmemory 6G 1.2 通过monter 获取当前redis 请求&#xff0c;发送给开发&#xff0c;让开发进行处理一下缓慢性&#xff1a; 进行扫描一下redis…
阅读更多...
文件初阶入门(葵花宝典)

文件初阶入门(葵花宝典)

1. 文件的顺序读写 1.1 顺序读写函数的介绍 函数名 功能 适用于 fgetc 字符输入函数 所有输入流 fputc 字符输出函数 所有输出流 fgets 文本行输入函数 所有输入流 fputs 文本行输出函数 所有输出流 f…
阅读更多...
小数二分个人见解

小数二分个人见解

小数二分 小数二分题目 小数二分 整数二分 是找边界点&#xff0c;而小数二分找的是 近似值。 整数二分是在一个整型数组当中 查找&#xff0c;而小数二分是在数轴中 查找&#xff0c;都是每次可以排除一半的区间&#xff0c;只不过小数二分中while循环内的结束条件和整数二分…
阅读更多...
最新文章

Copyright @ 2022~2023