初学HTML

这篇博客介绍了HTML和CSS的基础知识,包括HTML的语义化、CSS的新语法和预编译,以及如何使用VSCode和Chrome浏览器进行开发。内容涵盖了网页的基本结构、注释、跳转链接、特殊符号、列表标签等,并探讨了前端开发的职位和核心技术,如JavaScript。此外,还讲解了不同类型的布局和响应式设计,以及如何利用Bootstrap提升开发效率。
摘要由CSDN通过智能技术生成

一.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.&lt;&gt;&nbsp

十八、列表标签

ul 和 li 必须是组合出现的,他们之间是不能有其他标签的
type属性:改变前面标记的样式(一般都是用CSS去控制)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值