这里写目录标题
一、HTML、CSS系列教程
拨云见日
1.HTML
2. CSS
3. 切图流程
4. PC企业站布局
5. PC游戏站布局
溯本求源
- 扩展HTML
- 扩展CSS
- HTML5新语法
- CSS3新语法
- 兼容与hack
巧夺天工
- 预编译CSS
- postcss
- CSS架构
- 高级功能
- CSS与JS交互
二、了解什么是HTML和CSS
1.是做网站的编程语言。一个网站由很多网页组成。网页 .html
2.新建一个txt文件,然后在该文件中添加html代码并保存,最后将文件扩展名改为“html”
3. 打开HBuilder编辑器,依次点击“文件”-“新建”-“html文件”,然后设置 HTML文件名和保存路径,点击“创建”
三、宇宙第一编译器VS Code
下载地址:https://code.visualstudio.com
投置:文件﹣>首速项﹣>设置(大小,是香换行 word wrap )创建文件、创建文件夹、重命名和删除
ctrl + S :保存
ctrl + a :全选
ctrl + x、ctrl + C 、 ctrl + V :剪切、复制、粘贴
ctrl +z、 ctrl + y :撤销、前进
shift + end :从头选中一行
shift + home :从尾部选中一行
shift + alt +↓ :快速复制一行
alt +↑或↓:快速移动一行
tab :向后缩进
tab + shift :向前缩进
四、chrome浏览器
五、深入了解网站开发
随着HTML 5和ECMAScript 6的正式发布,大量的前端业务逻辑
极大地增加了前端的代码量,前端代码的模块化、按需加载和
依赖管理势在必行,因此Web前端越来越被人们重视。第一阶段:需求分析
这一阶段是最基础的阶段。首先需要和客户沟通,了解客户需求,分析项目的可行性,撰写需求文档。分模块、分步骤进行规划,分析项目进度安排和所需要的成本。通过原型设计,更有效的还原需求,降低犯错概率,降低沟通成本。原型设计包括页面布局、页面逻辑流程、说明文档。
六、Web前端的三大核心技术
- HTML :结构
- CSS :样式
- JavaScript :行为
七、HTML基本结构与属性
HTML :超文本 、 标记 、语言
超文本 :文本内容 、非文本内容(图片 、视频 、音频)
标记 :<单词>
语言 :编程语言
标记也叫作标签
创建标签的快捷键 :单词 + tab键 → <单词>
标签是可以上下排列,也可以组合嵌套。
风蚀地貌
标签的属性 :来修饰标签的,设置当前标签的一些功能
八、HTML初始代码
每个HTML文件都有的代码,要符合HTML文件的规范写法。
意义
(1)把暂时不用的代码注释起来,方便以后使用。
(2)对开发人员进行提示。
快捷添加注释与删除注释
(1)ctrl + /
(2)shift + alt + a
九、HTML语义化
好处:
- 在没有CSS的情况下,页面也能呈现出很好的内容结构。
- 有利于SEO,让搜索引擎爬虫更好的理解网页。
- 方便其他设备解析(如屏幕阅读器、盲人阅读器)。
- 便于团队开发与维护。
十一、标题与段落
在一个网页中,h1标题最重要,并且一个.html文件中只能出现一次h1标签
h5、h6标签在网页中不常用
十二、文本修饰标签
强调->双标签:、
区别:
1.写法和展示效果是有区别的,一个加粗,一个斜体
2.strong的强调性更强,em的强调性较弱。
下标:<sub></sub>
上标:<sup></sup>
删除文本:<del></del>
插入文本:<ins></ins>
注:一般情况下,删除文本都是和插入文本配合使用的。
十三、图片标签与图片属性
img——>单标签 eg:<img src=“XXX.jpg”
src:引入图片的地址
alt:当图片出现问题的时候,可以显示一段友好的提示文字
title:提示信息
width:height:图片的大小
十四、引入文件的地址和路径
- a→双标签 :
href属性 :链接的地址。
target属性 :可以改变链接打开的方式,默认情况下:在当前页面打开 _self ;新窗口打开 _blank 。 - base→单标签 :
作用就是改变连接的默认行为的
十五、跳转链接
十六、跳转锚点
方法一 :#号 + id属性
方法二 :#号 + name属性
十七、特殊字符
1.1特殊符号
在编写一些文本的时候,经常会遇到输入法无法正常输入的情况,这个时候用html中的代码来表示这些特殊字符。
1.&+字符
2.解决冲突:左右尖括号,添加多个空格的实现
十八、无序列表
- 、
- 列表的最外层容器、列表项。(符合嵌套的规范)
- ul和li必须是组合出现的,他们之间是不能有其他标签的。
十九、有序列表
ol li 一般用的比较少,可以用无序列表来实现
有序列表用的非常少,经常用的是无序列表,无序列表可以去代替有序列表
二十、定义列表
dl dt dd 列表项需要添加标题和对标题进行描述的内容