WEB前端之：HTML入门

发表于 2019-06-12•字数统计 TODO•热度 TODO

HTML

  • 什么是HTML？HTML是用来描述网页的一种语言
    • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
    • HTML 不是一种编程语言，而是一种标记语言 (markup language)
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页
  • 相关知识：
    • HTML文件名部分
      • 1.使用英文、数字、下划线或-等字符
      • 2.文件名尽量有意义
      • 3.谨慎使用空格和特殊字符
    • 文件后缀部分
      • .htm后缀
        • 在早期的win98操作系统中，只能支持三位数的文件名后缀，所以那个时候诞生的文件，都以三位数内的后缀名结尾，如.doc、.txt、.jpg
      • .html后缀
        • 从Windows2000开始对文件后缀长度不再做限制，所以后缀就开始变得完整了。如：doc->docx, txt->text, jpg->jpeg, htm->html

          第一个HTML代码

  • marquee

    <marquee> Hello, HTML! </marquee>

    • 总体特征/基本结构：
      <标签名> 内容 </标签名>
    • 特征/结构2：
      <标签名 属性名=“属性值”>内容</标签名>
    • 特征/结构3：
      <标签名 属性1名="属性值" 属性2名="属性值">内容</标签名>
    • 注意：HTML标签属性没有顺序限制
      <marquee loop="2" width="50%"> <font color="pink> Hello, HTML!</font> </marquee>
    • 特征/结构4：
      <标签名1 属性名=“属性值” 属性名=“属性值” ...> <标签名2 属性名=“属性值” 属性名=“属性值”> *内容* </标签名2> </标签名1>
    • 注意：
        1. 所有的单词字母符号都必须在英文半角下输入
        1. 标签非常多？多写多练
        1. 标签对应的属性非常多？多写多练
  • 注释：注解和解释，说明性的文字，不会被浏览器(机器)识别，只用于程序员或开发人员之间的沟通和说明

    HTML标签的学习

    全局架构标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!doctype html>
    <!--文档声明，表示网页整体内容 （一个人）-->
    <html>
    	<!--html头信息 （灵魂）-->
    	<head>
    		<!--head头，存放特殊信息，通知浏览器以某种方式识别文件-->
    		<meta charset="utf-8">
    	</head>
    	<!--body体 （肉体）网页的主体，都是能够看得见的信息-->
    	<body>
    		<!--书写一个段落-->
    		<p><marquee>东北四大绝活：焊雷管，锯灯泡，精修xx膜，火补xx套<marquee></p>
    	</body>
    </html>

    标签详解

    body标签

    必须掌握的属性：
    bgcolor：设置页面的背景颜色
    background：设置页面的背景图片
1
2
3
4
5
6
7
8
9
10
需要了解的属性：
link：				设置超连接的颜色（正常状态）
alink：active link 	设置鼠标点击超链接的颜色
vlink：visited link 	设置鼠标点击后的超链接颜色
-
topmargin：		设置网页内部内容距离浏览器视窗顶部的距离
leftmargin：		设置网页内部内容距离浏览器视窗左侧的距离
bottommargin：		设置网页内部内容距离浏览器视窗底部的距离
rightmargin：		设置网页内部内容距离浏览器视窗右侧的距离
但在较新版的浏览器中，这四个属性已不再支持

标题标签

h1, h2, h3, h4, h5, h6

  • 作用：用于表示文章的标题
  • 特征：
      1. h1-h6文字逐渐变小
      1. 所有的h系列标签文字都是粗体
      1. 所有的h系列标签都会换行，独占一行
  • 注意：
    • h1在一个页面中只允许使用一次，用于当前页面的主要内容标题
    • 在网站首页->logo位置 文章页->文章主标题
    • h2标签没有数量要求，用于表示和当前h1标题为并列关系的内容标题，次重点内容
    • h3, h4没有数量要求，对搜索引擎的影响很弱，可以忽略不计
    • h5, h6基本不用

样式标签

  • 单纯的样式标签(对搜索引擎无影响)
    • b标签： 粗体标签(bold，粗)
    • i标签： 斜体标签(italic，斜体)
    • u标签： 下划线标签(underline)
  • 有强调意义的样式标签(对搜索引擎强调收录或索引的关键性)
    • strong标签： 具有强调意义的粗体
    • cite标签： 具有强调意义的斜体字效果
    • em标签： 具有强调意义的斜体字效果，大于cite
  • 自定义的样式标签
    • font标签 自定义字体标签
      • color属性： 设置颜色
      • size属性： 设置字体大小，取1-7
      • face属性： 设置字体类型，取字体名称(须是操作系统中存在的字体)

格式标签

  • p标签： 段落标签

    表示一个自然段落，在文章中比较常用，段落格式参照外国文字效果，首行不会缩进2字符，如果需要缩进，必须使用css来解决

  • br标签： 强制换行标签

    在指定的位置进行强制换行操作

  • hr标签：水平线标签

    width属性：设置水平线的宽度


    color属性：设置水平线的颜色
  • center标签：水平居中标签（尽量不要使用）
  • div标签：无意义标签

    作用：在页面布局中进行页面划块和分隔页面使用标签

  • span标签：无意义标签

    作用：在页面布局中使用用于存放文本内容

  • 块标签和行内标签的特征

    div标签是块标签的代表
    span标签是行内标签的代表，行内标签也称为内联标签


    行内标签和块状标签的区别： - 1.块装元素可以设宽高，行内元素则不能 - 2.块状元素不可以和其他元素在一行共存，内联元素可以和内联元素在一行共存 - 3.块状元素可以包含内联元素，内联元素不可以包含块状元素
  • 元素和标签

    元素的标签表示的内容不太一样


    div元素：在JS中的称呼
    div标签：在HTML中的称呼

在绝大多数的书籍中，元素和标签的概念等效

列表标签

  • ul标签： unorder list， 无序列表 
    1
    2
    3
    4
    <ul>
        <li>内容</li>
        <li>内容</li>
    </ul>
  • ol标签： order list， 有序列表 
    1
    2
    3
    4
    <ol>
    	<li>内容</li>
        <li>内容</li>
    </ol>

    type属性：设置标识类型


    start属性：设置标识开始值
  • dl标签：defined list， 定义列表 
    1
    2
    3
    4
    5
    6
    <dl>
    	<dt>定义内容的标题</dt>
        <dd>定义内容相关的属性</dd>
        <dd>定义内容相关的属性</dd>
        ....
    </dl>
    注意：一个dl标签内部只允许有一个dt标签，而dd标签则没有数量限制

    超链接标签

    超链接渐的说就是内容链接，通过点击操作可以跳转或者打开新的文件的一种方式
  • *a标签 *

    href属性 用于设置超链接跳转或者打开的文件地址


    target属性 设置超链接的打开方式 - _self 当前页面直接打开(默认值） - _blank 在新的页面打开 - _top 在顶级页面打开（在框架集中使用） - _parent 在父级页面打开（在框架集中使用） - 自定义打开方式（在框架集中使用）
  • 超链接的三种使用方式：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
       1. 普通超链接
    	格式：<a href="地址">内容</a>
       2. 锚点链接
    	第一步：在需要跳转到的目的地，使用a标签和name属性定义锚点位置和名称
           	<a name="锚点名称"></a>
           第二步：在需要点击跳转的位置，使用正常的超链接设置跳转位置，必须以#开头
           	<a href="#锚点名称">内容</a>
           注意：锚点的设置可以使用id名称代替a标签和name属性设定
    3. 邮件链接（不推荐使用）
    	格式 <a href="mailto:邮箱地址">内容</a>
  • 地址的分类
    • 相对链接
      1
      2
      3
      4
      5
      6
      7
      8
      ./img/girl.jpg
            ../img/body.jpg
            man.png

            没有协议的链接就是相对链接

            . 表示在当前文件夹中查找
            ..表示在上一层文件中查找
    • 绝对链接
      1
      2
      3
      4
      5
      6
      http://www.baidu.com/img/girl.jpg
            https://www.taobao.com/img/girl.jpg
            ftp://file.163.com/img/girl.jpg
            
            具有协议的链接就是绝对链接，地址固定不变
            "://"就是绝对链接的典型特征
      1
      2
      3
      相对于服务器的绝对链接
      	
          以/开头的路径就是相对于服务器的绝对路径，实际上是相对链接的一种特殊链接

      图片标签

  • img标签 图像标签
    • 作用：用于在页面中引入图片

      src属性： 用于设置引入的图片地址

      width属性：设置图片的宽度

      height属性：设置图片的高度

      注意：如果只设置宽高之一，则另一侧会等比例缩放，以保证图片比例不变，但是如果同时设置宽度和高度，图片会被强制拉伸至制定的宽高


      alt属性：设置图片加载失败时显示的文字内容，有描述图片的作用

      title属性：设置图片正常加载时，鼠标悬停的提示文字，有描述图片的作用

      要求alt和tilte属性必须同时书写而且内容必须一致

      border属性：设置图片的边框宽度属性，一般不用，偶尔用于取消低版本的IE浏览器图片带有链接时的蓝色默认边框

图像热点

  • 能够实现在一张图片上面添加多种不同超链接效果的技术

  • 需要使用到图片标签img，地图标签map，区域抱歉area

  • map标签：图像热点标签

    name属性：用于设置热点地图的名称

  • area标签：图像热点区别标签

    shape属性：设置热点区域的形状

    圆形circle，矩形rect，多边形poly

    coords属性：热点区域记录属性，用于记录回执指定形状需要的参数

    href属性：设置热点区域的链接地址

    target属性：设置热点区域链接的打开方式

    1
    2
    3
    4
    5
    6
    格式：
    	<img src="图片地址" usemap="#地图名称" />
        <map anme="地图名称">
        	<area shape="形状" coords="形状的信息" href="链接地址" target="打开方式" />
            <area shape="形状" coords="形状的信息" href="链接地址" target="打开方式" />
        </map>

表格

  • 早期时候表格用于页面布局和数据摆放

  • 现在表格基本上用于数据摆放这一种形式

  • table标签：用于定义表格的范围

    border属性：设置表格的宽度、单位像素

    width属性：设置表格的总宽度

    height属性：设置表格的总高度

    align属性：设置表格相对于外层标签的对齐方式

    left左对齐， center居中对齐， right右对齐

    cellspacing属性：设置单元格之间的间隙大小
    cellpadding属性：设置单元格中内容开始书写的位置
    bgcolor属性：设置表格的背景颜色

  • tr标签：table row 用于定义表格的行

    bgcolor属性：设置单元格行的背景颜色

    注意：如果存在表格颜色和行颜色，以行颜色为主

    align属性：设置行内内容的水平对齐方式

    left左对齐， center水平居中， right右对齐

    valign属性：设置行内内容的垂直对齐方式

    top上对齐， middle垂直居中， bottom底部对齐

    height属性：设置当前行的行高

  • td标签：用于定义表格的单元格，存放表格中的数据

    bgcolor属性：设置单元格的背景颜色

    注意：如果存在表格颜色和行颜色及单元格颜色，以但愿格颜色为主

    align属性：设置单元格内内容的水平对齐方式

    left左对齐， center水平居中， right右对齐

    valign属性：设置单元格内内容的垂直对齐方式

    top上对齐， middle垂直居中， bottom底部对齐

    width属性：设置单元格的宽度

    注意：设置单元格宽度会影响一列的宽度

    height属性：设置单元格的高度

    注意：设置单元格高度会影响一行的高度

    colspan属性：单元格跨列设置

    值：整数，表示当前单元格占用水平方向的单元格个数

    rowspan属性：单元格跨行设置
    值：整数，表示当前单元格占用垂直方向的单元格个数

  • caption标签：表格描述标签

  • th标签：表头标签

    • 注意：th标签和td标签具有相同的属性和用法
    • th具有固定的样式：粗体字、居中对齐

表单标签

什么是表单？

表单是用于连接用户和后台服务器的窗口，负责接受用户的数据和操作，将数据提交到后台服务器页面的标签

  • form标签: 表单范围标签，用于声明一个完整的，可以提交数据的表单范围

    action属性：设置当前表单数据提交的地址
    method属性：设置当前表单提交数据的方式

    get提交（使用明信片发信）

    1.明文传输，所有信息会在浏览器的地址栏中显示

    2.get方式提交的数据长度有限，受地址栏长度的限制

    post提交

    1.密文传输，所有信息都不会显示在地址栏中，在head头信息中发送
    2.post方式提交数据长度几乎没有限制，因为服务器可以无限设置

    enctype属性：设置当前表单提交数据的编码方式

    application/x-www-form-urlencoded值：URL编码（默认值）
    multipart/form-data值：上传文件必备值（必须记住）
    text/plain值：基本不编码

    target属性：设置提交页面的打开方式

    值与a标签href属性一致

  • 表单内容

    1
    2
    3
    4
    imput标签：输入表单
    	1. 文本输入框
            <input type="text" name="自定义名称" value="" />
            type属性-text值：表示当前表单类型为文本输入框