标签：key   parent   block   red   图像   类型   使用   客户   访问   

HTML

基本框架

iframe内联框架

 
 不常用，有缺点

基础

1. 标题（h）

一级标题
		一般一个网页中只有一个h1标题
二级标题

拓展

    
你好
        
我是
    

2. 段落（p）

Hello World!
					

Hello World!				
独占一行的块元素
	

3. 链接（a）

这是一个链接

4. 图像（img）

• img元素属于替换元素（基于块元素和行内元素之间，具有两种元素的特点）

• alt 图片的描述，默认情况下不会显示，当图片加载失败的时候会显示

  但搜索引擎会根据alt中的内容识别图片，如果不写alt属性则不会被搜索引擎收录

• title属性 可以显示图片或文字的属性

• 拓展
  1. jepg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图
  2. gif：支持的颜色较少，支持简单透明，支持动图
  3. png：支持的颜色丰富，支持复杂透明，不支持动图
  4. webp：谷歌推出的专门用来表示网页中的图片的一种格式，具备前三种的所有优点，内存小
  5. base64：希望图片加载速度快的时候使用，将图片转换成编码的形式，随浏览器加载一起出

5. 注释（）

6. 水平线（hr）

属性

body属性

• 拓展

  title 标签的内容会作为浏览器搜索结果的超链接上的文字

  

a 标签的属性

target 属性

type 属性

hreflang 属性

B站

name 与 id 属性

• name（id）可传送至锚处

  top					
  去top					
  

  拓展

  • 可在打开新网页的时候定位到锚处

    访问到foot处
    

  ---

head 属性

字体（font）

1. 颜色

Hello World!

2. 大小

Hello World! 
Hello World!

3. 类型

你好世界！
Hello World!

文本格式化

1. 文本格式化标签

Hello World!                                         
Hello World!                                       
Hello World!                                         
Hello World!							 
独占一行的块元素
						

列表

列表之间可以互相嵌套

HTML
			
            
HTML称为超文本标记语言，是一种标记语言。它包括一系列标签．
             通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
             HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
            
     

音频（audio）和视频（video）

1. 音频

• controls：允许用户控制
• autoplay：自动播放
• loop：循环播放

• 拓展

2. 视频

• 方法和audio基本一致

    对不起，你的浏览器不支持播放视频，请升级浏览器
    

// embed所有浏览器都支持，但版本很旧

3. 注意示项

• 一般不会引入本地视频

注意事项

• 如果需要书写特殊符号，则需要用Html中的实体（转义字符）

  &实体的名字

  显示结果	实体名称	描述
  	&nbsp	空格
  	&lt	小于号
  >	&gt	大于号
  &	&amp	和号
  "	&quot	引号
  `	&apos	撇号
  ￠	&cent	分（cent）
  ￡	&pound	镑（pound）
  ￥	&yen	元（yen）
  €	&euro	欧元（euro）
  §	&sect	小节
  ?	&copy	版权（copyright）
  ?	&reg	注册商标
  ?	&trade	商标
  ×	&times	乘号
  ÷	&divide	除号

CSS

基本框架

1. 内联（行内）样式

• 直接在HTML语句中定义

命数入织，当为磐石

• 缺点

1. 样式只能对一个标签生效
2. 对多个元素生效时，需每一个都定义一次
3. 修改样式麻烦，需一个一个修改，不方便

2. 在head中的style定义

• 在CSS选择器中定义样式

• 优点

  1. 可同时为多个标签定义样式，修改时只需修改一处即可应用全部

• 缺点

  1. 但只能对当前的一个网页有效，不能跨界面复用

3. 外部样式表

• 定义一个.css文件
• 然后用link语法链接

常用选择器

id 与 class

• id

1. 定义：根据元素的id属性值选中一个元素
2. 语法：#red{}
3. 注意：最好不要重复使用，id属于唯一值

静夜思
    
床前明月光
    
疑似地上霜
    
举头望明月
    
低头思故乡

• class

1. 定义：与id相似，但可以重复使用
2. 语法：.blue{}
3. class可以为元素分组
4. 一个元素可以指定多个class元素,class之间用空格间开

静夜思
	
    
床前明月光
	
    
疑似地上霜
    
举头望明月
    
低头思故乡

通配选择器

*{
	
}

复合（交集）选择器

1. 定义：同时复合多个条件的元素

2. 语法：h1，h2{}

HTML
       
CSS

关系选择器

1. 定义
2. 语法
   • div>p div.one>p div>p>span p+h4 div~span

        
            div内的span
            
div>span>p
          
    
    

        
div与class
        
p旁边的h4元素
    
        div外的span

属性选择器

1. 语法：[属性名] 选择含有指定属性名的元素

   ? [属性名 = 属性值] 钻则含有指定属性名和属性值的元素

静夜思
    
床前明月光
    
疑似地上霜
    
举头望明月
    
低头思故乡

注意事项

1. style

• style中的语句不支持HTML语句，属于CSS，包括注释

HTML&CSS&JavaScript学习（持续更新）

标签：key   parent   block   red   图像   类型   使用   客户   访问   

原文地址：https://www.cnblogs.com/duoduo54/p/14392680.html