web前端开发的基础学习日记1
一、HTML+CSS系列导言
1、拨云见日
- 基础：HTML+CSS
- 切图流程
- 实战：PC企业站布局、PC游戏站布局
2、溯本求源
- 扩展：HTML和CSS
- 新语法：HTML5和CSS3
- 兼容与hack
3、风生水起
-布局：弹性布局，网格布局，移动端布局，响应式布局（Bootstrap）
4、巧夺天工
- 工程架构：预编译CSS，postcss，CSS架构
- 高级功能以及CSS与JS交互
二、什么是HTML和CSS？
1、是做网站的编程语言，浏览器把代码解析以后的样子就是我们看到的网站
2、HTML（结构层）:超文本语言，决定网页的结构与内容
3、CSS（表现层）：层叠样式层，设定网页的表现样式
4、如何查看网站的原始代码呢？
- 通过鼠标右键选择查看网页源代码
三、编译器
1、宇宙第一编译器VsCode
- 全称Visual Studio Code,来自微软，是一个开源的、基于Electron的轻量代码编辑器
- 优点：体积小，启动速度快
- 下载地址：https://code.visualstudio.com/
- 需安装的插件：语言包、open in browser、view in browser(方便直接进入网页）
2、编译器的基本使用
- 设置：文件 --> 首选项 --> 设置（大小、是否换行 word warp）
- 新建文件/文件夹（对应目录上也会显示）、重命名、删除、搜索
- ctrl+s：保存
- ctrl+a：全选
- ctrl+x：剪切
- ctrl+c：复制
- ctrl+v：粘贴
- ctrl+z：撤销
- ctrl+y：前进
- shift+end：从开头选中一行（光标放在开头位置）
- shift+home：从尾部选中一行（光标放在尾部位置）
- shift+alt+ ↓ ：快速复制一行
- alt+ ↑ 或 ↓：快速移动一行
- tab：向后缩进
- tab+shift：向前缩进
- alt+鼠标左键：多光标（同时进行修改）
- crtl+d：选中相同元素的下一个
四、chrome浏览器
-
谷歌浏览器（Google Chrome）是一款可让您更快速、轻松且安全的使用网络的浏览器。市场分额占比过半。
-
Chrome下载地址：https://www.google.cn/intl/zh-CN/chrome/
-
百度统计浏览器市场份额：https://tongji.baidu.com/data/browser chrome:68.88%
-
五大浏览器：
1、Internet Explorer浏览器（IE）
2、Opera浏览器（欧朋）
3、Safari浏览器（苹果）
4、Mozilla Firefox浏览器（火狐）
5、Google Chrome浏览器（谷歌）
五、深入了解网站开发
1、UI设计师
- 设计稿
2、web前端开发工程师（H5开发）
- 设计稿->代码
- 数据库里的数据->显示到页面
- HTML+CSS
3、web后端开发工程师
- 整理数据库的数据
六、HTML的基本结构和属性
- HTML超文本 标记 语言，标记通用标记语言的下一个应用，是网页制作必备的编程语言。
1.超文本
- 文本内容+非文本内容（图片、视频、音频等）
2.语言
- 编程语言（语法格式、书写格式）
3.标记（标签）
- <单词>比如：
- 写法：单标签，双标签
- 快捷方式：单词+Tab快速打出双标签
- 标签是可以上下排列，也可以组合嵌套
- HTML常见标签：https://www.juanzan.com/cha/html5/
4、标签的属性
- 修饰标签，设置当前标签的一些功能
例：<标签 属性 =“值” 属性2 =“值2”> 一个标签可以加若干属性
七、HTML初始代码
- 每一个html文件都需要添加初始代码，，初始代码就是无论你你写什么样的代码，这些代码都是有的，要符合html文件的规范写法。
- ！+Tab键：快速创建html的初始代码，不添加初始代码也能正常解析
DOCTYPE html> 文档声明︰告诉浏览器这是一个html文件
<html lang= "en" > html文件的最外层标签:包裹着所有html标签代码lang ="en"表示是一个英文网站lang-"zh-CN"表示一个中文网站<head><meta charset="UTF-8"> 元信息:是编写网页中的一些赋值信息<title>Documenttitle> 设置网页标题head><body>显示网页内容的区域body>
html>
八、HTML注释
- 注释的代码只有在文件代码中看得到，但是浏览器显示不出来。
1、写法：
2、意义：
- 把暂时不不用的代码的代码注释起来，方便以后使用。
- 对开发人员起到提示作用
3、快速添加注释和删除注释：
- ctrl+/
- shift+alt+a
九、HTML语义化
- 所谓HTML语义化指的是根据网页中内容结构，选择适合的HTML标签进行编写。
- 好处：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析(如屏幕阅读器、盲人
阅读器等)。
4.便于团队开发与维护。
十、标题和段落
1、h标签：标题
双标签：<h1> h1>....<h6>h6>
- 快捷键：h1+tab快速生成
- 在一个网页中，h1标题最重要，并且一个.html文件只能出现一个h1标签
- h5、h6标签在网页中不经常使用
2、p标签：段落
双标签：<p>p>
- Chrome浏览器中自带调试器：右键–>检查
- 不要把很多段落全写在一个p标签上
十一、文本修饰标签
：表示强调，强调性更强，双标签，会对文本进行加粗。：也表示强调，但与：相比稍弱，双标签，会对文本进行斜体。：下标文本
<p> a<sub>2sub> p>
：上标文本
<p> H<sup>2sup>O p>
：插入文本
十二、图片标签与图片属性
1、标签
2、属性
- src：引入图片地址
- alt：当图片出现问题，显示不出来的时候，可以显示一段友好的提示文字。（若图片没问题，则不会出现文字）。
- title：提示信息（所有HTML标签都具有的属性）
- width、weight：图片大小（数值 单位像素 在CSS中详细讲解）
3、小技巧
- 查看图片：右击图片–>在新标签页中打开图片–>将网址复制到代码中
- 查看图片原始大小：右击图片–>检查–>将鼠标移到到代码上
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head>
<body><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fcms-bucket.ws.126.net%2F2022%2F1019%2Fa8761f58j00rjzes2004vc001hc00u0c.jpg&thumbnail=660x2147483647&quality=80&type=jpg" alt="货轮 CCTV-13"title="这是一张图片的提示信息"width="300" height="300">
body>
html>
十三、引入文件的地址路径
1、相对路径（相对于某一个文件来进行引入的）
- 在路径中表示当前路径
- 在路径中表示上一级路径
<body><img src="./文件名" alt="" ><img src="./文件夹名/文件名" alt="" > 在当前文件的子元素<img src="../文件夹名/文件名" alt="" > 在文件夹外部
body>
2、绝对路径
- 指文件的完整路径（可以自动寻找盘符），不会参照某一个参照物进行引入，是一个真真实实绝对的地方
- 盘符可以不写（会自动识别）
- 在windows下斜线反斜线均通用（尽量避免使用反斜线）
- 网络地址必须斜线
十四、跳转链接
1、a标签–>双标签
- href属性：链接地址
- target：可以改变打开链接的方式（默认在当前页面打开：_self 新窗口打开：_blank）
- base标签：可以改变链接的默认行为（单标签），通常嵌套于
中
<a href="http://www.baidu.com">访问百度a><a href="图片中的目标地址"><img src="图片地址" alt=""><a href="http://www.baidu.com"target="_blank">访问百度a>
<head>><base target="_blank">
head>
十五、跳转锚点（在一个页面内进行跳转）
实现一
- #号
- id属性
<a href="#html">HTMLa><a href="#css">CSSa><a href="#js">JavaScripta><h2 id="html">HTML超文本标记语言h2><p>模拟段落p><h2 id="css">CSS层叠样式表h2><p>模拟段落p><h2 id="js">js脚本h2><p>模拟段落p>
实现二
- #号
- name属性（注意name属性加给的是a标签）
<a href="#html">HTMLa>
<a href="#css">CSSa>
<a href="#js">JavaScripta><a name="html">a>
<h2>HTML超文本标记语言h2>
<p>模拟段落p>
<a name="css">a>
<h2>CSS层叠样式表h2>
<p>模拟段落p>
<a name="js">a>
<h2>js脚本h2>
<p>模拟段落p>- name可以实现回到页面底部
十六、特殊符号
- 编写一些文本时，经常会遇到输入法无法输入的字符，如R（注册商标）、C(版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。
空格符：
©版权：©
®注册商标：®
<小于号：<
大于号>：>
和号：&
¥人民币：¥
°摄氏度：° - 大于号、小于号要与html代码区分开
十七、无序列表
- 、
- 注：ul和li必须是组合出现的，它们之间是不能有其他标签的，符合嵌套的规范（li內部可以有其他标签）
- type属性：改变前面标记的样式（一般都是用CSS去控制）
标签格式
- ( http://www.w3school.com.cn/tags/att_ul_type.asp )
- 普通无序列表：
<ul type="circle"><li>第一项li><li>第二项li>
ul>
- 复杂无序列表：
<ul><li><a href="#"><strong>第三项strong>a>li><li><a href="#">第四项a>li><li><a href="#">第五项a>li>
ul>
十八、有序列表
- 、
- 注:有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。一般用的比较少。
标签格式
( http://www.w3school.com.cn/tags/att_ol_type.asp )- 普通有序列表：
<ol><li>内容1li><li>内容2li><li>内容3li>
ol>
- 复杂有序列表：
<ol><li><a href="#"><strong>内容1strong>a>li><li><a href="#">内容2li><li><a href="#">内容3li>
ol>
十九、定义列表
- 列表项需要添加标题和对标题进行描述的内容
：定义术语或名词：对名词进行解释和描述
<dl><dt>HTMLdt><dd>超文本标记语言dd><dt>CSSdt><dd>层叠样式表dd><dt>JavaScriptdt><dd>网页脚本语言dd>
dl>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！