前端基础入门——页面结构层html

hiyoritsai
348 阅读8分钟

html基础

基础语法

html概念

HTML（Hypertext Markup Language）即超文本标记语言。

了解html发展史

  • 93年（IETF）发布HTML1.0
  • 95年（W3C）发布HTML2.0
  • 96年（W3C）发布HTML3.0
  • 97年（W3C）发布HTML4.0
  • 99年（W3C）发布HTML4.0.1
  • 00年（W3C）发布XHTML1.0
  • 01年（W3C）发布XHTML1.1
  • 04年（WHATWG）发布HTML5草案
  • 08年（合并）HTML5正式版
  • 14年HTML5定稿

HTML特点

  • HTML不需要编译，直接由浏览器执行
  • HTML是一个文本文件
  • HTML文件必须使用html或htm为文件名后缀
  • HTML大小写不敏感，HTML与html一样

开发工具

记事本、Word、DreamWeaver、Subline等。

基础语法

HTML基本结构

image.png 写在head标签内的所有内容在网页中不会显示出来，浏览器能看到的内容全都写在body标签内。

注释

<!-- 注释内容 -->

文档段落

DOCTYPE用于声明文档类型，声明必须放在HTML文档第一行，不是HTML标签。

网页编码设置

问题：当网页显示出现乱码时
解决：在<head></head>标签之间添加

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

这句话声明了网页使用什么语言和编码形式。

其中，http-equiv 声明文档类型，content 声明编码形式，国内常用编码是 utf-8、gb2312、gbk 等编码。

utf-8 支持简体中文、繁体中文、日文、韩文等；gb2312支持简体中文。

HTML 4.01 与 HTML5之间的差异

使用 http-equiv 已经不是规定 HTML 文档的字符集的唯一方式

  • HTML 4.01
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  • HTML5
<meta charset="UTF-8">

文字和段落标签

  • 标题标签：<h1></h1>~<h6></h6>

  • 段落标签：<p></p>，段落与段落之间会有一段空白以区分不同段落。

  • 预格式标签：<pre></pre>，在此标签内输入的文本是什么形式的，在网页中就以什么形式展现。 align对齐属性值

  • left：左对齐内容

  • right：右对齐内容

  • center：居中对齐内容

  • justify：对行进行伸展，这样每行都可以有相等的长度。

修饰标签和特殊符号

  • 斜体：<i>、<em>
  • 加粗：<b>、<strong>
  • 小于号或显示标记"<"：&lt;
  • 大于号或显示标记">"：&gt;
  • 已注册"®"：&reg;
  • 版权"©"：&copy;
  • 商标"™"：&trade;
  • 不断行的空白：&nbsp;

列表标签

无序列表<ul>

其中列表项用<li>表示。

<ul>
   <li>列表项</li>
   <li>列表项</li>
   ……
</ul>

<ul>标签的type属性值

  • disc：圆点
  • square：正方形
  • circle：空心圆

有序列表<ol>

列表项有先后顺序，其中列表项用<li>表示。

<ol>
   <li>列表项</li>
   <li>列表项</li>
   ……
</ol>

    标签的type属性值

    • 1：数字1、2
    • a：小写字母a、b
    • A：大写字母A、B
    • i：小写罗马数字i、ii、iii
    • I：大写罗马数字I、II、III

    定义列表

    应用场景：带摘要、新闻缩略图的列表

    <dl>
  <dt>定义项目</dt>
  <dd>项目描述</dd>
  <!-- dt与dd标签成对出现，并且是并列关系，不能嵌套 -->
</dl>

    调试工具

    快捷键F12

    经验
    开发中，ul和ol的编号去掉，使用图片代替。

    图像和超链接

    图像标签<img>

    src属性是必填的，指明图片存放的路径。

    alt属性用于网速太慢、src属性中的错误、浏览器禁用图像导致用户无法查看图像时，可以代替图像显示在浏览器中。

    <img>标签引入图片时路径中的斜杠/和反斜杠\是一样的。

    html路径分为相对路径和绝对路径，绝对路径要从盘符开始写起，相对路径是图片相对于网页的路径。

    • 若html文件与图片文件位于同级文件夹，则相对路径为
    <img src="pic.jpg" />
    • 若图片位于html文件的上一级，则相对路径为
    <img src="../pic.jpg" />

    注意：../代表一个上一级，如上一级的上一级则表示为../../

    • 若图片位于html文件的下一级，则相对路径为
    <img src="文件夹名/pic.jpg" />

    注意：创建的文件夹建议都用英文

    超链接标签<a>

    <a href="" >内容</a> <!-- 当链接为空时，点击超链接会刷新 -->

    站内链接即本网站内的页面跳转，一般使用相对路径。

    站外链接即从当前网站跳转到另一个网站中，一般使用绝对路径。
    属性

    • href—链接地址（href="#"为空链接）
    • target—链接的目标窗口，有_self（在当前窗口打开）、_blank（创建新窗口，打开新页面）、_top、_parent
    • title—链接提示文字，额外信息
    • name—链接命名

    锚链接

    通过name属性定义锚的名称，实现点击链接直接定位到某个位置的效果。

    <!-- 同一页面 -->
<a href="#锚名1" >目录1</a>
<a href="#锚名2" >目录2</a>
<a href="..." name="锚名1" >内容</a>
    xxxxx
<a href="..." name="锚名2" >内容</a>
    xxxxx
<!-- 不同页面 -->
网页1：<a href="网页名称#锚名" >...</a>
网页2：<a name="锚名" >...</a>
    xxxxx

    总结：定义锚的位置和锚名，设置寻找锚的链接。

    邮箱链接

    <a href="mailto:邮箱地址">...</a>

    文件下载

    <a href="下载文件的地址">...</a>

    注意：下载文件要压缩；直接写下载的文件名，会打开文件。

    html表格

    基础表格

    • <table>：表格
    • <tr>：行
    • <td>：单元格
    • <th>：表头单元格（内容居中，加粗显示）
    • <caption>：表格标题（居中显示）

    以下是一个3×3的表格

    <table>
    <caption>表格标题</caption>
    <thead>
    <tr>
        <th>表头标题1</th>
        <th>表头标题2</th>
        <th>表头标题3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
    </tr>
    </tfoot>
</table>

    表格操作

    添加、删除第N列时，要把每行的第N个单元格删掉。

    带结构的表格

    表格划分三部分：表头、主题、脚注

    • thead：表格的头（放表格的头），会在最开始显示
    • tbody：表格的主体（放数据本体），会在中间显示
    • tfoot：表格的脚（放表格的脚注），会在最后一行显示 使用带结构的表格目的是当网速太慢时，网页可以按照表格划分来逐部分加载。但这三个标签不会影响表格的展示。

    表格属性

    跨列（行）属性colspan（rowspan）

    <td colspan="2">xxx</td> <!-- 表示将包括此单元格在内的2个单元格按跨列形式合并起来。 -->
<td rowspan="2">xxx</td> <!-- 表示将包括此单元格在内的2个单元格按跨行形式合并起来。 -->

    表格嵌套

    嵌套的表格必须放在<td>标签内

    <table>
    <caption>表格标题</caption>
    <thead>
    <tr>
        <th>表头标题1</th>
        <th>表头标题2</th>
        <th>表头标题3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>
        <!-- 表格嵌套 -->
        <table>
            <tr>
                <td>xx</td>
            </tr>
        </table>
        </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
    </tr>
    </tfoot>
</table>

    表格布局

    尽量少用表格嵌套、尽量少用跨行跨列，否则会增加代码维护的成本。

    表单基础结构

    form元素是块级元素，其前后会产生析行。

    表单应用场景

    image.png

    表单元素

    表单元素有：文本域、单选框、复选框、按钮、列表……
    注意：表单本身不可见，所有表单内容要写在<form>标签内

    input标签

    点击submit类型的按钮，表单内容提交至服务器。

    name属性用于表单元素命名，数据处理时，通过name名称来区分。

    文本域和文件域

    placeholder属性用来提示内容标签。

    size属性设置文本域的宽度为多少个英文字符。

    maxlength指用户输入得最大字符长度。

    文件域file可以访问本机文件，并上传到服务器。

    单选框和复选框

    单选框radio用checked来设置默认选中值。

    一组单选框若只能选择其中一个就要给它们起相同的name。

    提交表单时上传的是<input>标签中value属性的值。

    <!-- 单选框 -->
<input type="radio" name="sexual" value="1" checked />男
<input type="radio" name="sexual" value="2" />女
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="dance"/>跳舞
<input type="checkbox" name="hobby" value="sing"/>唱歌
<input type="checkbox" name="hobby" value="read"/>阅读

    图像域

    图像域不单单是一个图片，而且和属性为submit的botton一样，有提交表单的功能。

    <input type="image" name="xxx" src="..." />

    隐藏域

    用于有些信息不想让用户看到，又需要传递数据的情况。

    <input type="hidden" name="xxx" value="xxx" />

    按钮

    <button>的三种类型

    • button（多配合js使用）
    • submit（点击提交表单）
    • reset（清空表单恢复初始设置）

    下拉菜单和列表标签

    优点是节约空间。

    <select>    <!-- 下拉菜单开始 -->
    <option value="1"> 列表项1 </option>
    <option value="2"> 列表项2 </option>
    <option value="3"> 列表项3 </option>
</select>

    <select>标签属性

    • name（设置下拉菜单和列表的名称）
    • multiple（设置可选择多个选项）
    • size（设置列表中可见选项的数目，设置了就是列表，不设置则是下拉菜单）

    <option>标签属性

    • selected（设置选项初始选中状态）
    • value（定义送往服务器的选项值）

    分组下拉菜单和列表标签

    <!--  -->
<select name="xxx">
    <optgroup label="group1">
        <option value="..." selected>选项</option>
        <option value="...">选项</option>
    </optgroup>
    <optgroup label="group2">
        <option value="...">选项</option>
        <option value="...">选项</option>
    </optgroup>
</select>

    多行文本域

    <textarea>标签属性

    • rows（设置文本内可见行数）
    • cols（设置文本内可见列数）

    表单页面调整

    表单页面调整

    表单提示文字一般右对齐，表单元素一般左对齐。

    表单属性

    <form action="" method="" name=""... >
    表单元素
</form>

    method属性的默认值是get，get会把表单信息暴露在url中，而post不会，它起到一定的保密性，因此用form表单提交密码之类的信息应该用post方法。

    target属性的默认值是_self。

    搭建网页结构

    div和span标签

    <div>标签是一个区块容器，其中可以包含段落、表格、图片等各种html元素。

    <span>标签没有任何意义，只是为了应用样式。

    <div>标签是块级元素，<span>标签是行内元素。

    块级元素需要独占一行，每个块级元素都需要换行，一般用于搭建网页结构、布局。

    行内元素在一行进行展示，不需要换行，一般用于样式的展示。

    标签嵌套

    标签嵌套规则

    • 块级元素可包含行内元素和某些块级元素。
    • 行内元素不能包含块级元素，只能包含其他行内元素。
    • 块级元素不能放在<p>标签内，<p>标签是用来显示文字段落的。如果将块级元素放到

      标签内，在浏览器中会自动将<p>标签内的块状元素脱离出来，改正这个错误。

    • 有些特殊的块级元素只能包含行内元素，不能再包含块级元素。比如<h1>~<h6>、<p>、<dt>
    • 块级元素和块级元素并列，行内元素和行内元素并列。
    <div><h1></h1><p></p></div>      <!-- 块级元素并列 正确 -->
<div><span></span><a href=""></a></div>    <!-- 行内元素并列 正确 -->
<div><h1></h1><span></span></div>    <!-- 行内元素和块级元素并列 错误 但也能正常显示 -->
avatar
文章
阅读
粉丝