HTML基础

目录

1.前言

2.开发环境

3.标签

4.编写一个html页面

 5.vscode如何快速生成代码

6.html标签&标题&段落

7.格式化标签

8.img标签

9.a标签href和target属性

10.表格标签

11.列表标签——无序列表

12.列表标签——有序列表

13.列表标签——自定义列表

 14.表单域

15.input文本框

16.input密码框

17.input单选框

18.input复选框&普通按钮

19.input提交清空上传文件

20.label标签&select标签&texttarea标签

21.无语义标签

22.特殊字符

23.Emmet快捷键

24.总结

---

1.前言

        搭建一个简单的前端网站一般需要HTML，CSS，JS技术，本篇文章是HTML的基础应用。

        HTML是超文本标记语言。超文本指的是包括文本、声音、图片、视频、表格、链接在内；标记指的是HTML中许许多多的标签。HTML是运行在浏览器上面的。

2.开发环境

1. vscode(企业开发前端的时候非常常用的一个开发工具)；
2. sublime；
3. idea(商业版，社区版代码高亮，代码补全，代码缩进)。

        这里我使用的是vscode，为了高效的编写代码，我们需要使用3个插件，分别是：

1. live server
2. auto rename tag
3. open in browser

3.标签

        标签都是在<>里的，标签分为双标签和单标签，双标签有开始有结束。另外我们应特别理解与记忆一些常用和重要的标签，如下表格：

重要标签

标签	介绍
与	html文件根标签
与	编写页面相关属性
	页面标题
与	页面内容展示信息

DOM树说明：

1. 所有的标签都是html子标签；
2. head和body都是兄弟标签；
3. head和title是父子标签；
4. 每一个标签相当于是一个对象，拿到之后就可以对这些对象进行增删查改。

4.编写一个html页面

    
    
    


    一个html页面

        在浏览器中打开之后，F12查看代码：

 5.vscode如何快速生成代码

        直接输入！，回车即可生成代码框架。

6.html标签&标题&段落

标签	说明
注释标签	ctrl + /
标题标签	与，有六个,h1~h6，数字越大，则字体越小
段落标签
换行标签	，规范的写法

额外说明：回车解析为一个空格，换行标签比的行之间的间隙比段落标签行之间的间隙小。

7.格式化标签

标签	说明
加粗标签	和
倾斜标签	和
删除线标签	和
下划线标签	和

 额外说明：每种格式化标签的前者都具有强调的作用，并且支持爬虫获取当前文本。

8.img标签

        这是一个非常重要的标签，因为一般网站都会伴随大量的图片。

        这个标签必须带有src属性，表示图片的路径。

        路径又分为两种，绝对路径和相对路径。

属性：

1.         alt属性：替换文本.当文本不能正确显示的时候，会显示一个替换的文字。
2.         title：提示文本，将鼠标放到图片上，就会有提示。
3.         width/height：控制宽度高度。高度和宽度一般改一个就行，另一个会等比例缩放.否则就会图片失衡。
4.         border：边框，参数是宽度的像素。但是一般使用CSS来设定。

        标签先后顺序不固定，属性之间用空格隔开，key=value模式。

9.a标签href和target属性

        超链接标签：a

1.         href：表示点击后跳转到哪个页面
2.         如果body内没有内容，默认高度和宽度都是0
3.          target打开方式默认是_self，如果是_blank则用新的标签页打开

10.表格标签

标签：

        表格标签是双标签，

和。

标签	说明
table	表示整个表格
tr	表示表格的一行
td	表示一个单元格
th	表示表头单元格，会居中加粗
thead	表格的头部区域（注意和th区分，范围是比th大的）
tbody	表格的主要区域

 说明： table包含tr，tr包含td或者th。

属性：

1.         align是表格相对于周围元素的对齐方式，align="center"（不是内部元素的对齐方式）
2.         border表示边框，1表示有表框（数字越大，边框越粗），""表示没有边框
3.         cellpadding表示内容距离边框的距离，默认1像素
4.         cellspacing表示单元格之间的距离，默认为2像素
5.         width/height用来设置尺存
6.         rowspan行合并
7.         colspan列合并

11.列表标签——无序列表

        ul标签表示无序列表，li标签表示无序列表的一行，都是双标签

        样式属性使用CSS来设置

        快捷方式，例如生成一个三行的无序列表：ul>li*3

12.列表标签——有序列表

        ol标签表示有序列表，li标签表示有序列表的一行，都是双标签。

属性type

type值	说明
a	表示小写英文字母编号
A	表示大写英文字母编号
i	表示小写罗马数字编号
I	表示大写罗马数字编号
1	表示数字编号（默认）

        start属性表示从第几个开始编号。

13.列表标签——自定义列表

dl	表示一个自定义列表
dt	表示列表标题
dd	表示列表每一行的内容

        都是双标签。

 14.表单域

说明：

1.         HTML 表单用于收集用户的输入信息。
2.         HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
3.         HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

标签：

•  元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
•  元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联  元素，name 属性用于标识表单字段。
•  元素用于创建下拉列表，而  元素用于定义下拉列表中的选项。
   元素用于为表单元素添加标签，提高可访问性。

  15.input文本框

  16.input密码框

  17.input单选框

  性别男
  女

          相同name，那么只能选中一个。

          checked表示默认值。

  18.input复选框&普通按钮

  type = “checkbox”

  19.input提交清空上传文件

      
          课程：
          
          
          
      

  20.label标签&select标签&texttarea标签

  • label标签来绑定；
  • select标签是下拉选择标签；
  • textarea标签弄出一个文本框。

  
  
  
      
      
      
  
  
      男
      
      女
      
      
          --请选择年份--
          --1990--
          --1991--
          --1992--
      
      
  
  

  21.无语义标签

  无语义标签没有固定的用途。

  拿着这个标签啥都可以干。

  div标签是独占一行的，是一个大盒子；

  span标签是不独占一行，是一个小盒子。

  22.特殊字符

  特殊字符	用途
  	空格
  <	小于号
  >	大于号
  &	按位号

  23.Emmet快捷键

  快捷键	作用
  input[tab]	快速输入标签
  div*3[tab]	快速输入多个标签
  div#sex[tab]	标签带id
  div.sex[tab]	标签带类类名
  ul>li*3[tab]	标签带子元素
  span+span	标签带兄弟元素
  div{hello}	标签带内容
  div{$.hello}	标签带内容（带编号）

          还有很多快捷键，使用时多去积累。

  24.总结

          以上就是html基础的内容，我会在以后持续的向该篇文章中添加内容。