资讯详情

HTML笔记

HTML初识

1.常用5个浏览器(理解)

浏览器 = 内核 外壳 shell

内核 = 渲染引擎(html css) js引擎(javascript)

浏览器 内核
IE Trident
Chrome 谷歌 Webkit—>Blink
FireFox 火狐 Gecko
Opera欧朋 Presto
Safari Webkit

2. 前端三要素

HTML: 网页结构- 有什么 （大小区域 ,图片 ,链接、音视频、文字)

CSS: 负责网页样式- 这些东西长什么样子（布局,文字大小，类型，颜色 ，宽高间距）

JS: 负责网页交互 数据渲染 —》行为

3.HTML语言

w3c联盟 HTML：超文本标记语言(HyperText Markup Language) 不是编程语言 叫标记语言

超： 超越 .txt 纯字符 不仅包括文本，还包括链接、图片、音频和视频，flash,动画

拿HTML语言文字-超文本文件 .html—>

规定了死亡-

写法:

标记由<包裹 一对 <标记名字TagName> </标记名字TagName>

<开始标记>文本内容/其他标记</结束标记> 

<a></a> a标签  a标签

  • 标记的默认属性出现在开始标记中>前面
  • 多个属性可以出现 每一个都被空间隔开 每对属性是由 属性名字=“属性值”
  • 属性的作用 起到功能作用 保存数据 描述标签
<a href="" target=""></a> <zjl year="40" height='173' gender="male"></zjl>     例子 

<zjl year="40" height='173' gender="male">/span> 文本内容+标记 </zjl>

由以上三部分组成的一个标签我们把它叫HTML元素

HTML文档

由HTML元素和CSS代码和JS代码组成的文档 .html

文档模板

  1. 新建一个.html文件
  2. 快捷键 !+回车 （动作快点）
<!DOCTYPE html>
不是标签 它是必不可少的文档声明 h5文档声明 告诉浏览器以哪种规则去解析此html文件
只能放在第一句

嵌套放置 （父子关系）

平行放置 (兄弟关系)

<html lang="en">  lang属性 en英文 默认语言是英文
</html>


<meta charset="UTF-8">
charset 字符集设置  用来设置解析网页的字符集 

ASCII   美国标准信息交换码  128个字符  2^7 = 128 
Unicode  2^8 = 256 
UTF-8   万国码字符集

国内:
GB2312 简体中文  
GBK    加入了对繁体的支持

1.书签

2.用户看

3.搜索引擎SEO

<title>京东购物-多快好省...</title>

常见的HTML标签的学习

1.文本相关的标签

网页的基本单位 px pixel 像素 默认的字体大小16px

:装几个字

b    bold粗 <b></b>
label      <label></label>

😄总结：样式相同 区别：b普通标签 label标签被我们叫语义化标签

标签 i /em

<i></i>
<em></em>

😄总结：样式相同 区别：i普通标签 em标签被我们叫语义化标签

u / ins

<u></u>
<ins></ins>

😄总结：样式相同 区别：u普通标签 ins标签被我们叫语义化标签

s/del

<s></s>
<del></del>

总结：样式相同 区别：s普通标签 del标签被我们叫语义化标签

p paragraph 段落

一般明显有换行的时候就是多个段落 由多个p元素包裹

装多行文字 
   <p>
    <b>国家卫健委新闻发言人 米锋</b> ：4月12日，全国&nbsp;&nbsp;&nbsp;本土现有重症病例首次降至100例以下，本土新增确诊病例10例，为3月11日以来单日最高，其中多数属聚集性病例。据世界卫生组织最新通报，全球累计死亡病例已超10万例，连续4日单日新增确诊病例超8万例。外防输入、内防反弹形势严峻，防控工作决不能放松。
   </p>

(语义化标签)

六级标题  从大到小
h1 ~ h6 h1一级标题 文字最大 加粗效果最明显

总结:

  1. 不用H3以下的标题 （阅读性差，SEO）
  2. h1在一个页面里有且只能有一个 (SEO)

img 单标签

<img src="" alt="">
src: 图片的链接地址 
width: 宽度
height:高度 只写一个 自动缩放的

  1. 网络的方式

    <img src="">
2.布局相关的标签

字符实体

HTML语言的保留字符 （特殊字符）

比如 < > 人民币符号 版权符号 空格

只能用在文字当中不 不能用在布局

什么是语义化？作用是什么?

语义化标签: h1 h6 em label…

: 合适的场景用合适的标签

  1. 当css不存在的时候，语义化标签会呈现清晰的结构，有较强的可读性
  2. 有利于搜索引擎优化 方便爬虫获取有效的信息 （例子:网站logo会用h1,h2）
  3. 方便机器阅读文档

常用的快捷键

!+enter 生成网页模板

快速生成标签 标签名+tab or 标签名+enter

快速复制上一行 shift+alt 上箭头

快速复制下一行 shift+alt 下箭头

emit语法

标签名*3

1.笔记软件的使用

.md 任何

标题

h1~h6 快捷键 # 一级标题 ## ### … / ctrl+i

插入表格

快捷键

ctrl+T / |姓名|年龄|生日|+enter

插入图片

方法1： 不能调整图片大小 ctrl+shift+i

方法2：改变图片大小

插入列表

有序列表 数字.+空格+enter 取消列表状态 继续回车把前面的序号删了就行

  1. 列表数据1
  2. 列表数据2

无序列表 + 主列表 小黑圆圈 子列表（空心圆）-

  • 无序列表数据1

    • 子列表的数据1
    • 之内的介绍费

  • 的收费计费

插入链接

复制网址到这里 / 手动敲出来

http://baidu.com

加粗 四个乘号 把内容写进两个的中间去

高亮 四个等号 把内容写进两个的中间去

表情 :表情名字:

😄

⭐️

🔽

👱

插入图片标签

插入网络图片

<img src="https://img14.360buyimg.com/mobilecms/s140x140_jfs/t1/115275/30/456/28210/5e8c78d5Ef238e935/4e7df5e0a9394582.jpg.webp">

引入本地图片

绝对路径

​ 根盘符\a\d\1.jpg

​ \和/都可以成功引入图片不过在我们写代码的时候最好还是一致 用/

​ ctrl+h 替换

​ 特点：与当前的html文件路径无关

相对路径

主要是从当前html文件出发如何找到那个图片

同级目录 ./

上一级…/

上一级的上一级…/…/

根目录 /

   <img src="./image/1.jpg" alt="">

图片相关属性

src: 图片路径
alt: 当图片加载不成功时的文字提示 
width:宽度
height:高度 
title: 鼠标移入文字提示

水平线标签 hr（了解）

<hr width="" align="" color="">
align:水平对齐方式 left/ right / center 
color:颜色

超链接标签 a anchor锚

作用：设置跳转到其他html文档

<a href="http://baidu.com"> 百度 </a>  文字链接
<a href="http://sina.com">
 <img src="">  图片链接
</a>
<a href="mailto:1621255538@qq.com">请联系我1621255538@qq.com</a>   邮箱链接 (了解)
<a href="a.zip">下载</a>  (了解)

  1. 超链接默认是以当前页的方式打开

相关属性

href: 设置打开页的地址

target: 设置超链接的打开方式

  • 在本页打开 _self (默认方式)
  • 在新页打开 _blank

base标签

​ base标签

​ href="" 设置a链接的统一地址

​ target="" 将界面的a链接统一设置成为新建页打开

链接到一个界面的某一个部分 (识别—》锚点)

1.在a链接href属性里定义锚点 （要连接的那个部分的名称）

规矩: 唯一标识 #锚点名 英文字母

2.把你的锚点设置到相应的跳转的部分里 id=“锚点名字”

    <a href="#first">西游记</a>
    <a href="#second">水浒传</a>
    <a href="#third">红楼梦</a>
    <a href="#forth">三国演义</a>

二：布局标签 （容器，盒子，区域）

大盒子 div

一般用来装大的图片，大段文字p,div ,span ,h1

<div></div>

小盒子 span

一般用来用来装特别小图标，几个文字

<span></span>

三：标签的分类

大致：块级元素 和 行内元素,行内块元素

  1. 默认宽度是父元素宽度100%，独成一行，以新的一行开始 (霸道)
  2. 高度取决于内容的高度

div,p,h1~h6,

  1. 默认宽高全部取决于自己的内容，设置宽高不起作用
  2. 并排放置，放不下的时候才会换行

span,em,i,label,a,…

  1. 默认的宽高也取决于内容 ，但是设置宽高起作用
  2. 并排放置 ，放不下的时候才会换行

img

注意：行内块这个类实际上属于行内这个类的

CSS入门

css: cascading style sheets 层叠样式表 （毫无逻辑） 网页的美容师

**作用:**样式+布局

1.引入CSS代码方式

行内引入

一般是将样式写在开始标签>左侧，通过一个style对象去引入

style=“属性名1:属性值1;属性名2:属性值2…”

<div  style="width:300px;height:300px;background-color:red"></div>      division

  • 结构不清晰，样式和结构写在一起，没有形成分离(w3c明确提出，结构，样式，行为相分离)
  • 代码冗余，重复 ，后期维护困难

**优点:**优先级高，可以覆盖外部和文件内部样式

文本内部引入

将css代码通过样式表()的方式嵌套在head标签内部

1.挑选元素 （css选择器）

2.加样式

<head>
   <style>
      //写css样式属性
   </style>
</head>

  • 没有彻底分离

  • 符合w3c提倡 ，一定程度上实现了结构与样式相分离
  • 代码结构清晰，冗余减小，后期维护相对容易

外部引入

把css样式代码写入一个.css文件内 ,通过一个link标签链接引入一个类型为stylesheets的css文件

这个link标签写到head标签内部去(规定)

.html .css

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- rel指明当前链接进来的文档类型 -->
    <link rel="stylesheet" href="./外部引入.css">
</head>

**优点：**结构和样式彻底分离 样式文件多次使用 后期也好维护

**缺点：**优先级低

讨论三种引入方式的优先级别

行内>文本内部>文本外部 (就近原则)

CSS基础选择器

选择器语法

选择器 { 
        
   
     属性名:属性值;
     属性名:属性值;
     属性名:属性值;
     属性名:属性值;
}

标签选择器

通过标签的名字去选择元素

TagName { 
        
    width:200px;
    height:200px;
}

类选择器

通过类名去挑选元素 （先给你要挑选的元素起名字 class=“类名” 小写字母+数字+大写字母+ -/_ 尽量不要数字开头）

    .three-ele { 
        
            font-size: 50px;
            color:skyblue;
        }
    <em>斜体标签</em>
    <em>斜体标签</em>
    <em  class="three-ele">斜体标签</em>
    <em>斜体标签</em>
    <em>斜体标签</em>
    <em  class="three-ele">斜体标签</em>

id选择器

通过id名字去挑选元素 并且挑选回来的元素只有一个(唯一性)

写法：给元素身上写一个id=“id名字”的属性 然后通过#id名字 {} 去挑选元素

全局选择器 *

挑选html文档里的所有元素 包括html和body在内

* { 
        
    
}

基础选择器的优先级(权重)分析

id选择器 100 > 类选择器 10 > 标签 1> *全局0

一：文本的相关属性

文字大小，文字类型，文字粗细，文字的倾斜，行高，文字下划线，文字中划线，颜色，缩进，水平对齐，垂直居中，字符间距

字体属性font

font: font-style  font-weight  font-size/line-height  font-family;
font-style:字体形态  normal 正常/ italic 斜体 
font-weight:字体粗细  100-900 数字  400 正常 >400粗 <400细  / 英文单词 400 相当于normal 默认值
bold 粗 相当于600  bolder  light  lighter(了解)
font-size:字体大小 px（掌握） / % / em / rem  (了解)

line-height 行高

font-family:字型  字体家族

建议：用css控制元素样式 不要用标签去实现

行高line-height

记忆：line-height=盒子高度时 使单行文本垂直居中

单位: px / 数值1.5 or 2 / %

1.5的含义是字体大小的1.5

% 的含义是字体大小的%倍

font-family字体家族

font-family:"楷体"，"微软雅黑"，"Times New Roman",Arial;
  1. 同时声明多个字体 每个字体以,隔开
  2. 中文字符或者几个英文单词组成的字体 要加“” or ‘’引起来，如果字体仅仅只有一个英文单词那就可以不用引起来
  3. 依次向下找 如果有则解析 如果没有就继续向下找
  4. 尽量不要出现中文汉字 以免乱码 你要写这个字型对应的英文名字或者unicode编码符号

文本修饰属性

text-decoration:overline上划线/underline下划线/ line-through中划线/none无线

缩进属性

text-indent: px / em / rem;
+ 向右缩进
- 向左缩进

字符间距

letter-spacing:px;

文本水平居中

text-align:left/right/center;

不光可以居中文字还可以居中图片，因为图片具有文本的特性

颜色表示法

屌丝程序员表示法： red yellow blue black

标准程序员表示法: 6位16进制 #ff1225

10进制 0-9 二进制 0-1 电信号 0 1 16进制 0-9 A-F 0最小值 F最大值 #000000~#fffffF

#000 黑色~ #fff白色  两位相同时可以简单写一个  #eeffaa --->#efa
具有艺术气息程序员:
rgb(0-255,0-255,0-255); red green blue

rgba(red,green,blue,alpha);alpha透明度 取值[0,1] 0完全透明 1完全不透明

二：列表系列

多条数据垂直放置

无序列表

<ul>
     <li>内容</li>
     <li>
         <div>
           <img src="">
         </div>
     </li>
     <li></li>
     <li></li>
     <li></li>
</ul>

总结：

  1. ul,li表现块类型 （宽度默认100% 独立成行）
  2. ul的直接子代只能是li元素

有序列表

<ol>
                <li>列表数据1</li>
                <li>列表数据2</li>
                <li>列表数据3</li>
                <li>列表数据4</li>
                <li>列表数据5</li>
</ol>

自定义列表

  <!-- 自定义列表 dl define list > 标题 dt + 列表项 dd  -->
        <dl>
            <dt>购物指南</dt>
            <dd>购物流程</dd>
            <dd>购物流程</dd>
            <dd>购物流程</dd>
            <dd>购物流程</dd>
        </dl>

css属性

取消列表前缀标识: list-style:none;

list-style-image 插入一张图片作为标识

list-style-image: url(./2.png);

三：表格标签

 <!--大盒子 table> 行tr >列 td  -->
    <table>
        <!-- 缺字段  单独行 tr> 列标题 th 
        thead:
        tbody:
        tfoot:
        -->
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>身高</th>
        </tr>
        <tr>
            <td>1001</td>
            <td>周杰伦</td>
            <td>40</td>
            <td>173</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>武松</td>
            <td>34</td>
            <td>183</td>
        </tr>
        <tr>
            <td>1003</td>
            <td>杨幂</td>
            <td>32</td>
            <td>168</td>
        </tr>
        <tr>
            <td>1004</td>
            <td>刘亦菲</td>
            <td>33</td>
            <td>167</td>
        </tr>
    </table>

特性：（要记）

  1. 表格设置宽高，内部单元格会根据内容多少自动分配大小
  2. 单元格当中的单元格 行内等高 列内等宽
  3. th里的文字默认居中加粗 td居左正常粗细

默认属性（了解）

border: 表格的边框  border="1" 1px宽度的边框 默认颜色是黑的
align:  表格水平对齐方式 left / right /center 
bgcolor:背景色
cellpadding:单元格内容与边框的距离 
cellspacing:单元格和单元格之间的距离

加在td身上的两个属性

rowspan:行合并 (从上到下) 写完属性删除响应被合并的行

colspan:列合并 (从左到右) 写完属性删除响应被合并的列

css属性（要记）

  table { 
        
              /* 边框合并 border-collapse:collapse */
              border-collapse: collapse;
        }

1.文字与文字垂直对齐

对不齐原因：是因为文本默认以基线对齐 （图片相当于是文字）

解决办法：

文本垂直对齐属性： h水平 v垂直

vertical-align:top顶线/middle中线/baseline基线（默认）/bottom底线 ;

2.表单标签

一般用于收集用户信息

表单 form > 表单控件 input(type)>文本框+复选框+单选框+文本域+文件上传域+提交按钮+下拉列表

 type:
             1. text 文本框 鼠标点击进去 光标闪烁 聚焦状态 
             输入完毕  离焦状态 
             2. password 密码框 
             3. radio  单选框
             4. checkbox 复选框
             5. file   上传文件
             6. 按钮组
                submit 专用的提交数据 
                reset   重置按钮
                button  普通按钮

        
        下拉列表 select > option 
        文字上传域 textarea 
        label for="id名字"用于和表单控件元素进行绑定(必须用id绑定)
        点击label盒子自动聚焦文本框

表单控件元素的属性

name: 提交到后台数据的键名（属性名）

value:提交到后台的数据的键值(用户输入的内容)

表单form身上属性

action:设置处理此表单数据的后台地址

  1. GET(默认提交方式)

  2. POST

总结:

相同点：都可以用于提交数据

区别:

  1. GET提交是将提交的数据以参数的方式拼接到地址栏地址的后面(? &)

    POST提交的数据保存在请求的form data里

  2. GET能提交的数据量小 POST能提交的数据量大

  3. GET适合于提交不敏感数据 例如 网站查询 POST提交敏感数据 例如：登录注册

  4. GET常用于向后台获取数据 POST常用于传递数据

辅助验证属性

​ 属性名=“属性值” 逻辑属性 true false

​ required 必填项 如果没填会阻断提交

​ readonly 只读属性

​ disabled 禁用

​ abled 不禁用，可以用的

​ checked 单选框，复选框的 被勾选

​ selected 下拉列表选项

​ size 设置下拉列表项显示的个数

​ maxlength 设置当前输入的字符串的最大长度

​ minlength

​ placeholder 设置默认的文本提示

二：布局第一大核心 盒模型

盒模型是描述网页中盒子的组成部分的规则

盒模型 = 边框(border)+外边距(margin)+内边距(padding)+ 有效内容(width,height)

边框border(分界线)

border:边宽border-width  边型 border-style  边色;
边型:solid实线 / dashed 虚线/ dotted小圆点/ double双实线


            /* border:1px solid red; */
            /* border-top:1px solid red; border-left:2px dashed deeppink; border-right:3px dotted skyblue; border-bottom: 4px double #000; */
            /* border-width:2px 4px 6px 10px; */
            /* 顺时针方向 上右下左 */
            border-width:0px 1px 0px 1px;
            border-style:solid dashed dotted double;
            border-color:red yellow skyblue tomato;

应用：

小三角形

.a { 
        
            width: 0px;
            height: 0px;
            border-top:10px solid transparent; 透明色
            border-left:10px solid transparent;
            border-bottom:10px solid yellow;
            border-right:10px solid transparent;
        }
    </style>
</head>
<body>
    <div class="a"></div>

盒模型

盒模型组成 = 有效内容(width,height) + 内边距padding + 边框border + 外边距margin

可视区域 = 有效内容(width,height) + 内边距padding + 边框border (内盒模型)

border边框部分

边框撑大盒模型，如果设置了边框那么需要在width,height做内减

padding内边距

功能：设置内容与边界的距离(内容位置移动)

边框撑大盒模型，如果设置了边框那么需要在width,height做内减

内边距不能放置内容，但是可以加背景色，不能负值

width宽度,height高度

width: px;%;auto

height: px;%;auto

% 取父元素值的%作为自己有效内容的宽高 (看父盒子是否宽高度！！！！！！！)

     /* 取到了浏览器窗口的高度 */
        html { 
        
            height: 100%;
        }
        body { 
        
            height: 100%;
        }

        .a { 
        
            /* width: 200px; height: 200px; */
            width: 30%;
            height: 40%;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <!-- px/%/auto -->
    <div class="a"></div>

  1. 不要写b盒子的宽度 让b盒子的宽度为auto 针对占满的情况
  2. calc(80% - 40px) 计算方法 兼容性比较差 40px内边距 运算符左右两侧必须有空格

外边距margin

功能: 1.外边距可以移动盒子 2.可以设置盒子与盒子之间的距离

总结：

  1. 上左外边距使盒子移动（下，右） 右外不会使盒子发生位置移动
  2. 外边距不添加背景

3.外边距可以设置负值 正值是距离越来越远 负值是越来越近

应用：

盒子在父盒子水平方向上居中

margin: 0 auto; 上下外边距为0  左右值auto

外边距塌陷(合并)问题(块类型元素)

父子嵌套塌陷

**描述：**当父元素有上外边距时，子元素在设置上外边距时会出现一个取两个值较大的那个值作为最终的外边距 ，如果父元素本身没有上外边距此时给子元素设置上外边距会带着父盒子一起向下移动

表象：浏览器在解析时误会你设置的上外边距就是父盒子的上外边距

实质：BFC规则(块级上下文) 垂直方向是上嵌套的两个盒子外边距会合并(共用了一段公共区域)

1.不要让浏览器误会这段距离属于公共区域

(1)给父盒子加1px上外边框 border-top:1px solid #fff;(分隔)

(2)给父盒子加1px上内边距 padding-top:1px;(分隔)

(3)给父元素身上+overflow:hidden(触发BFC里私有块级作用域) 让这个盒子成为一个密闭区域 外部

不影响内部 内部不影响外部

兄弟平行上下塌陷

两个盒子设置上面盒子的下外边距和下面盒子的上外边距会取其中较大值作为最终的边距 相同时取其中一个

**原因：**两个盒子共用一段外边距

:

  1. 避免 （写在盒子身上）
  2. 给这两个盒子分别嵌套一个父盒子 这个父盒子身上写overflow:hidden

选择器进阶

后代选择器

E F { 
        
    
}
匹配的是E的子代F元素

子代选择器

E > F { 
        }
匹配的是E元素的直接子代F

相邻选择器

E + F{ 
        }
匹配的是E元素紧紧相邻（下一个）的那个类型为F的兄弟元素

兄弟选择器

E ~ F { 
        }
匹配的是E元素相邻的符合F类型的所有兄弟元素

群组选择器（并集选择器）

E,F,D,G { 
        } 
匹配的是E和F和D和G类型的所有元素

交集选择器

EF{ 
        }
匹配的是既是E类型又符合F类型的元素

伪类链接选择器

:link { 
        } 匹配的是没被访问的a链接 :visited { 
        } 匹配的是已经被访问完毕的a链接 :hover { 
        } 匹配的是鼠标移入的a链接 :active { 
        } 匹配的是当前被点击的a链接

元素的分类和转换

大致分为：行内，块级，行内块类型

display:block 显示为块类型 /inline 行内/inline-block 行内块/none 不显示，隐藏

(inline)

(1)默认宽高取决于内容的宽高

(2)并排 直到放不下才会换行

(3)设置上下外边距和宽高不起作用，但是设置左右外边距和所有内边距都有效果 ，行高属性不撑开盒子

(block)

(1)默认宽度是父盒子的100%,默认的高度取决于内容高度

(2)不并排 独立成行 以新行开始

(3)设置所有盒模型属性都可以起

标签： dd250gb160二极管模块

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台