了解HTML
一.HTML、CSS系列之导学
1.1拨云见日
HTML、CSS、切图流程
PC企业站布局、PC游戏战布局
1.2溯本求源
HTML(扩展)、CSS(扩展)
HTML5、CSS3新语法
兼容与hack
1.3风生水起
弹性布局、网格布局、移动端布局、响应式布局、Bookstrap
1.4巧夺天工
预编译CSS(Less和Css)
postcss
CSS架构
高级功能
CSS与JS交互
二.什么是HTML和CSS
是做网站的编程语言。
浏览器把代码解析后的样子就是我们看到的网站。
如何看到网站的原始代码呢?通过鼠标右键选择查看网页源代码。
如何去写代码?写到哪里呢?
一个网站是由N多个网页组成的,每一个网页都是html文件
三.宇宙第一编译器VS Code
四.Chrome浏览器
谷歌浏览器(Google )是一款让您更快速、轻松且安全地使用网络的浏览器。
五.深入了解网站开发
1.1相关职位
六.web前端三大核心技术
HTML: 结构
CSS :样式
Java Script :行为(交互)
七.HTML基本结构与属性
1.1HTML的概念
超文本标记语言,标准通用标记语言下的一个应用。是网站制作必备的编程语言。
超文本:文本内容 + 非文本内容 ( 图片、视频、音频等 )
标记:<单词>
语言: 编程语言
标记也叫做标签
举例:
八.HTML初始代码
每一个html文件都需要添加初始代码,初始代码就是无论你写什么样的网页,这些代码都是要有的,这就是初始代码。
! + tab键 :快速键的创建html的初始代码
九.HTML的注释
1.1写法
注释代码,在浏览器看不见,只能在代码中看到注释的内容
<!—–注释的内容–—>
1.2意义
1.把暂时不用的代码注释起来,方便以后使用。
2.对开发人员进行提示
3.快捷添加注释与删除注释:
ctrl + /
shift + alt + a
十.HTML语义化
1.1概念
所谓HTML语义化指的是,根据网页中内容的结构,选择适合的HTML标签进行编写。
1.2好处
1在没有CSS的情况下,页面也能呈现出很好的内容结构
2有利于SEO,让搜索引擎爬虫更好的理解网页
3方便其它设备解析(如屏幕阅读器、盲人阅读器等)
4便于团队开发和维护
十一.标题与段落
标题->双标签:
…十二.文本修饰标签
区别:
1.写法和展示效果是由区别的,一个加粗、一个斜体
2.stong的强调性更强,em的强调性稍弱。
举例:
十三.图片标签与图片属性
img -> 单标签
src : 引入图片的地址
alt : 当图片出现问题 的时候,可以显示一段友好的文字
title:提示信息
width 、height:图片的大小
十四.引入文件的地址路径
相对路径:在路径中表示当前路径/在路径中表示上一级路径
十五.跳转链接
a - >双标签
href属性:链接的地址
target属性:可以改变链接打开的方式,默认情况下:
在当前页面打开 _self
新窗口打开 _blank
base -> 单标签 :作用就是改变链接的默认行为的。
十六、跳转锚点
实现一: #号+id属性
实现二:#号+name属性
十七、特殊符号
1.特殊符号
2.常见的特殊符号
3.用法
1.&+字符
2.解决冲突 左右尖括号、添加多个空格的实现
3.<;>; 
十八、列表标签
ul 和 li 必须是组合出现的,他们之间是不能有其他标签的
type属性:改变前面标记的样式(一般都是用CSS去控制)