1. HTML

  1. 概念:是最精彩的网页开发语言
    Hyper Text Markup Language 超文本标记语言
    超文本:超级文本（超链接）
    标记语言 :由标签构成的语言<标签名称>如html，xml
    标记语言不是编程语言

  2. 规范
    语法:

    1. html文档后缀名 .html或者.htm

    2. 标签分为

      1. 围堵标签:有开始标签和结束标签。如<html></html>
      2. 自闭和标签:开始标签和结束标签在一起。如<br/>
    3. 标签可以嵌套:
      需要正确嵌套，不能你中有我 ，我中你
      1. <a><b></a></b> #错误
      2. <a><b></b></a> #正确

  1. 在开始标签中可以定义属性，属性是由键值对构成，值需要用引号（单双都可）引起来

  2. html标签不区分大小写，但是建议使用小写

2. BS架构

  1. 资源分类

    1. 静态资源
      特点:
      所有用户访问，得到的结果是一样的（固定的）。
      如:文本，图片，音频，视频，HTML，CSS，JavaScript

    2. 动态资源
      特点:
      所有用户访问，得到的结果可能不一样。
      如jsp/servlet，php，asp
      如果用户请求的是动态资源，服务器会执行动态资源转换为静态资源发送给用户浏览器

3. 基本标签

基本标签:构成html最基本的标签

  • html:html文档的根标签

  • head:头标签。用于指定html文档的一些属性。引入外部的资源

  • title:标题标签

  • body:体标签

  • :html5中定义该文档是html文档

文本标签

和文本有关的标签

  1. 注释:<!-- 注释内容 --> 
  2. <h1> -<h6>标题标签  不同等级的标题
  3. <p>  段落标签
  4. <br>:换行标签
  5. <hr>  展示一条水平线 拥有属性  color颜色 width宽度 size高度 aign对齐方式 （center居中  left左对齐 right右对齐）
  6. <b> / <strong> 字体加粗
  7. <i> / <em> 斜体
  8. <s> / <del> 删除线
  9. <u> / <ins> 下划线
  10. <font> h5中已经淘汰 字体标签 拥有属性  color颜色  size字体大小  face字体  
  11. <center> h5中已淘汰  居中标签

4. 图片标签

  1.    <img src="图片路径" align="图片对齐方式如右对齐" alt="图片加载失败显示的文字 widt="宽度像素大小" height="高度像素大小">
  2. <!--
  3.    src:图片路径  相对路径:以.开头的路径
  4. ./:开头的目录为当前目录  默认为./如./image/tv01.jpg
  5.    ../:代表上一级目录的文件
  6.    align:图片网页放置位置
  7.    alt:图片加载失败显示文字
  8.    width:宽度 即像素点大小
  9.    height:高度
  10.    border:设置图像的边框粗细
  11.    title:鼠标悬浮在图片上提示的文字
  12. -->

列表标签

  1. <!-- 列表标签  分无序列表和有序列表-->
  2. <!-- 有序列表  ol:为列表的包头   li:为每个序列的包裹-->
  3. 有序列表
  4. <ol type="A" start="2">  <!--type属性定义序号类型   start属性为起始序号 -->
  5.     <li>第一行</li>
  6.     <li>第二行</li>
  7.     <li>第三行</li>
  8.     <li>第四行</li>
  9. </ol>
  10. <!-- 无序列表  ul:为列表的包头   li:为每个序列的包裹-->
  11. 无序列表
  12. <ul type="disc"> <!-- type同时可以定义列表序号的图像  disc实心圆  square方框  circle圆 -->
  13.     <li>第一行</li>
  14.     <li>第二行</li>
  15.     <li>第三行</li>
  16.  <li>第四行</li>
  17.  </ul>
  19.  <!-- 自定义列表  dl:列表的包头  dt:名词   dd:围绕着dt的名词来解释 -->
  20.  <dl>
  21.      <td>蔬菜</td>  <!-- 不限定为1个  -->
  22.      <dd>大白菜</dd>
  23.      <dd>通心菜</dd>
  24.      <dd>生菜</dd>
  25.      <td>肉</td>
  26.      <dd>猪肉</dd>
  27.      <dd>牛肉</dd>
  28.  </dl>

5. 链接标签

  1. <a>:定义一个超链接
  2. 属性: href:指定访问资源的url(统一资源定位符)  必须是http:// 开头   如为空链接则填入 # 号即可
  3. target:指定打开资源的方式  1._self:默认值,在当前页面打开 2._blank:在空白页面打开
  5. <base>:自闭标签,放在head中,定义所有的a标签跳转方式

6. 锚点 定位

  1. 1.使用相对应的id名标注到要跳转的位置  当前页面跳转到指定内容的位置
  2. <h3 id = "top">test</h3>
  4. 2.使用超链接标签 href跳转为#id名
  5. <a href="#top">瞄跳转</a>
  7.  <h3 id="two">
  8.  <a href="#two">:跳转链接 跳转到href指定的id前面必须要有#

预格式标签

  2. <pre>
  3.    什  么 ,
  4.    连空格和回车都识别?
  5. </pre>
  7. pre标签文字什么样子特殊字符都可以显示出来

特殊字符

01. HTML - 图1

块标签

  1. <div>:每一个div沾满一整行。块级标签
  2. <span>:文本信息在一行展示,行内标签 内联标签

7. 表格标签

  1. <table>:定义表格  拥有属性  width:宽度  border:边框 cellpadding:定义内容和单元格之间的距离.如果指定为0则单元格的线合为一条   cellspacing:定义单元格之间的距离.如果指定为0则单元格的线合为一   bgcolor:表格背景颜色  align:表格对齐方式(left左对齐,center居中对齐,right右对齐)  valigh:表格内容垂直内容对齐方式(beseline基线对齐,top上对齐,middle居中对齐,bottom下对齐)
  2. <tr>:定义行  拥有属性 bgcolor:表格背景颜色  align:表格单元格内容对齐方式  
  3. <td>:定义单元格  拥有属性 colspan:合并列   rowspan:合并行
  4. <th>:定义表头单元格
  5. <caption> 定义表格标题
  6. <thead> 表示表格的头部分
  7. <tbody> 表示表格体部分
  8. <tfoot> 表示表格尾部

8. 路径

  1. 相对路径
    同级路径
    下级路径 /
    上级路径 ../

  2. 绝对路径 :完整路径