一.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. nginx升级教程

    1.说明 CVE-2016-4450,可通过构造特定数据包,可引发nginx引用空指针,导致nginx出错从而造成拒绝服务攻击. 影响1.3.9到1.11.0的所有版本,进行修复的1.10.1和1.1 ...

  2. Windows开启远程桌面服务（Win10）

    进入控制面版,找到远程设置 应用确定后Windows服务即会被启动.

  3. 将16进制unsigned char数组转换成整数

    /** * 将unsigned char数组转换成long long数值 * {0x00 0x00 0x20 0x00}转换之后得到8192 * * @param str 数组 * @param le ...

  4. java爬虫进阶 —— ip池使用，iframe嵌套，异步访问破解

    写之前稍微说一下我对爬与反爬关系的理解 一.什么是爬虫      爬虫英文是splider,也就是蜘蛛的意思,web网络爬虫系统的功能是下载网页数据,进行所需数据的采集.主体也就是根据开始的超链接,下 ...

  5. SpringBoot添加webapp目录

    一.文章简述 使用IDEA工具创建的SpringBoot项目本身是没有webapp目录的.如果我们想要添加webapp目录的话,可以手动添加. 二.操作步骤 1)点击IDEA右上角的Project S ...

  6. Java集合list,map,set区别及遍历

    1.1 List.Set.Map基本区别 1.List,Set都是继承Collection接口,Map不是. 2.List:LinkedList.ArrayList.Vector Set :HashS ...

  7. mysql 语句根据身份证查询年龄，地址，性别

    select  case left(idcard,2) when '11' then '北京市'when '12' then '天津市'when '13' then '河北省'when '14' th ...

  8. SQLite 剖析

    由于sqlite对多进程操作支持效果不太理想,在项目中,为了避免频繁读写 文件数据库带来的性能损耗,我们可以采用操作sqlite内存数据库,并将内存数据库定时同步到文件数据库中的方法. 实现思路如下: ...

  9. LY.JAVA面向对象编程.final、多态、抽象类、接口

    2018-07-08    13:47:26 final关键字 多态 从右向前念 多态的成员访问特点及转型的理解 多态的问题理解: class 孔子爹 { public int age = 40; p ...

  10. 逆袭之旅DAY10.东软实训.