一.HTML的结构

1.1 html文档主要包含两个部分：头区域和实体区域。

1.2 html的三个主要标签：<html>、<head>、<body>。<html>标签是用来标记html文档，<head>是标签标记头部区域，<body>是标签标记主体区域。

最基本的html代码如下:

<html>

    <head>

    </head>

    <body>

    </body>

</html>

二.HTML的语法

2.1 元素的属性包含属性名称和属性值，两个部分，属性与属性值之间使用“=”链接，属性与属性之间使用空格链接。

例子：

<tag a1="v1" a2="v2"> 元素主体 </tag>

属性值必须加上引号

属性也可以没有属性值

2.2标签可以嵌套但是不能交叉

2.3注释文本的格式：<!--单行注释-->

　　　　　　　　　 <!--

　　　　　　　　　　　多行注释-->

三.HTML标签

3.1文本格式标签

<title>...</title>  标识网页标题

<hi>...</hi> 标识标题文本，i表示级数

<p>...</p>标识段落语言

<pre>...</pre>标识预定义文本

<blockquote>...</blockquote>标识引用文本

例子：

<html>

    <head>

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

        <title>大标题</title>

    </head>

    <body>

        <h1>一级标题</h1>

        <p>在这里我真的想说很多，但是我省略一万字</p>

        <h1>第二个一级标签标签</h1>

        <p>同样的</p>

        <h2>二级标签</h2>

        <p>一万字</p>

    </body>

</html>

效果：

3.2字符格式标签

<b>...</b>字体加粗

<i>...</i>斜体

<big>...</big>放大字体

<small>...</small>缩小字体

<sup>...</sup>上标文本

<sub>...</sub>下标语言

<cite>...</cite>显示引用文本

例子：

<html>

    <head>

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

        <title>标题</title>

    </head>

    <body>

        <h1>大标题</h1>

        <p>下面来看一下特效:</p>

        <p>斜体:<i>斜体</i></p>

        <p>加粗:<b>加粗</b></p>

        <p>放大:<big>放大</big></p>

        <p>缩小:<small>缩小</small></p>

        <p>上标:<sup>上标</sup></p>

        <p>下标:<sub>下标</sub></p>

        <p>引用文本:<cite>PHP是世界上最好的语言 ——无知者</cite></p>

        <p>我来嵌套一个斜体和加粗以及<i><b>斜体加粗</b></b></i></p>

    </body>

</html>

效果：

3.3列表标签

HTML中的列表结构有两种：有序，无序。无序列表使用项目符号来标记项目顺序，有序列表用编号来标记项目顺序。

<ul>...</ul>标识无序列表

<ol>...</ol>标识有序列表

<li>...</li>标识列表项目

例子：

<html>

    <head>

    <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>

        <title>标题</title>

    </head>

    <body>

    <h1>我们的商品有:</h1>

    <ul>

        <li>快乐水</li>

        <li>东北大辣皮</li>

        <li>emmm没想好</li>

    </ul>

    </body>

</html>

效果：

设计一个含有解释的词条：

<dl>...</dl>定义一个解释的列表

<dt>...</dt>标识词条

<dd>...</dd>解释词条

<html>

    <head>

    <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>

        <title>标题</title>

    </head>

    <body>

    <h1>我们的商品有:</h1>

    <ul>

        <li>快乐水</li>

        <li>东北大辣皮</li>

        <li>emmm没想好</li>

    </ul>

    <h1>其实我还想解释一下我们的商品</h1>

        <dl>

            <dt>快乐水</dt>

            <dd>可口可乐</dd>

            <dt>东北大辣皮</dt>

            <dd>垃圾食品</dd>

        </dl>

    </body>

</html>

效果：

3.4超链接

<a href=url>...</a>

例子：

<html>

    <head>

    <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>

    <body>

    <a href="https://www.baidu.com/">百度直通车</a>

    </body>

    </head>

</html>

3.5多媒体标签

<img/>嵌入图像

<embed>...</embed>嵌入多媒体

<object>...</object>嵌入多媒体

3.6表格标签

<table>...</table>定义表格结构域

<caption>...</caption>表格标题

<th>...</th>定义表头

<tr>...</tr>定义行

<td>...</td>定义表格单元格

例子：

<html>

    <head>

        <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>

        <title>标题</title>

    </head>

    <body>

        <table summary="我就是想要一个表格">

            <caption>表格的标题</caption>

            <tr>

                <td>中国</td>

                <td>美国</td>

                <td>英国</td>

            </tr>

            <tr>

                <td>韩国</td>

                <td>日本</td>

                <td>德国</td>

            </tr>

        </table>

    </body>

</html>

结果

3.7单表标签

<form>...</form>定义单表结构

<input/>:定义文本域，按钮和复选框

<textarea>...</textare>定义多行文本框

<select>...</select>定义下拉列表

<option>...</option>定义下拉列表中的选择项目

列子：

<html>

    <head>

        <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>

    </head>

    <body>

        <form id="from1" name="form1" method="post" action="">

            <p>单行文本域<input type="text" name="textfield" id="textfield"/></p>

            <p>密码域<input type="password" name="passwordfield" id="passwordfield"></p>

            <p>多行文本域<textarea name="textarefield" id="textarefield"></textarea></p>

            <p>复选框 复选框1<input name="checkbox1" type="checkbox" value="">

               复选框2<input name="checkbox2" type="checkbox" value="">

            </p>

            <p>单选按钮

                <input name="radio1" type="radio" value=""/>按钮1

                <input name="radio2" type="radio" value=""/>按钮2

            </p>

            <p>下拉菜单

                <select name="selectlist">

                    <option value="1">选项1</option>

                    <option value="2">选项2</option>

                    <option value="3">选项3</option>

                </select>

            </p>

        </form>

    </body>

</html>

结果：

小白学习前端---第一天 了解HTML的更多相关文章

  1. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  2. 小白学习django第一站-环境配置

    Django简单来说就是用Python开发的一个免费开源的Web框架 使用Django,使你能够以最小的代价构建和维护高质量的Web应用. 开搞!!! 工具准备: linux(ubuntu) + py ...

  3. 小白学习python第一天，Pycharm破解与用法（持续更新）

    目录 Pycharm安装与破解及汉化 Pycharm安装 Pycharm破解 Pycharm汉化 Pycharm使用 添加作者.时间等信息 补充 @ Pycharm安装与破解及汉化 本人最近开始找到了 ...

  4. 小白学习前端---第二天 HTML的基本属性————1

    一.HTML的属性 1.1基本属性 1.1.1三个基本属性 class    定义类规则或者样式规则 id   定义元素的唯一标识 stype 定义元素的样式声明 1.1.2不含三个基本属性的元素 h ...

  5. 学习前端 第一天之html标签补充

    一.常用浏览器内核 Trident(IE内核) Gecko(firefox) webkit(Safari) Chromium/Blink(chrome) Blink(Opera) 二.常见标签回顾 a ...

  6. 学习前端第一天心得体会（初步了解HTML5的新特性以及和HTML的区别）

    一.HTML5是什么? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提 ...

  7. 偏前端--之小白学习本地存储与cookie

    百度了很多都是讲的理论,什么小于4kb啊之类的,小白看了一脸懵逼复制到html中为什么没效果!!哈哈.我来写一个方便小白学习. 贴图带文字描述,让小白也运行起来,然后自己再去理解... 1. cook ...

  8. 前端学习 linux —— 第一篇

    前端学习 linux - 第一篇 本文主要介绍"linux 发行版本"."cpu 架构"."Linux 目录结构"."vi 和 v ...

  9. 菜鸟Python学习笔记第一天：关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

随机推荐

  1. 基于TcpListerer的web服务器 和 基于HttpListerer的web服务器

    摘自<Asp.Net 本质论>作者:郝冠军 /* 为了简化基于TCP协议的监听程序,.NET在System.Net.Sockets命名空间中提供了TcpListerer类,使用它,在构造函 ...

  2. 浅谈table、form 标签

    1.<table> 标签 1.1包含的元素 <caption></caption>:表头信息. <tr></tr> :定义一个表格行: &l ...

  3. easyUI的form表单重复提交处理

    1. 问题 生产环境出现过新增用户提交, 入库两条重复数据的情况; 但是我查看代码, 页面做了校验, 后台插入数据也做了校验;  出现这种几率的事件的非常小的, 但是还是会碰到, 客户会对我们的产品产 ...

  4. Linux svn的搭建和使用

    搭建: http://www.cnblogs.com/aLittleBitCool/archive/2011/07/09/2101602.html 使用: http://www.cnblogs.com ...

  5. element-ui 表格翻页多选，数据回显

    reserve-selection与row-key结合 <el-table :data="pageData" ref="goodsTable" size= ...

  6. moment.js 常用（几天前、相差几天、自然周、自然月）

    let pickDate = moment(this.searchForm.date); let firstDay = pickDate.day(0).format('YYYYMMDD');//上周天 ...

  7. mysql 如何在访问某张数据表按照某个字段分类输出

    也许大家有时候会遇到需要将把数据库中的某张表的数据按照该表的某个字段分类输出,比如一张数据表area如下 我们需要将里面的area按照serialize字段进行分类输出,比如这种形式: areas   ...

  8. unity实现用鼠标右键控制摄像机视角上下左右移动

    using System;using System.Collections.Generic;using UnityEngine;public class ViewControl{ enum Rotat ...

  9. MariaDB Role

    一.MariaDB Role介绍 MariaDB从10.0/10.1版本开始支持role. Role相当于各种权限的集合,可以给多个账户统一权限的修改直接通过修改role来实现,不需要每个账户一个一个 ...

  10. vue-router-5-命名路由

    创建 Router 实例的时候,在 routes 配置中给某个路由设置名称 const router = new VueRouter({ routes: [ { path: '/user/:userI ...