web前端研发实习--学习笔记（1）

目录

HTML基础

（一）元素的使用

1.0、元素摘要

1.1、空元素

1.2、虚元素

（二）元素属性

2.0、一个元素应用多个属性

2.1 布尔属性&自定义属性

（三）创建HTML文档

3.0、外层结构

3.1、元数据

3.2、内容

3.3、父元素、子元素、后代元素、兄弟元素

3.4、元素类型

（四）HTML5全局属性

4.0、accesskey属性

4.1、class 属性

4.2、contenteditable属性

4.3、contextmenu属性

4.4、dir属性

4.5、draggable属性和dropzone属性

4.6、hidden属性

4.7、id属性

4.8、lang属性&spellcheck属性

4.9、style属性 

4.10、tabindex属性

4.11、title属性

---

HTML基础

（一）元素的使用

元素是一种用来向浏览器说明文档内容的工具。其效果体现在内容上，不同的元素有不同确切的含义。HTML定义了各种各样的元素，在HTML文档中起着不同的作用。

hello  fan32021  !!

对于上述例子来说，是开始标签，是结束标签，fan32021是内容。这三部分就构成了一个strong元素。标签的大小写不敏感，但一般都会使用小写格式贯穿始终。浏览器不会显示标签，而是解读HTML文档，给用户一个元素作用的视图。

1.0、元素摘要

元素摘要

元素	说明
a	生成超链接
body	表示HTML文档内容
button	生成用于提交表单的按钮
code	表示计算机代码片段
DOCTYPE	表示HTML文档的开始
img	链接图片
head	表示HTML文档的头部区域
hr	表示主题改变
html	表示文档的HTML部分
input	表示用户输入的数据
label	生成另一元素的说明标签
p	表示段落
style	定义CSS样式
table	表示用表格组织的数据
td	表示表格单元格
textarea	生成用于获取用户输入数据的多行文本框
th	生成表头单元格
title	表示HTML文档标题
tr	表示表格行
h1——h6	定义标题
link	链接外部样式表
base	为页面上的所有链接规定默认地址或默认目标
script	在HTML文档中插入脚本
其他	遇到后补充

1.1、空元素

hello world  !!1

元素的开始和结束标签不一定非要有内容，没有内容的元素称为空元素。有些元素为空时没有意义，但也是有效的HTML代码。空元素可以更简洁的只用一个标签表示：

hello world  !!!

1.2、虚元素

有些元素只能使用一个标签表示，在其中放置任何内容都不符合HTML规范。这类元素就是虚元素。其有两种表现方式：

用单个开始标签表示虚元素

I love HTML!

Me too.

用空元素结构表示虚元素

I love HTML!

Me too.

他们都会默认表现为一条横线。

（二）元素属性

元素可以用属性来配置，属性只能用在单个标签或者开始标签上，不能用在结束标签上。

Study in  CSDN .

属性有全局属性，当然还有为元素本身提供其特有配置信息的专有属性。

2.0、一个元素应用多个属性

Study in  CSDN .

这些属性的顺序并没有要求，全局属性和专有属性可以随意交错，这些属性间用一个或几个空格分割就好。

2.1 布尔属性&自定义属性

布尔属性不需要设置一个值，只需要将属性名添加到元素中即可。用户可以自定义属性，这种属性以“data-"开头。

（三）创建HTML文档

元素和属性不会孤立存在，他们是用来标记HTML文档内容的。创建一个HTML文档，最简单的方法就是创建一个文本文件，然后将其改为.html的文件扩展名即可。

3.0、外层结构

DOCTYPE元素让浏览器明白其处理的是HTML文档，紧跟着的是html的开始标签，即从这里到html结束标签，所有内容都要做为HTML处理。

3.1、元数据

HTML文档的元数据部分可以用来向浏览器提供文档的一些信息。元数据包含在head元素内。head元素还能规定文档与外部资源的关系，定义内嵌CSS样式，放置和载入脚本程序。

3.2、内容

文档的第三部分就是文档的内容，他放在body元素中

    
        
        
    
    
        
        
 hello world! 
    

3.3、父元素、子元素、后代元素、兄弟元素

HTML文档中元素之间有着明确的关系，上例中，body是p的父元素，p是body的子元素，body，p都是html的后代元素，head，body是兄弟元素。一个元素可以有多个子元素，但只能有一个父元素。具有同一个父元素的几个元素互为兄弟元素。，一个元素能以什么样的元素为父元素或子元素是有限制的。

3.4、元素类型

HTML5规范将元素分为三大类：元数据元素、流元素、短语元素。元数据元素用来构建HTML文档的基本结构，短语元素是HTML的基本成分。流元素是短语元素的超集，即所有的短语元素都是流元素，但并非所有的流元素都是短语元素。

（四）HTML5全局属性

每种元素都有能规定自己的属性，是局部属性。而还有一类是用来配置所有元素的共有行为。全局属性可以作用于任何一个元素上，但未必会带来有意义或有用的行为改变。

4.0、accesskey属性

使用accesskey属性可以设定一个或几个用来选择页面上的元素的快捷键。

    
        
    
    
        

        
            name:  
        
            password: 
        
            
        
    

4.1、class 属性

class属性是用来将元素归类。这样做通常是为了能够找出文档中某一类元素或为某一类元素使用CSS样式。一个元素可以被归入很多类，在class属性值中提供用空格分开的类名即可,脚本程序也可以使用class属性

    
        
        
    
    
        csdn
        csdn
        
    

4.2、contenteditable属性

contenteditable的用途是让用户可以修改页面上的内容，其属性值设为true时用户可以编辑元素内容，设置为false时禁止编辑，未设定值的话会从父元素处继承该属性的值。

    
        
    
    
        
 It is a nice day 
    

4.3、contextmenu属性

contextmenu属性用来为元素设定快捷菜单。这种菜单会在受到触发时弹出来。

4.4、dir属性

dir属性用来规定元素中文字的方向，其效果有ltr和rtl：

    
        
    
    
        
 This is right-to-left 
        
 This is left-to-right 
    

4.5、draggable属性和dropzone属性

这里两个属性都是HTML5支持拖放操作的方式，前者表示元素是否可以被拖放两者一般配合使用。

4.6、hidden属性

hidden是一个布尔属性，表示相关元素当前毋需关注。浏览器在处理它的时候时隐藏了他的相关元素。

    
        
        
    
    
        Toggle
        

            
Name
City
            
Qin
SFH
            
            
Zhang
ZhangJiaJie
        
    

4.7、id属性

id属性是给元素分配的一个唯一的标识符。通常用来将样式赋给元素或用在JavaScript程序中用来选择元素。

    
        
        
    
    
        csdn
        csdn
    

4.8、lang属性&spellcheck属性

lang属性用于说明元素内容使用的语言。spellcheck属性用来表明浏览器是否应该对元素的内容进行拼写检查。这个属性只有在用户可以编辑的元素上时才有意义。其值为true时启用检查拼写，其值为false时禁止拼写检查。

4.9、style属性 

style属性用来直接在元素身上定义CSS样式。

    
        
    
    
        4.10、tabindex属性 
  
HTML页面上的键盘焦点可以通过按tab键在各元素之间切换。用tabindex可以改变默认的转移顺序。
 
  
4.11、title属性
 
  
title属性提供了元素的额外信息。浏览器通常用这些东西显示工具提醒。
 
  


    
        
    
    
        CSDN
    
 
  
    有关HTML的基础先总结这么多，有错误不足的地方还希望大佬们指正！