web前端入门1
1.html,css的概念
- html和css都是做网站的编程语言
- 代码进入浏览器进行解析,解析后就是网站
- 单个网页是html文件,多个网页组成网站
- 通过对网站代码的解读,html是结构,css是修饰
2.vs code编译器
- 全称为Visual Studio Code编译器
- 使用技巧:
Ctrl+S:保存
ctrl+a:全选
ctrl+z:撤销
ctrl+y:前进
shift+end:从头选中一行
shift+home:从尾部选中一行
shift+alt+↓:快速复制一行
alt+↑或↓:快速移动一行
tab:向后缩进
tab+shift:向前缩进
alt+鼠标左键:多光标
ctrl+d:选择相同元素的下一个
3.常见浏览器
- 五大常用浏览器中国区市场份额(截至2022年5月份)
谷歌浏览器(Chrome) 市场占比份额:36.82%
360浏览器 市场占比份额:23.17%
微软浏览器(Edge) 市场占比份额:14.97%
QQ浏览器 市场占比份额:7.28%
火狐浏览器(Firefox) 市场占比份额:6.23%
4.web前端核心技术
- html,css,javascript
5.html基本属性
- HTML 表示超文本标记语言(Hyper Text Markup Language)
- 超文本指代文本内容+非文本内容
- 标记即标签
6.html周期表
7.html初始代码
- 每个html文件都有的代码叫初始代码
- !+ tab :快速创建初始代码
8.html注释
- 注释格式为<! - - 注释内容 - ->
- 注释作用为把暂时不用的代码隐藏或对开发人员的提醒快速添加或删除
9.html语义化
- 语义化含义为根据网页中内容的结构,选择合适的HTML标签进行编写
- 优点:
- 1.在没有CSS的情况下,页面也能呈现出很好的内容结构
2.有利于SEO,让搜索引擎爬虫更好的理解网页
3.方便其他设备解析(如屏幕阅读器、盲人阅读器等)
4.便于团队开发与维护
10.标题
- 双标签实例
<h1></h1>...<h6></h6>
- 在一个网页中,h1标题最重要,并且一个.html文件中只能出现一次h1标签。
11.修饰标签
<strong></strong>、<em></em>
会对文本进行斜体,加粗- strong的强调性稍强,em的强调性稍弱
- em 显示为斜体, strong 显示为黑体
<sub></sub>
下标<sup></sup>
上标<del>,<ins>
删除文本、插入文本
12.图片标签与属性
- img 单标签
- src 引入图片的地址
- alt 当图片出现问题的时候,可以显示一段友好的提示文字
- title 提示信息
- width、height 图片的大小
13.文件的地址途径
- 相对途径与绝对途径
- 相对路径就是相对于当前文件的路径
- 绝对路径是指文件在硬盘上真正存在的路径
14.链接
- href属性:连接的地址
- target属性:可以改变链接打开的方式,默认情况下:在当前页面打开 _self 新窗口打开 _blank
- base->单标签:作用就是改变链接的默认行为的
15.跳转锚点
- #号 id属性id=“ ”
- #号 name属性name=“ ”(注意name属性加给的是a标签)
16.特殊符号
- &+字符
- 解决冲突用左右尖括号、添加多个空格的实现
17.无序列表与有序列表
- 列表最外层容器、列表项 (
<ul>
和<li>
必须是组合出现的,它们之间不能出现其他标签的) - type属性:改变前面标记的样式(一般是由CSS去控制)
<ol>
<li>
一般用的比较少,可以用无序列表来实现
18.定义列表
<dl>
定义列表<dt>
定义专业术语或名词<dd>
对名词进行解释和描述