HTML+CSS---进阶学习01

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

六、拓展(了解)

代码 效果 描述
&lt < 小于号或显示标记
&gt > 大于号或显示标记
&amp & 可用于显示其它特殊字符
&reg ® 已注册
&copy © 版权
&trade ™ 商标
&nbsp 不断行的空白

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

使用合适的标签和属性来格式化文档,如:段落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
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值