泉州机票网站建设,做网站对象存储,数商云商城,高碑店地区网站建设这里写目录标题 一 WEB基础知识1. 我们可以做什么?2. WEB和Internet3. WEB 开发时需要用到的两类软件 二 HTML入门1. 前端涉及到的三个基础语言2. 定义3. HTML特点 三 HTML语法规则1. HTML 语法基础2. HTML网页结构3. HTML 网页注释 四 HTML标签1. 文本样式的标签2. 换行标签3… 这里写目录标题 一 WEB基础知识1. 我们可以做什么?2. WEB和Internet3. WEB 开发时需要用到的两类软件 二 HTML入门1. 前端涉及到的三个基础语言2. 定义3. HTML特点 三 HTML语法规则1. HTML 语法基础2. HTML网页结构3. HTML 网页注释 四 HTML标签1. 文本样式的标签2. 换行标签3. 转义符号4. 段落标签5. 标题字标签6. 水平分割线标签 五 分区元素六 图片与超链接1. 图片2. URL3.超链接 七 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 charsetutf-8 指定页面的编码/headbodyHelo World/body 网页的主体
/html3. 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” /结束标签
属性的声明必须写在开始标签里一个元素可能不只有一个属性多个属性之间使用空格隔开多个元素之间不区分先后顺序属性名与属性值之间使用等号连接属性值要写在双引号中 img图片标签 单标记标签 属性 src”图片资源的路径/url” alt”资源加载失败时显示的替换文字” width”图片的宽度 单位(%或px)” height”图片的高度 单位(%或px)” 使用图片的时候要注意图片本身的尺寸 如果设置的宽高不符合图片本身的宽高比图片会变形——图片的比例失真 解决方案宽和高只写一个另外一个自适应
img src./img/zichan4.jpg width200px height50px
!-- img src./img/zichan4.jpg stylewidth: 200px;height: 50px; -- 效果同上注意对于标签元素自带的默认属性则可以直接写在标签元素内如上面的width和height都是img标签元素默认自带的属性。但是对于标签元素没有自带的属性则需要使用CSS样式三种引入方式之一来操作上面的第二条则采用CSS行内样式方式引入。对于标签元素自带的默认样式属性来说写到style里面和写到与style同级的外面都一样。但是对于未自带的样式属性只能写到style里面。
2. URL
Uniform Resource Locator 统一资源定位符俗称路径用来标识资源的位置 1) 绝对路径 是一个完整的路径使用网络资源的时候使用绝对路径 例如:img srchttps://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 idc1第一章 石猴出世/h3 跳转锚点的方式a href#锚点名称/a,如a href#c1快速跳转到第一章/a 跳转到页面顶部a href#返回页面顶部/a 除了作为返回页面顶部的作用以外 在写项目的时候如果不知道href跳转到哪里就先用#占位 汉唐网址http://www.codece.cn/
七 Hbuilder使用技巧
1 工具 —— 设置——常用配置 下的 失去焦点自动保存这一项 打上对钩 2 工具 —— 设置——常用配置 下的 制表符长度 设置为 2 3在html文件名上 鼠标 右键 选择 在外部资源管理器打开 可以跳到文件所在的位置 4Alt Q 显示/隐藏 项目管理器 5Ctrl C 复制当前行 CtrlV 向下粘贴当前行 6Ctrl 向下(上)箭头 当前行和下(上)一行互换位置 7修改注释文本的颜色 工具 —— 设置——源码视图 下 将默认设置区域内从294行到315行复制到右侧的 用户设置区域内 将非注释的部分的 注释掉的内容打开也可以自定义里面的颜色 8) Ctrl C 之后 连续 按Ctrol V 向下(上)箭头可以快速地使拷贝的内容每隔一行出现一次适 用给每行内容都添加分割线或者换行符时使用。
