简介

  • Hyper Text Makeup Language 超文本标记语言
  • 加入了图片，声音，动画，多媒体等内容
  • 从一个文件跳转到另一个文件，与世界各地主机的文件连接

文件连接

  • 不是编程语言 而是一种标记语言 makeup language
  • 标记语言也是一套标记标签

常用浏览器

  • ie 火狐 谷歌 edge safari opera 被称为五大浏览器
  • 浏览器内核： 一种渲染引擎，读取网页内容，整理讯息，计算网页的显示方式并显示页面

Web标准

  • Web标准是由W3C组织和其他标准化组织定制的一系列标准的的集合
  • 为什么需要Web标准？
    浏览器不同，显示的页面和排版就有差异
  • Web标准的构成
    结构：整理和分类网页元素，主要是HTML
    表现：设置网页的版式，颜色，大小等外观格式，主要是CSS
    行为：网页模型的定义以及交互的编写，主要是JavaScript
  • 因此，结构写进HTML文件中，表现写到CSS文件中，行为写到Javascript文件中

HTML常用标签

语法规范

  • 基本语法概述
  1. HTML标签是由尖括号包围的关键词 eg
  2. HTML标签通常是成对出现的 eg 称为双标签，第一个是开始标签，第二个是结束标签
  3. 特殊标签 eg </br> 称之为单标签
  • 标签关系
  1. 包含关系
  2. 并列关系

基本结构标签

  • 每一个网页都有一个基本标签结构，称为骨架标签；HTML页面也称为HTML文档

  1. 页面中最大的标签，称为根标签

  2. 文档的头部，注意在其中必须设置的标签是title

    1
    <head></head>

  3. 让页面有属于自己的网页标题

  4. 文档的主题 元素包含文档的所有内容，页面的内容基本都是放进body里面

网页开发工具

  • 字符集
  1. 在head标签内，可以通过meta标签的charset属性规定HTML文档应该使用哪种字符编码
  2. UTF-8 万国码，基本包括了全世界所有国家所需要的字符
  3. <! DOCTYPE html>文档声明类型标签，告诉浏览器这个页面采取html5版本来显示页面
  4. 告诉浏览器或者搜索引擎这个是一个英文网站，本页面将采用英文来显示
  5. 必须写，否则乱码。

常用标签

标题标签

  1. 格式

    1
    <h1>-<h6>

  2. 为head缩写，在标签内的字体会变大变粗

  3. 由1-6大小逐渐递减

段落和换行标签

  1. 标签用于定义段落 paragraph

  2. </br>换行标签 break row

文本格式化标签

  1. 加粗或者
  2. 倾斜或者
  3. 删除线或者
  4. 下划线或者

div和span标签

  1. 没有语义，只是一个盒子，用来装内容的

  2. division表示分割 分区 span表示跨度 跨距

  3. 标签用来布局，但是现在一行只能放一个div大盒子

  4. 标签用来布局，一行上面可以放多个span小盒子

图像标签和路径

  • 图像标签

  1. 标签用于定义HTML页面中的图像:

    1
    2
    <img src="url"/> 
    其中src是img标签的必须属性，他用于指定图像文件路径和文件名

  2. 图像标签的其他属性

    | 属性 | 含义 | 描述 |
    | ——— | ———— | ——————————————————- |
    | src | 图片路径 | 必须属性 |
    | alt | 文本 | 替换文本，当图像不能显示时 用文本代替 |
    | title | 文本 | 提示文本 鼠标放到上面时显示的文字 |
    | width | 像素 | 设置图像的宽度 |
    | height | 像素 | 设置图像的高度 |
    | border | 像素 | 设置图片的边框粗细 |

  1. 图像标签的路径
    • 相对路径 文件夹下地址
    • 绝对路径 绝对地址 带盘符 在default browser里面打开才能显示

超链接标签

表格标签

  • 总览

    1
    2
    3
    <table></table>用于定义表格
    <tr></tr>用于定义表格中的行，必须嵌套在<table></table>中
    <td></td>用于定义表格中的单元格 必须嵌套在<tr></tr>中

  • 表头单元格标签 

    1
    2
    3
    4
    5
    表格属性                    align(left,right,center)规定表格相对周围元素的对齐方式
    border(1 or "")规定表格是否拥有边框
    cellpadding(像素值)规定单元边沿预期内容之间的空白，默认1像素
    cellspacing(像素值)规定单元格之间的空白，默认2像素
    width(像素 or 百分比)规定表格的宽度

  • 表格结构标签

    1
    2
    3
    <thead>标签控制表格的头部区域
    <thbody>标签控制表格的主体区域
    作用:更好的分清楚结构

  • 合并单元格

    1
    2
    3
    跨行合并：rowspan = "合并单元格的个数"
    跨列合并：colspan = "合并单元格的个数"
    记得删除多余的单元格

列表标签

  • 无序列表

    1
    2
    3
    <ul>标签下面嵌套<li>标签
    <ul>标签不能嵌入其他无关标签
    <li>里面可以放任何标签

  • 有序列表

    1
    <ol>标签

  • 自定义列表

    1
    <dl>标签，与<dt>(定义项目 or 名字)和<dd>(描述每一个项目 or 名字)一起使用

表单标签

  • 表单由表单域，表单控件（元素）和提示信息三个部分构成

  • 表单域 

    1
    2
    3
    action = "url"用于指定接收并处理表单数据的服务器程序的url地址
    method = "get/post"用于设置表单的提交方式
    name = "表单域名称"

  • 表单控件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     <input>
    type = "属性值"
    单标签
    其他属性：
    name 自定义 定义input元素名称
    value 自定义 定义input元素的值
    checked checked 规定此元素首次加载时应当被选用
    maxlength 正整数 规定输入字段字符的最大长度

    <label>
    用于绑定一个表单元素 当点击label标签中的文本时，浏览器会自动将焦点转到对应元素上
    <label for="sex">男</label>,记得加id

    <select>
    定义下拉列表
    格式为<select><option>选项</option></select>
    可以在option里面加selected 表示当前项为默认选中项