HTML介绍

一.什么是HTML

html（hypertext makeup language）,中文名为超文本标记语言，他是一门能被浏览器解析成网页的标签语言，当我们使用浏览器访问网页时，那边就有一个服务端给你发送数据到你的浏览器上，而那些数据就包括html，然后被浏览器渲染成我们看到的那个样子，浏览器就相当于一个解释器解释html

二.网页的组成

我们网页的组成其实就是由三大部分组成的，俗称网页三件套：
html：最先出现，它包括一系列的标签，通过这些标签，把网络上的文档格式统一，使分散的Internet资源连接成一个逻辑整体，html命令可以说明文字、图形、动画、声音、表格、链接等；它在网页三件套中相当于一个没穿衣服的人；
css:用于装饰html，是网页变得更加美观；在网页三件套中相当于给html这个裸人穿上了衣服；
js:实现了网页的动态效果；在网页三件套中承担了使得html这个裸人跑起来的功能；

三.html文档树形结构图

上面我们已经对html有了一些了解，接下来咱们就来认识一些html的树形结构：
文档树图片

四.标签是什么

上面我们说html是标签语言，那什么是标签语言呢？
1.是由一对尖括号包裹的单词构成 例如: *所有标签中的单词不可能以数字开头.

2.标签不区分大小写如<html> 和 <HTML>. 推荐使用小写.
标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.

3.有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如:
<hr/> <input /> <img />

4.标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

五.标签的属性

1.通常是以键值对的方式出现，如：name = "luyi"
2.属性只能出现在开始标签和自闭标签
3.属性名字全部小写，属性值必须是用双或单引号引起来的
4.如果属性名和属性值一样，可以直接写属性名就行，如readonly

六.标签

现在我们开始正式讲标签了，接下来我们来看看<!DOCTYPE html>标签；

<!DOCTYPE html>标签是用来给浏览器开启一个标准模式的；
下面我就来讲讲为什么需要给浏览器开启标准模式：

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在
W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility
Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars
mode)，这就是二者最简单的区别。如果你的网页没有加入<!DOCTYPE html>标签，那默认就是怪异模式（Quircks mode），那你的网页在不同的浏览器上就会有不同的样式，这也就是<!DOCTYPE html>标签的作用了；

七.head标签

meta标签

meta标签共有两个属性：分别是http-equiv和name属性；

1.http-equiv属性，相当于http的文件头作用，他可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性名为content，cotent中的内容其实就是各个参数的变量值；

//表示着两秒后跳转到www.baidu.com
<meta http-equiv="content-Type" charset=UTF8">//设置编码方式为UTF8
2.name属性主要用于描述网页，与之对应的属性名为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的；

<meta name="keywords" content="html，html知识点，博客园>

非meat标签

设置网页标题


八.body标签

基本标签

//n为1-6的数值，从大到小，表示标题

//段落标签，包裹的内容被换行，而且上下内容之间有一行空白
//加粗标签
//为文字加上一条中线,还有标签也一样
//斜体标签
//上角标和小角标

//换行标签

// 水平线标签
//没功能的标签，但是我们会经常用到的

图形标签<img>

img标签的属性

src：要显示的图片路径（常用）
alt:图片没加载成功时要显示的内容
title:鼠标放到这张图片时显示的文字

超链接标签<a>

a标签的属性

href：要链接过去的url
target:_blank:在新的窗口打开超链接，如果是框架名称的话，就是在指定框架中打开链接内容
name:定义一个页面的书签
补充：a标签还可以实现在页面跳转（锚）的功能：

href: #id//跳转到id属性值为id的标签的位置

列表标签

    无序列表
      ：有序列表
      一般与
    1. 标签一起用
      (不常用)：自定义列表
      列表标题
      列表项

      表格标签<table>

      table标签的属性

      border:设置表格边框
      cellpadding:内边距
      cellspacing:外边距
      table标签一般与以下标签一起使用

      ：表示行
      :表示列的数据
      :这一行数据的数据标题
      (不常用):为表格进行分区
      他们的属性：rowspan:单元格竖跨多少行
      colspan:单元格横跨多少行（即单元合并）
      例子：























      student info
      info name age sex
      student1 luyi 18 boy
      student2 luer 19 girl

      表单标签<form>（重点）

      1.form标签属性：

      action:表单要提交到哪去，一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，
      比如 https://www.sogou.com/web ,他还可以跳转到指定的网页，如index.html

      method:表单提交的方式（get/post），默认是get
      //get提交的键值对会放在地址栏后面，安全性相对较低，而且提交的内容长度是有限制的
      //post提交的键值对不会放在地址栏后面，安全性相对较高，而且对提交内容的长度理论上无限制
      2.表单元素之input标签
      属性：

      type： text 文本输入框

      password 密码输入框

      radio 单选框
      //注意单选框中如果是二选一这种情况，就需要把两个多选框的name值设置成一样的，
      然后value值设置为不同的
      二选一例子：


      boy:
      girl:

      checkbox 多选框

      submit 提交按钮//f非常好用，点击它就会自动向服务端提交数据

      button 按钮(常常配合js使用)

      file 提交文件，如果要提交文件，form表单需要加上属性
      enctype="multipart/form-data"

      name:表单提交项的键，这个name非常重要，服务端获取数据就是通过这个name的值来获取的

      value:表单提交项的值，对于不同的type，value属性的用法也不一样：
      type="button", "reset", "submit" - 定义按钮上的显示的文本
      type="text", "password", "hidden" - 定义输入字段的初始值
      type="checkbox", "radio", "image" - 定义与输入相关联的值　
      checked:用于radio和checkbox设置默认选中
      readonly：只读，用于text和password
      disabled:对所有type类型都适用

      表单元素之select的属性：

      name：表单提交项的键
      size:选项个数

      与标签option一起用：
      option标签就是下拉选中的每一项
      属性：value：表单提交项的值
      selected:selected下拉选默认被选中，可以直接写成selected
      还有一个optgrounp,为每一项加上分组
      例子：
posted @ 2020-05-07 19:04  luyi001  阅读(290)  评论(0)    收藏  举报