学习笔记 -HTML- 基础

胖头鱼馒头
99 阅读3分钟

元素、标签

元素之间的的关系

父元素、子元素、兄弟元素、后代元素、祖先元素

标签类型

  • 双标签：html、head
  • 单标签：img

元素

  • ul:无序列表
  • ol：有序列表
  • stong: 文字加粗
  • title 鼠标移上去会显示title
  • p 段落(paragraph)：元素会自动在其前后创建一些空白。
  • meta：设置网页字符编码，让浏览器更精准的显示每一个文字，不设置或设置错误会导致乱码
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jingdong</title>
    </head>
  • style 样式
  • link 1.引入外部资源(style、)
  • code 代码,等宽字体
  • br 换行(break)。很少用,一般用div
  • hr 分割线。很少用,一般用div+style
  • span
  1. 默认情况下，跟普通文本没有区别
  2. 用于区分特殊文本，比如显示一些关键词
    我是一段文本
    <span class="redText">
        我也是一段文本
    </span>
  • div 用于区分，方便定义
    <style>
        .div1 {
            float: left;
        }

        .div2 {
            float: right;
        }
    </style>
    
    <div class="div1">
        <h1>hahaha</h1>
        <p>kkkkkkkkkkkkkkk</p>
    </div>
    
    <div class="div2">
        <h1>hehhehe</h1>
        <p>kkkkkkkkkkkkkkk</p>
    </div>
  • a 定义超链接，用于打开新的url
  1. _blank 点击打开新的标签页
  2. _self 自身打开标签页 默认
   <a href="http://wwww.baidu.com" target="_self">百度</a>
   <a href="http://wwww.baidu.com" target="_blank">百度</a>

http 是协议头，不能少

  • iframe 嵌套网页
<body>

    <iframe src="http://wwww.baidu.com" frameborder="0"></iframe>
    <iframe src="http://wwww.taobao.com" frameborder="0"></iframe>
</body>

tips

元素是不区分大小写的 ：

a + img

<a href="https://www.baidu.com">
       <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</a>

a 实现下载功能

        //下载zip
        <a href="https://www.GitHub.com/rifkit.zip">
            下载GitHub项目
        </a>
        
        <发送邮件
        <a href="mailto:99506@qq.com">send email</a>
        下载网络资源
        <a href="ed2k://khkj...">ed2k</a>
        下载迅雷资源
        <a href="thunder://khkj...">thunder</a>

a标签的锚点链接

使用标签使用 id 属性，配合 a 标签，可以使页面移动到指定位置

        <a href="#id_title1">id_title1</a>
        <a href="#id_title2">id_title1</a>
        <a href="#id_title3">id_title2</a>

        <h1 id="id_title1">title1</h1>
        ...
        ...
        ...

        <h1 id="id_title2">title2</h1>
        ...
        ...
        ...
 
        <h1 id="id_title3">title3</h1>
        ...
        ...
        ...

伪链接

        <!-- # 会跳到顶部/ -->
        <a href="#">伪链接</a>

        <!-- 伪链接 -->
        <a href="javascript: alert('hello world')">弹窗0</a>
        <a href="" onclick="alert('hello world')">弹窗1</a>

嵌套iframe中的a标签

    1. _parent 在iframe所在父的页面打开
   <a href="https://www.baidu.com/" target="_parent">taobao</a>
    1. _top 在最外面的iframe所在的页面打开 (iframe 又嵌套 iframe)
   <a href="https://www.baidu.com/" target="_top">taobao</a>
    1. _name 在具体iframe中打开（ifrmae 指定跳转）
// 在名字为 bbb 的iframe中打开
   <a href="https://www.baidu.com/" target="bbb">taobao</a>

a标签和base结合使用

base抽取共同的部分，简化书写

 <base href="https://www.baidu.com" target="_blank">
 <a href="/s?wd=abc" >baidu</a>
 
 == 等效于
 
 <a href="https://www.baidu.com/s?wd=abc" target="_blank>baidu</a>

元素的属性

<!--     
   元素属性
   <开始标签 属性名="" 属性名="">
   内容
   <结束标签>
-->
eg:
<body>
    <img src="https://pics5.baid" alt="haha">
</body>

特殊属性

全局属性

  1. class
<div class="box1">
    <img src="https://pics5.baidu.com/9" alt="haha">
</div>
  1. id
  2. charset 字符编码

拓展-->字符编码：将字符按照一定规则编码，在浏览器解析的时候，按照这个规则解码.一般是 UTF-8 编码

  1. alt 图片的placehold，是img元素必须的属性
  2. img之width、height 不常用，默认单位是px(像素)
  3. href 超链接

私有属性

  1. src：img特有,分远程路径和相对路径
  • . 当前目录
  • .. 上一层目录
    <p>远程路径</p>
    <img src="https://m.360buyimg.com/babel/jfs/t1/129921/24/12170/239429/5f845067E8ac3c034/b77c4562a7b1f7d8.jpg.webp" alt="">
    <p>相对路径 local image</p>
    <img src="../img/lala.png" alt="">
  1. lang：指定语言类型。
<html lang="en">

其他

SEO 优化 search engine optimization）搜索引擎优化

  • h元素有助于SEO优化，促进关键词排名，易被搜索引擎存入数据库
  • 建议一个网页最多只有一个 h1 元素
  • 不能乱用：不仅不会给网站带来的好权重、被搜索引擎认为作弊

web常用图片格式

  • png：静态图片，支持透明
  • jpg（->jpeg）：静态图片，不支持透明
  • webp：和jpg差不多，但是远程地址时，传输时间会更快
  • gif：动图

px像素pixel

图像显示的最小单位

em 字符

2em 代表两个字符

字符实体

  1. & nbsp； 占位符
<p>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中新网青岛10月14日电 (记者 胡耀杰)青岛市政府办公厅副主任陈万胜今日通报称，截至10月14日9时30分，青岛已采样7502720份开展新冠病毒核酸检测，已出结果4064119份，除已公布的确诊病例和无症状感染者外，未发现新的阳性样本。
</p>

tips lt: 小于符号（less than） gt：大于符号（grand than）

avatar
文章
阅读
粉丝