HTML

前端基础—html

1. 前端是什么？

  • 前端对于网站来说，通常是指网页，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。

2. web的原理

  • 浏览器地址栏输入URL-->浏览器往服务端发送消息-->服务端接收消息-->服务端回消息（从文件中读取数据）-->浏览器收消息（按照一个约定好的规则展示出来）

3. HTML初识

  • html语言就是一些特殊的符号，不同的符号有不同的显示效果，相当于是网页的骨架，也就是网页的结构

4. HTML是什么？

  • 全称超文本标记语言；
  • 本质上是浏览器可识别的规则；
  • 是一种标记语言，不是一种编程语言；

5. HTML的基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>
  • <!DOCTYPE html>：声明标签
  • <html lang="zh-CN"></html>：html标签是网页的根标签，所有的标签全部都要写在这对根标签内，lang表示当前网页显示内容的主要语言，en为英语，zh-CN主要为中文
  • <meta charset="UTF-8">:
  • <head></head>:表示头标签，主要定义网页的头部包括文档的标题，还可以引用JS中的脚本，CSS中的格式等。
  • <title></title>:标签页显示标签，也就是文档的标题标签。
  • <body></body>:网页文档的主体，包含用户所看到的的所有内容，如：文本，超链接，图片，表格等。

6. 标签的分类

  • 成对出现的标签
    • 段落标签：<p></p>
    • 标题标签：<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>
    • 文本标签：<font size="" color=""></font>
    • 文本加粗：<strong></strong> or <b></b>
    • 文本倾斜：<em></em> or <i></i>
    • 删除线标签：<del></del> or <s></s>
    • 下划线标签：<ins></ins> or <u></u>
  • 单个标签
    • 注释标签：<!-- 注释 -->
    • 换行标签：<br> or <br />
    • 水平线标签：<hr> or <hr />
  • 标签内的重要属性
    • id:定义标签的唯一ID，一个HTML文件中唯一；
    • class:为html元素定义一个或多个类名；
    • style：规定元素的行内样式。

7. 常用标签

  • head标签
    • charset编码
      • 格式：<meta charset="UTF-8">
      • 常用设置：
      ASCII/ANSI/Unicode：英语
GBK ：亚洲通用字符集
GB2312：中文简体
Big5 ：台澳港繁体
UTF-8：世界通用字符集
    • name

      • 关键字

        <meta name="keywords" content="">

        作用是告诉搜索引擎站点关键字。SEO优化使用。

      • 网页描述

        <meta name="discription" content="">

        作用是告诉搜索引擎站点的主要内容。这个description是给SEO和用户看的。

      • 作者

        <meta name="author" content="name">

        告诉搜索引擎制作网页的制作者。

      • 文件检索

        <meta name="robots" content="all | none | index | noindex | follow | nofollow">

        有时候会有一些站点内容，不希望被 robots 抓取而公开。为了解决这个问题，robots 开发界提供了两个办法：一个是robots.txt，另一个是 robots meta 标签。
其中的属性说明如下：
all：（默认）文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；
nofollow：文件可以被检索，但页面上的链接不可以被查询。
    • http-equiv 网页重定向
      <meta http-equiv="reflesh" content="5; http://www.baidu.com">

      网页自动跳转：网页5秒后跳转到百度首页。

    • 设置 icon 图标
      <link rel="icon" href="icon文件">
  • body标签
    • 基本标签
    <b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>
    • 特殊字符
    符号 字符代码
    空格 &nvsp;
    < &lt;
    > &gt;
    & &amp;
    ¥ &yen;
    © &copy;
    ® &reg;

    参考链接：HTML特殊字符编码表

  • div标签和span标签
    • 特点：这两种标签没有默认样式效果，方便后续使用CSS调整样式。
    • div和span的区别：
      • div块级标签，标签独占一行；
      • span行内标签也称内联标签，默认都在一行显示。
  • 块级标签和行内标签
    • 块级标签：自己独占一行
      • p标签
      • h标签
      • hr标签
      • div标签
    • 行内标签：默认在一行显示
      • b标签
      • i标签
      • u标签
      • s标签
      • span标签
    • 标签的嵌套
      • p标签不能包含p标签和div标签
      • 块级标签可以包含内联标签
  • img标签
    • 格式：<img src alt title width height>
    • 参数：
    src : 图片的来源（必写属性）
alt : 替换文本 ，图片不显示的时候显示的文字（重要性：1.SEO优化 2.盲人阅读需求）
title : 提示文本，鼠标放到图片上显示的文字
width : 图片宽度
height : 图片高度

PS：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放
  • a标签
    • 格式：<a href title target>填写内容</a>
    • 参数：
    href ：去往的路径、跳转的页面， (必写属性)
title ： 提示文本，鼠标放到链接上显示的文字
target=”_self" （默认值），在自身页面打开（关闭自身页面，打开链接页面）

target=”_blank” 打开新页面，（自身页面不关闭，打开一个新的链接页面）

PS：当 href 的值为 javascript:void(0); 或 javascript:; ，表示超链接不做任何事情，不做任何跳转。

    • 锚链接

      • 定义：锚链接也称锚点链接，命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，自动跳转到我们设置锚点的位置，类似于我们阅读书籍时的目录页码或章回提示。

        锚点链接可以跳转到页面的任何位置。一般用于在页面下面的时候，点击回到最上面。锚点链接的名称可以随意取，只起到标记作用。

      • 其原理是按照标签的id属性来找到标签，从而跳转到对应位置的。

      <p id="AAA">
  
</p>
...
<a href="#AAA"></a>   
<!-- 超链接到锚点 -->

    • 空链接

      <a href="#">空链</a>

      PS：空链相当于 #top，实际点击此链接的时候会跳转到页首的位置。

  • 列表

    • 无序列表

    • <ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
</ul>
      • type属性：
        • disc 实心圆点，默认值
        • circle 空心圆点
        • square 实心方块
        • none 无样式

    • 有序列表

      <ol type="1" start="1">
    <li>第一项</li>
    <li>第二项</li>
</ul>
      • type属性：
        • 1 数字列表，默认值
        • A 大写字母排序
        • a 小写字母排序
        • I 大写罗马字母排序
        • i 小写罗马字母排序
      • start属性为设置起始值

    • 标题列表

      <dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>
  • 表格

    • 基本格式：

      <table width height border cellspacing cellpadding bgcolor align>
    <!--表头-->
    <caption>表名</caption>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <!--th为表格标题，也就是表结构，会自动加粗-->
        </tr>
    </thead>
    <!--表主体-->
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

      PS：写 <thead> <tbody> <tfoot>对SEO更好，不写也没问题。

    • 参数

      width：宽度
height：高度
border：边框宽度
cellspacing：单元格与单元格的距离
cellpadding：内容距边框的距离
bgcolor：表格背景颜色
align=”left | right | center”
 如果直接给表格用align=”center” 表格居中
 如果给tr或者td使用 ，tr或者td内容居中。

    • 合并单元格

      • 横向合并单元格：<td colspan="num">填写内容</td>

        <tr>
	<td colspan="2">Abner</td>
    <!--<td>21</td>-->
</tr>

      • 纵向合并单元格：<td rowspan="num">填写内容</td>

        <tr>
    <td>Sunny</td>
    <td rowspan="2">22</td>
</tr>
<tr>
    <td>Marry</td>
    <!--<td>25</td>-->
  • form标签

    • 格式：

      <from action='url' method=""></from>

      • 主要属性：

        • action负责处理信息，信息提交至指定的web服务器进行处理。

        • method="get|post"

          get：通过地址栏提供（传输）信息（可以在地址栏里看到你输入的账号和密码），安全性差。

          method:通过文件来处理信息,密码等信息全部会被封装到文件中传输，安全性高。

    • label标签

      • 定义：关联标签，遵循PEP8规范每个form标签下的输入，必须关联一个label标签

      • 格式：

        # 格式一
<label for="usr">用户名：</label>
<input id="usr" type="txt" name="usn">
# 格式二
<label>用户名：
	<input type="txt" name="usn">
</label>

      • 属性：for后面的内容是关联的标签的id值

    • input标签

      • 分类：

        • 文本输入框txt

          • 格式：

            <input type="txt" name maxlength readonly disabled value>

          • 属性：

            type：类型，输入的是文本内容
name：输入框的名字
maxlength：限定输入文本长度
readonly：文本框只读
disabled：文本框未激活
value：输入框中的默认内容
placeholder：引导文字，当文本框无文字并且未获取鼠标焦点时显示引导文字，当获取焦点或者输入文字时隐藏引导文字。

            例子：
<input type="text"
    name="username"
    maxlength="12"
    readonly="readonly"
    disabled="disabled"
    value="用户名">

        • 密码输入框password

          • 格式：

            <input type="password" name="pwd">

            PS：文本输入框的所有属性对密码输入框都有效

        • 日期输入框date

        • 邮箱输入框email

        • 单选框radio

          • 格式：

            <input type="radio" name checked>

          • 属性：

            • checked="checked"作用是设置默认选择项

          PS：当有多个选项时怎么设置只有其中只有被选中？

          只有当name的值设置相同时，才可以实现单选的效果。

        • 多选框checkbox

          • 格式：

            <input type="checkbox" name checked>

          • checked的作用和单选框相同。

        • 文件上传file

          • 格式：

            <input type="file">

        • 图片上传image

          • 格式：

            <input type="image" src="图片路径">
# 图片上传可以实现信息提交的功能

        • 普通按钮button

          • 格式：

            <input type="button" value="普通按钮">

            PS:不能提交信息，一般配合js按钮点击事件使用。

        • 上传按钮submit

          • 格式：

            <input type="submit" value="提交按钮">

        • 重置按钮reset

          • 格式：

            <input type="reset" value="重制按钮">

    • 下拉列表select标签

      • select标签内部包含的是option，需要配置value属性，默认选择select="select"

      • 属性：

        multiple=”multiple”： 将下拉列表设置为多选
selected=”selected”：设置默认选中项目
<optgroup></optgroup> 对下拉列表进行分组。
Label="分组名称" 分组名称。

    • 多行文本编辑框textarea标签

      • 属性：

        1. cols：控制输入字符的长度

        2. rows：控制输入字符的行数

posted @ 2018-10-15 21:30  AbnerLing  阅读(83)  评论(0)  编辑  收藏  举报