HTML+CSS---进阶学习01

最新推荐文章于 2024-04-15 15:07:22 发布

不断进阶学习者

最新推荐文章于 2024-04-15 15:07:22 发布

阅读量144

点赞数

分类专栏： HTML+CSS 文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_44857287/article/details/108986146

版权

HTML+CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、三大核心语言

HTML（Hypertext Markup Language）超文本标记语言结构
CSS（Cascading Style Sheets）层叠样式表样式
JS（JavaScript）脚本语言行为，动作

1.后缀

.html 网页

.css 样式

.js 脚本

2.标签（标记，元素）

大部分都是成对出现的，也有单独出现的

由尖角号+关键字组成

成对出现的，前边的叫开始标签，后边的叫结束标签

单独出现的标签，叫空标签或者自闭合标签

标签上有自己的属性

3.属性


<h2 title='标题'>人物外貌编辑</h2>

位置：设置在开始标签里，关键词的后边

4.注释

html ：

css : /* 注释文本 */

快捷键： ctrl + /

二、基本结构

<!DOCTYPE html>
<!-- 声明文档： 告诉浏览器的解析器，该文档是一个html文件  不是一个标签，是一条声明语句-->
<html>
    <!-- 根标签： 所有标签都要放到html标签里 -->
<head>
    <!-- 头部容器 -->
    <meta charset="UTF-8">
    <!-- 
        设置编码格式
        常见的编码格式：
           GBK：国标库 
           gb2312 : 中文简体
           utf-8 : 万国码
    -->
    <title>hello world</title>
    <!-- 设置页面的标题 -->
</head>
<body>
    <!-- 主体 -->
<h2 title='标题'>人物外貌编辑</h2>
<p>穿着：总喜欢戴一个蓝帽子，上身穿一件带窟窿地白色背心，下穿一个所谓的“七分裤”，一双大皮鞋。
特点：一说话嘴老抽，他妈在梦里给他说是小时候掉冰窟窿里了，给冻成的（见《本山快乐营》）。
现居住地：象牙山。</p>

</body>
</html>

三、常用标签

1.块标签

特点：独占一行，可以设置宽高

h1 – h6 标题标签
- 注意：一个页面只能写一个h1标签，合理使用，有利于seo优化
p 段落
div 无语义，用来布局的容器，用来画大块
hr 分割线空标签

2.内联标签

特点：多个内联标签在一行显示，不能设置宽高

strong 加粗起强调作用
b 加粗
em 倾斜起强调作用
i 倾斜
span 无语义，用来布局，用来画小块
br 换行空标签
sub 定义下标文字
sup 定义上标文字
del 删除标签
a 超链接
- href属性：设置要跳转的页面地址
  - 跳转到网址
```
<a href="https://www.baidu.com" target="_blank">百度</a>
```
  - 跳转到本地的其他页面
```
 <a href="./3.图片标签.html">本地另一个页面</a>
```
  - 锚点链接（跳转到本页面的其他位置）
    - 首先给要跳转的地方设置id属性（id属性值是唯一的），再给a标签的href属性里设置 #加上id的值
```
  <a href="#html">html</a>
    <a href="#css">css</a>
    <a href="#js">js</a>
    <div id="html">html</div>
    <hr>
    <div id="css">css</div>
    <hr>
    <div id="js">js</div>
```
    - 跳转到另外一个页面的某个位置
      
      在当前页面a标签的href属性里设置另一页面的路径，再加上#id名
      
      id名就是另一个页面里要跳转的位置上设置的id属性
```
当前页面里：
 <a href="./4.anther.html#hei">跳转到anther</a>
 
 4.anther.html页面里：
  <div id="hei">嘿嘿嘿</div>
```
  - 下载文件
```
<a href="./1.哈哈.doc">下载doc文件</a>
<a href="./机密文件.txt">下载txt文件</a>
<a href="../zhaosi.png">下载图片</a>
```
  - 不知道跳转到哪先用#代替
- target: _self （默认，在当前窗口打开） _blank(在新窗口打开)

3.内联块标签

特点：多个内联块标签在一行显示，可以设置宽高

img 图片标签
- src 属性：用来引入图片的路径
- alt 属性：当图片路径错误或者找不到图片加载不出来的时候显示
- title属性：鼠标移入图片上的时候的提示信息
- width属性：设置图片的宽度
- height属性：设置图片的高度

四、引入文件的路径

1.绝对路径

从https://… 完整的网址
从盘符开始的路径 c:/ … (特别不推荐使用)

2.相对路径

当前文件夹直接文件名加后缀或者 ./ 文件名加后缀
下一级目录 ./文件夹的名字/文件名加后缀
上一级目录 …/
上上一级目录 …/…/

五、浏览器的内核

谷歌 chrome 内核： webkit – 》 13年 blink

火狐 Firefox 内核： gecko

微软 IE 内核： trident

欧朋 opera 内核： presto --》 webkit —> blink

苹果 safari 内核： webkit

六、拓展（了解）

七、什么是语义化？语义化的好处

使用合适的标签和属性来格式化文档，如：段落p 标题用h1-h6

好处:

如果css样式丢失，也能很好的显示页面
有利于seo优化
有利于团队的开发和维护
用户体验更好

八、vscode快捷键（了解）

ctrl + / 注释
shift+alt + 下箭头快速的向下复制一行
alt + 下箭头（alt + 上箭头）快速的切换两行的位置
ctrl + d 快速选中相同的关键词
alt + 鼠标点击使光标在多处选中
ctrl + shift + v 预览.md格式的文件
ctrl + f 查找
ctrl + h 查找替换
shift + alt + f 格式化

不断进阶学习者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS---进阶学习01

一、三大核心语言HTML（Hypertext Markup Language）超文本标记语言结构CSS（Cascading Style Sheets）层叠样式表样式JS（JavaScript）脚本语言行为，动作1.后缀.html 网页.css 样式.js 脚本2.标签（标记，元素）大部分都是成对出现的，也有单独出现的由尖角号+关键字组成成对出现的，前边的叫开始标签，后边的叫结束标签单独出现的标签，叫空标签或者自闭合标签
复制链接

扫一扫