html css 笔记

01_浏览器相关知识

五大主流浏览器:

Chrome Safari IE Firefox Opera (拥有自己的内核)

四大内核:

webkit Trident Gecko blink.

02_网页相关知识

构成

网址 网站 网页

网页标准:

结构 表现 行为 分别对应 HTML CSS JavaScript

03_HTML简介

HTML是什么

译为:标记语言
超文本:比普通的文本信息含量更多

04_HTML初体验

保存:Ctrl+S
后缀:.html
程序员写的叫源代码
滚动效果标签:

 

效果:
滚动

05_HTML标签

标签又称元素
<>起始标签 < />结束标签 中间为标签体
输入框(单标签)
标签可以嵌套
可以使用tab键缩进
输入框效果:

06_HTML初体验

属性名+属性值
不同标签能写的属性不同
标签里不要出现同名属性
一个标签里的属性不能重复
有些特殊属性没有属性名只有属性值 如:
效果:


其他标签属性演示:
滚动一次

07_HTML基本结构

基本结构如下

	 
			
			
			
	

标题

08_HTML注释

注释作用

为了让自己或者同事以后能看懂代码
解释说明代码
增加代码可读性

注释代码


注:注释不能嵌套

注释的额外功能

使某些代码暂时不运行

注释快捷键

ctrl+/

09_HTML文档声明

文档声明的作用

告诉网页用的什么版本的语言
不同版本有不同的文档声明写法
旧的文档声明写法去W3C官网查(了解即可)

HTML5的文档声明写法


h5文档声明必须放在第一行且放在html标签的外侧

010_HTML字符编码

编码与解码

编码:将文本对应字符集转换成机器语言
解码:将机器语言对应字符集转换回文本
编码一般默认为UTF-8编码
为了防止浏览器出现问题可加入

  
    

编码
ASCLL编码

包含 大写字母 小写字母 数字 一些符号 共计128个

ISO 8859-1

在ASCLL基础上扩充一些希腊字符 共计256个

GB2312

GB:国标
继续扩充 收录6763个常用汉字 682个字符

GBK

K:扩充
收录汉字符号共计20000+ 支持繁体中文

UTF-8

万国码
包含世界上所有语言的 所有文字与符号
很常用

编码原则
原则1

存储时 务必采用合适的字符编码
否则 无法存储 数据会丢失

原则2

存储时采用的哪种方式编码 读取时就必须采用相同方式解码
否则数据能呈现 但数据错乱(乱码)

011_HTML设置语言

主要作用

让浏览器显示对应的翻译提示
有利于搜索引擎优化

具体写法

 lang="zh-CN"

扩展:
第一种写法:语言-国家/地区
第二种写法:语言-具体种类(不推荐使用)

012_HTML标准结构

结构快捷键

英文!+enter

剪切快捷键

ctrl+shift+k 快速剪切

配置网页图标后缀

.ico

013_HTML开发者文档

优质网站

W3c
W3school
MDN (最常用)

014_HTML排版标签

标题标签

一级标题 标题共6级
一级标题最好只写一个
h1到h6不能互相嵌套

段落标签


p标签不能嵌套 h标签 p标签 div

套入盒子

不打断文本回车快捷键

ctrl+enter

015_HTML语义化标签

概念

特定的标签表达特定的含义

原则

标签默认的效果不重要语义最重要

语义化的好处

代码的可读性强
有利于SEO(搜索引擎优化)
方便设备解析(屏幕阅读器,盲人阅读器)

016_HTML块级元素与行级元素

快速向下复制快捷键

alt+shift+↓

块级元素

独占一行的元素

行内元素

只占自己一小部分地方的元素

规则

  1. 块级元素中几乎什么都能写(块级元素,行级元素)
  2. 行内元素里能写行内元素 但不能写块级元素
  3. h1到h6不能嵌套
  4. p标签中不能写块级元素

marquee标签废除的原因

设计初衷是想要动画效果 但是如今已经有css可以实现动画效果 所以过时了

017_HTML常用的文本标签

  1. 用于包裹词汇 短语等
  2. 通常写在排版标签里面
  3. 排版标签更宏观(大段的文字),文本标签更微观(词汇,短语)[[]]
  4. 文本标签通常都是行内元素

常用的

  • em 要着重阅读的内容 双标签
  • strong 十分重要的内容(语气比em要强) 双标签
  • span 没有语义,用于包裹短语的通用容器 双标签

018_HTML不常用的文本标签

  • cite 作品标题 双
  • dfn 特殊术语或专属名词 双
  • del与ins 删除的文本与插入的文字 双
  • sub与sup 下标文字与上标文字 双
  • code 一段代码 双
  • samp 从正常的上下午中,将某些内容提取出来,例如:标识设备输出 双
  • kbd 键盘文本,表示文本是通过键盘输入的,经常在与计算机相关的手册中 双
  • abbr 缩写,最好配合上title属性 双
  • bdo 更改文本方向,要配合dir属性,可选值:ltr(默认值),rtl 双
  • var 标记变量,可以与code标签一起使用 双
  • small 附属细则,例如:包括版权,法律文本,——很少使用 双
  • b 摘要中的关键字,评论中的产品名称——很少使用 双
  • i 本意是:任务的思想活动,所说的话等等。现在多用于:呈现字体图标 双
  • u 与正常内容有反差文本,例如:错的单词,不合适的描述等——很少使用 双
  • q 短引用——很少使用 双
  • blockquote 长引用——很少使用 双 块级元素
  • address 地址信息 双 块级元素
  • br 分行 单
  • hr 分割线 单

HTML标签太多了! 记住重要的 语义感强的就行

019_HTML图片标签

基本使用

img 图片 单
常用属性
arc:图片路径
alt图片描述
width:图片宽度
height:图片高度
单位:px
尽量不同时修改图片宽高,可能会导致失真


alt属性作用:

  • 搜索引擎通过alt属性,得知图片内容——最主要的作用
  • 当图片无法显示的时候,有些浏览器会呈现alt属性的值
  • 盲人阅读器会阅读alt属性的值

020_HTML相对路径与绝对路径

相对路径

写下程序不能随便改文件位置,否则位置发生变化,程序运行失败


./ 当前位置
上一级加 . ./
下一级加/

绝对路径

本地绝对路径(几乎不用)

最大特点:从盘符出发
盘符名后加“:”
最大缺点:不方便他人使用代码 不能换设备

网络绝对路径

网址对应的必须是一个图片
防盗链:不允许他人使用他的图片

整个界面快捷键

ctrl+shift+“+” 整个界面放大

021_常见图片格式

jpg格式:
  • 概述:扩展名为.jpg或.jpeg,是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)。
  • 主要特点:支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图.
  • 使用场景:对图片细节没有极高要求的场景,例如:网站的产品宣传图等。–该格式网页中很常见。
png格式:
  • 概述:扩展名为.png,是一种无损的压缩格式,能够更高质量的保存图片。
  • 主要特点:支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
  • 使用场景:①想让图片有透明背景;②想更高质量的呈现图片;例如:公司logo图、重要配图等。
bmp格式:
  • 概述:扩展名为.bmp,不进行压缩的一种格式,在最大程度上保留图片更多的细节。
  • 主要特点:支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
  • 使用场景:对图片细节要求极高的场景,例如:一些大型游戏中的图片。(网页中很少使用)
gif格式
  • 概述:扩展名为.gif,仅支持256种颜色,色彩呈现不是很完整。
  • 主要特点:支持的颜色较少、支持简单透明背景、支持动态图。
  • 使用场景:网页中的动态图片。
webp格式
  • 概述:扩展名为.webp,谷歌推出的一种格式,专门用来在网页中呈现图片。
  • 主要特点:具备上述几种格式的优点,但兼容性不太好,一旦使用务必要解决兼容性问题。
  • 使用场景:网页中的各种图片。
base64格式
  • 1.本质:一串特殊的文本,要通过浏览器打开,传统看图应用通常无法打开。
  • 2.原理:把图片进行base64编码,形成一串文本。
  • 3.如何生成:靠一些工具或网站。
  • 4.如何使用:直接作为img标签的src属性的值即可,并且不受文件位置的影响。
  • 5.使用场景:一些较小的图片,或者需要和网页一起加载的图片。

022_超链接_跳转页面

主要作用:

从当前页面进行跳转

超链接基本知识

标签名

`

常用属性

href: 要跳转到的具体位置
target:跳转时如何打开页面,常用值如下;
_self:在本页签中打开
_blank:在新页签中打开

跳转到页面

<!-- 跳转其他网页-->
去京东
<!--跳转本地网页-->
去看排版标签

注意:

1.代码中的多个空格、多个回车,都会被浏览器解析成一个空格!
2.虽然a是行内元素,但a元素可以包裹除它自身外的任何元素!

023_超链接_跳转文件

跳转到文件

<!-- 浏览器能直接打开的文件-->
看小电   影

看小    姐姐

   点我一夜暴富

<!--浏览器不能打开的文件,会自动触发下载-->
内部   资源

<!--强制触发下载-->
下载小电影


注意1:若浏览器无法打开文件,则会引导用户下载。
注意2:若想强制触发下载,请使用download属性,属性值即为下载文件的名称。

024_超链接_跳转锚点

什么是锚点

网页中的标记点

具体使用方式

第一步:设置锚点

<!-- 第一种方式:a标签配合name属性-->

<!-- 第二种方式:其他标签配合id属性-->

我是一个位置


注意点:

  1. 具有href 属性的a标签是超链接,具有name属性的a标签是锚点。
  2. name和id都是区分大小写的,且id 最好别是数字开头。

第二步:跳转锚点

<!--跳转到test1锚点-->
去test1锚点
<!-- 跳到本页面顶部 -->
回到顶部
<!-- 跳转到其他页面锚点-->
去demo.html页面的test1锚点
<!-- 刷新本页面-->
刷新本页面
<!-- 执行一段js,如果还不知道执行什么,可以留空,javascript:;-->
点我弹窗

025_超链接_跳转锚点

通过a标签可以换起应用程序

<!-- 唤起设备拨号-->
邮件联系
<!--唤起设备发送短信-->
短信联系

026_超文本的真正含义

超文本:是一种组织信息的方式,通过超链接将不同空间的文字、图片、等各种信息组织在一起,能从当前阅读的内容,跳转到超链接所指向的内容。


内容:页面 文件 锚点 应用、

027_列表

有序列表(Ordered list)


    无序列表(Unordered list)

      自定义列表(Definition List)


      1. 有序
      2. 有序

      • 无序
      • 无序

      028_列表_注意事项

      有序列表

      概念:有顺序或侧重顺序的列表

      要把大象放冰箱总共分几步

      1. 把冰箱门打开
      2. 把大象放进去
      3. 把冰箱门关上

      无序列表

      概念:无顺序或不侧重顺序的列表

      我想去的几个城市

      • 成都
      • 上海
      • 西安
      • 武汉

      列表嵌套

      概念:列表中的某项内容,又包含一个列表(注意:嵌套时,请务必把解构写完整)。

      我想去的几个城市

      • 成都
      • 上海
      • 西安
      • 武汉

      注意:li标签最好写在ul或ol中,不要单独使用。

      自定义列表

      1.概念:所谓自定义列表,就是一个包含术语名称以及术语描述的列表。
      2.一个d1就是一个自定义列表,一个dt就是一个术语名称,一个dd就是术语描述(可以有多个)。

      如何高效的学习?

      做好笔记
      笔记是我们以后复习的一个抓手
      笔记可以是电子版,也可以是纸 质版
      多加练习
      只有敲出来的代码,才是自己的
      别怕出错
      错很正常,改正后并记住,就是 经验

      029_表格_基本结构

      结构

      一个完整的表格由:表格标题 表格头部 表格主体 表格脚注 四部分组成

      涉及到的标签

      table:表格
      caption:表格标题
      thead:表格头部
      tbody:表格主体
      tfoot:表格脚注
      tr:每一行
      tr,td:每一个单元格(备注: 表格头部中用th,表格主体 表格脚注中用:td

      030_表格_常用属性

      table

      表格 双标签

      • width:设置表格宽度
      • height:设置表格最小高度,表格最终高度可能比设置的值大
      • border:设置表格边框的宽度
      • cellspacing:设置单元格之间的间距

      thead

      表格头部 双标签

      • height:设置表格头部高度
      • align:设置单元格的水平对齐方式,可选值如下
      1. left 左对齐
      2. center 中间对齐
      3. eight 右边对齐
      • valign:设置单元格的垂直对齐方式,可选值如下
      1. top 顶部对齐
      2. middle 中间对齐
      3. bottom 底部对齐

      tbody

      表格主体 双标签
      常用属性与thead相同

      tr

      行 双标签
      常用属性与thead相同

      tfoot

      表格脚注 双标签
      常用属性与thead相同

      td

      普通单元格 双标签

      • width:设置单元格的宽度,同列所有单元格全都受影响
      • height:设置单元格的高度,同行所有单元格全都受影响
      • align:设置单元格的水平对齐方式
      • valign:设置单元格的垂直对齐方式
      • rowspan:指定要跨的行数
      • colspan:指定要跨的列数

      th

      表格单元格 双标签
      常用属性与td相同


      注意:
      1.

      元素的border 属性可以控制表格边框,但border值的大小,并不控制单元格边框的宽度。
      2.给某个th或td设置了宽度之后,他们所在的那一列的宽度就确定了。
      3.给某个th或td设置了高度之后,他们所在的那一行的高度就确定了。

      031_表格_跨行与跨列

      • rowspan:指定要跨的行数
      • colspan:指定要跨的列数

      032_补充几个常用的标签

      br:换行 单标签
      hr:分隔 单标签
      pre:按原文显示(一般用于在页面内嵌入大段代码)双标签


      注意:
      1.不要用
      来增加文本之间的行间隔,应使后面即将学到的CSS margin 属性。
      2.


      的语义是分隔,如果不想要语义,只是想画一条水平线,那么应当使用CSS完成。

      033_表单_基础结构

      form

      表单 双标签

      • acyion:用于指定表单的提交地址(需要与后端人员沟通后确定)
      • target:用于控制表单提交后,如何打开页面 常用值如下
      1. -self:在窗口打开_
      2. _blank:在新窗口打开_
      • method:用于控制表单的提交方式

      input

      输入框 单标签

      • type:设置输入框的类型,目前用到的值是text,表示普通文本
      • name:用于指定提交数据的名字,(需要与后端人员沟通后确定)

      button

      按钮 双标签


      示例:

      034_表单_文本框与密码框

      文本输入框


      常用属性如下:

      • name:数据的名称
      • value:输入框的默认输入值
      • maxlength:输入框最大可输入长度

      密码输入框


      常用属性如下:

      • name数据的名称
      • value:输入框的默认输入值(一般不用,无意义)
      • maxlength:输入框最大可输入长度

      单选框

      常用属性如下:

      • name 属性:数据的名称,注意:想要单选效果,多个radio的name属性值要保持一致。
      • value 属性:提交的数据值。
      • checked属性:让该单选按钮默认选中。

      复选框

      吸烟
      喝酒
      烫头
      

      常用属性如下:

      • name 属性:数据的名称。
      • value 属性:提交的数据值。
      • checked 属性:让该复选框默认选中。

      影藏域

      
      
      • 用户不可见的一个输入区域,
      • 作用是:提交表单的时候,携带一些固定的数据。
      • name属性:指定数据的名称。
      • value 属性:指定的是真正提交的数据。

      提交按钮

      
      

      注意:

      1. button 不要指定name 属性
      2. input 标签编写的按钮,使用value 属性指定按钮文字。

      普通按钮

      普通按钮
      

      注意点:
      普通按钮的type值为button,若不写type值是submit会引起表单的提交。

      文本域

      
      

      常用值如下:

      • rows 属性:指定默认显示的行数,会影响文本域的高度。
      • cols 属性:指定默认显示的列数,会影响文本域的宽度。
      • 不能编写type属性,其他属性,与普通文本输入框一致。

      下拉框

      select name="from">
      
      
      

      常用属性及注意事项:

      • name 属性:指定数据的名称。
      • option 标签设置value 属性,如果没有value属性,提交的数据是option中间的文字;如果设置了value 属性,提交的数据就是value的值(建议设置value属性)
      • option 标签设置了selected 属性,表示默认选中

      禁用表单控件

      • 表单控件的标签设置disable既可禁用表单控件
      • input tsextarea button select option都可以设置disable属性

      label标签

      label标签可与表单控件相关联,关联之后点击文字,与之对应的表单控件就会获取焦点。


      两种与label关联方式如下:

      1. 让label标签的for 属性的值等于表单控件的id。
      2. 把表单控件套在labe1标签的里面。

      fieldset 与legend 的使用

      fieldset 可以为表单控件分组、legend标签是分组的标题。

      主要信息

      性别:

      035_框架标签

      iframe

      双标签
      功能和语义:框架(在网页中嵌入其他文件)
      属性:

      • name:框架名字 可以写target属性配合
      • width:框架的宽
      • height:框架的高度
      • frameborder:是否显示边框 值:0或1

      iframe 标签的实际应用:

      1. 在网页中嵌入广告。
      2. 与超链接或表单的target配合,展示不同的内容。

      036_HTML实体

      在HTML中我们可以用一种特殊的形式的内容,来表示某个符号,这种特殊形式的内容,就是HTML实体。比如小于号<用于定义HTML标签的开始。如果我们希望浏览器正确地显示这些字符,我们必须在HTML 源码中插入字符实体。
      字符实体由三部分组成:一个&和一个实体名称(或者一个#和一个实体编号),最后加上一个分号;

      常用字符实体总结

      • 空格    
      • 小于号 < <
      • 大于号> >
      • 和号 & &
      • ¥ ¥
      • 版权 © ©
      • 乘号 × ×
      • 除号 ÷ ÷

      037_HTML全局属性

      常用的全局属性:

      id

      含义:
      给标签指定唯一标识,注意:id是不能重复的。
      作用:可以让label标签与表单控件相关联;也可以与CSS、JavaScript配合使用。
      注意:不能在以下 HTML元素中使用:

      、、
                          
                          

      你可能感兴趣的:(html,css,笔记)