HTML第一章 (WEB基础知识、 HTML入门、HTML的语法规则、HTML常用标签汇总、图片与超链接、HBuilder的快捷键)
2024-05-30 20:56:57
目录
一、WEB基础知识
二、HTML入门
三、HTML的语法规则
四、HTML标签
五、图片与超链接
六、HBuilder的快捷键
每日一句
一、WEB基础知识
- 我们可以做什么？
- WEB前端 大前端技术
- PC页面 移动端页面 微信公众号 小程序
- 游戏 数据可视化
- 全栈工程师
- web与internet
- 互联网上存在很多的服务和应用，其中，最多的就是网站
- 网站的服务就叫做www
- 列举一些其他的服务 FTP/TELNET/DNS….
- web页面需要用到的两种工具
- 用户浏览页面的工具——浏览器
- 功能:发送请求，并接收渲染服务器响应回来的结果
- 产品:
Netscape Navigator /Mozilla Firefox
Microwsoft IE / Edge
Google Chrome （快速 安全 稳定 程序员的最爱)
Apple Safari
- 程序员编写网页的工具都有哪些——网页编辑器
记事本 notepad++ editplus Dreamweaver Eclipse MyEclipse IDEA HBuilder VScode
- 用户浏览页面的工具——浏览器
二、HTML入门
- 1. 前端开发涉及到的三种语言——"前端三剑客"
- HTML:内容层——负责页面的内容
- CSS:样式层——负责页面的样式
- Javascript:行为层——负责页面的行为/交互
- 定义
- HTML 超文本标记语言 Hyper Text Markup Language
- 简单的理解成我们的网页
- 超文本:文本 图片 视频 音频 超链接 控件…
- 标记:html的语法标签<标签名>
- html是一种语言，由大量的标签组成，html文件运行在浏览器上
- HTML的特点
- 以 .html 或者 .htm为后缀的
- 由浏览器解析执行(默认代码从上往下，同一行从左往右按顺序执行)
- 页面中可以嵌套JS脚本
三、HTML的语法规则
- HTML语法基础
- 标签: <标签名> 用尖括号包裹标签名
- 双标记标签，封闭类型标签 —— <开始标签>内容区域</结束标签> <b>你好</b>
- 单标记标签,非封闭类型标签 —— <标签名> h5的语法可以省略斜杠 <br>
- 文档的类型声明
- <!DOCTYPE html>
- 写在html文件中的第1行
- 告诉浏览器，当前html是使用h5的语法编写的，请用h5的规范解析
- HTML网页结构
- <html> 代表的是网页的开始与结束，一个页面中，有且只有一对html标签
<head></head> 网页的头部，定义了当前页面中的一些配置信息
<body></body> 网页的主体，要展示的内容
</html> - head标签里可以放的内容
- <title>网页的标题</title>
- <link rel="stylesheet"> 引入css文件样式
- <meta charset="utf-8"> 元数据，配置信息——设置编码
- <html> 代表的是网页的开始与结束，一个页面中，有且只有一对html标签
- HTML网页的注释
- 不被浏览器解析运行的文本，增强代码的可读性，解释代码
- 格式 <!-- 这里是要被注释掉的内容 -->
- 注释内部不能嵌套注释
- 在<>内部不能有注释
四、HTML标签
- 文本样式标签
- b 加粗
- I 斜体
- s 删除线
- u 下划线
- X<sup>2</sup> 上标字
- log<sub>2</sub>4 下标字
- h5提供了一些带有语义的标签 strong加粗 em斜体 del删除线
- 转义符号
- 圈C 版权声明 ©
- 圈R 注册商标 ®
- TM商标符号 ™
- 关闭符号 ×
- 带圈的关闭符号 ⊗
- 大于号 >
- 小于号 <
- 空格 存在空格的折叠现象，所以多个空格要使用此转义符号
- 换行标签
- <br> 或者 <br/> 单标记标签
- 预格式化标签
- pre
- 保留源文档中的格式，即保留原来的换行和文本中的空白
- 标题字标签
- h1~h6
- 单独成行，h1最大 h6最小，字体加粗，上下有垂直的行间距
- h4大小为默认字体
- 段落标签
- p
- 单独成行，上下有垂直的行间距
- 水平分割线标签
- <hr> 或者 <hr/> 单标记标签
- 在页面上添加一条独占一行的分割线，即使后面有文本也会出现在下一行
- 属性：
- align="" 水平对齐的方式
- color="" 颜色
- size="" 分割线的粗细
- width="" 分割线的宽度
- 属性和值
- 属性：也称为特征，描述标签某一方面的特点
- html定义了很多的属性和值，用来修改元素的样式和状态
- 写法:
- <开始标签 属性名1="属性值1" 属性名2="属性值2"></结束标签>
- 属性的声明必须在开始标记里
- 一个元素可能不只有一个属性，多个属性之间使用空格隔开
- 多个属性之间不区分先后顺序
- 属性名与属性值之间使用等号连接
- 属性值要包裹在引号中
- html通用属性:
- title="" 鼠标悬停在页面上显示的文本
- style ="" CSS中定义行内样式
- id="" 页面中元素的唯一标识符，在同一个页面中id值不能重复
- class = "" CSS中引入类选择器
- 分区元素
- 分区元素用于为元素分组，常用于页面布局
- 块分区
- div
- 独占一行，专门用于页面布局，是最简单的块级元素
- 行分区
- span
- 处理同一行文本有不同样式的时候，不换行，是最简单的行内元素
五、图片与超链接
- 图片 —— <img> 单标记标签
- 属性:
- src="图片资源的路径/url"
- width="图片的宽度 单位(% 或 px)"
- height="图片的高度 单位(% 或 px)"
- alt = "资源加载失败时显示的替换文字"
- 使用图片的时候要注意图片本身的尺寸
- 如果设置的宽高不符合图片本身的宽高比，图片会变形——图片的失真
- 解决方案:宽或者高只写一个，另外一个自动适应
- 属性:
- URL
- uniform Resource Locator 统一资源定位符，俗称路径，用来标识网络中的任何资源
- 绝对路径
- 是一个完整的路径，要使用网络资源的时候，用绝对路径
- 从最高级目录下开始的完整路径，无论当前路径是什么，使用绝对路径总能找到要连接的文件
- 优点：节省本服务器的本地存储空间
- 缺点: 资源不稳定，如果远程服务器删除资源，本地服务器就引用不到了
- 相对路径 -- 参照物其实就是当前的html
- 超链接 —— <a href=""></a>
- 属性：
- href = "要跳转的页面路径"
- target=""
- _self 默认值，在本页面打开新链接
- _blank 在新的选项卡页面打开链接
- 去除超链接下划线 —— text-decoration: none;
- 锚点
- 在页面上定义一个位置，叫做锚点
- 使用a标签，跳转到锚点，页面会直接在这个位置显示
- 定义锚点的方式:
- H5定义锚点，使用元素的id值直接当做锚点名称，如<h3 id="c3">第三章 龙宫借宝</h3>
- 跳转锚点的方式:
- <a href="#锚点名称"></a>，
- 如：<a href="#c3">快速跳转到第三章</a> 跳转到页面顶部:
- <a href="#">快速跳转到页面顶部</a>
- 超链接的其它表现形式：
<a href="javascript:fn()">调用JS脚本</a> <script>function fn(){alert(666)} </script>
- 属性：
六、HBuilder的快捷键
刚学习前端推荐使用HBuilder来书写代码
- Ctrl+C 复制当前行
- Ctrl+V 粘贴当前行
- Ctrl+D 删除当前行
- Ctrl+S 保存代码
- Ctrl+Z 撤销
- Ctrl+X 剪切
- Ctrl+向上/向下 向上/向下移动当前行代码
- Ctrl+/ 添加注释，再按一次取消注释
- Ctrl+R 运行代码
- 按住Ctrl点击多处位置可以开启多行同时编辑，按Esc退出多行编辑状态
每日一句
一寸光阴一寸金，寸金难买寸光阴。
"一寸光阴和一寸长的黄金一样昂贵，而一寸长的黄金却难以买到一寸光阴。"
HTML第一章 (WEB基础知识、 HTML入门、HTML的语法规则、HTML常用标签汇总、图片与超链接、HBuilder的快捷键)相关推荐
- 卫春芳计算机基础视频,第一章 计算机基础知识.pptx
文档介绍: 大学计算机基础主讲:数计学院卫春芳所用教材:<大学计算机基础>科学出版社大学计算机基础高等教育出版社杨振山龚沛曾主编大学计算机基础(第4版)大学计算机基础实验教程(电子版)参考 ...
- 尚硅谷python核心基础教程笔记-第一章 计算机基础知识
第一章 计算机基础知识(视频1-10) 课程介绍 课程名称:Python基础视频教程 讲师:尚硅谷教育,李立超(lichao.li@foxmail.com) 面向的层次:From Zero to He ...
- 第一章计算机基础知识第一节,第一章 计算机基础知识 第一节
第一章计算机基础知识 第一节.了解计算机 尊敬的各位评委老师: 大家好!我今天说课的题目是<了解计算机>.我将从以下五方面来谈谈对这节课的设计:即说教材.学情分析.说教法和学法.说教学过程 ...
- 微型计算机基础 教案,第一章微型计算机基础知识新080902电子教案（153页）-原创力文档...
第一章 微型计算机基础知识;第一章? 微型计算机基础知识;§1.1 计算机中数的表示方法;1.1.1 进位计数制及各计数制间的转换;二进制数的特点; 十进制--符合人们的习惯二进制--便于物理实现十六 ...
- 计算机术语new一个,微机原理第一章计算机基础知识(new)
<微机原理第一章计算机基础知识(new)>由会员分享,可在线阅读,更多相关<微机原理第一章计算机基础知识(new)(47页珍藏版)>请在人人文库网上搜索. 1.1.第一章计算机 ...
- 自考第一章计算机基础知识,2018年自考计算机网络技术基础复习资料：第一章...
第一章 计算机基础知识 电子计算机的发展阶段分为: 1 第一代电子计算机.用电子管.以构成计算机的电子器件来1946年第一台电子计算机. 2 第二代电子计算机的特点是用晶体管. 3 第三代电子计算机的 ...
- 计算机基础知识作业,第一章计算机基础知识作业
第一章计算机基础知识作业 读书之法,在循序而渐进,熟读而精思 作业一计算机基础知识 一.作业目的 1．掌握 1)计算机的发展历史: 2)计算机的主要特点和应用领域: 3)计算机系统硬件组成和工作原理: ...
- 第一章计算机基础知识作业答案,第一章 计算机基础知识.doc第一次作业
交流 借鉴 第一章 计算机基础知识 一.单选题 1． 第四代电子计算机是( C )计算机. A．电子管 B．晶体管 C．大规模集成电路 D．人工智能 2．第一台电子计算机是1946年在美国研制的,该机 ...
- 计算机基础第一章知识题库,题库第一章计算机基础知识
题库第一章计算机基础知识 (51页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 23.9 积分 第一章 计算机基础知识一.判断正误题1.第二计算机的主存采 ...
最新文章
- s-sar命令（System Activity Reporter系统活动情况报告）
- AppStore 拒绝审核原因：PLA 2.3
- 新基建7大产业链约500家企业图谱！
- MM模块部分名词解释
- Windows Nginx 反向代理 Microsoft SQL Server (MSSQL)
- oracle10_client的安装,Oracle10.2ClientWindows安装.doc
- php公告滚动源码,10行js代码实现上下滚动公告效果方法
- 通过rhel7的kvm虚拟机实现3节点Postgres-XL（包括gtm standby）
- SVN客户端与服务端安装详解
- js生成批次号_一文知晓MES系统中的批次管控功能
- python条形图的动画显示水能时钟_[宜配屋]听图阁
- bat 等待输入_深蓝词库转换 - 简单的输入法词库转换工具
- Docker从理论到实践(九)------使用Dockerfile创建镜像
- 1. Packet sniffers （包嗅探器 14个）
- win10如何找计算机管理员密码,win10怎么修改administrator账户密码 win10修改管理员账户密码方法...
- PPT制作基础知识（师从于珞珈老师）
- NET F/T六维力传感器使用
- 群晖docker签到京豆_在群晖Docker上的部署qBittorrent
- 【EtherCAT从站(SPI)扩展模块电路分析】
- 视频中的音频提取如何操作？一分钟教会你