做网站信科网站建设建立网站平台需要多少钱
这里写目录标题
- 一 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 商标符号 ™
关闭符号/乘号 ×
带圈的关闭符号 ⊗
除号 ÷
小于号 <
大于号 >
用小于号和大于号包裹的英文，会被浏览器解释为标签，如果要显示 <英文> 需要用这里的转义字符来表示大于号和小于号.
空格
空格折叠现象：多个空格或换行会折叠成一个空格显示，所以多个空格要使用转义符号
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 +向下(上)箭头：可以快速地使拷贝的内容每隔一行出现一次，适
用给每行内容都添加分割线或者换行符时使用。