小白学习前端---第一天了解HTML

一.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超链接

例子：

<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/>嵌入图像

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的更多相关文章

小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
小白学习django第一站-环境配置
Django简单来说就是用Python开发的一个免费开源的Web框架使用Django,使你能够以最小的代价构建和维护高质量的Web应用. 开搞!!! 工具准备: linux(ubuntu) + py ...
小白学习python第一天，Pycharm破解与用法（持续更新）
目录 Pycharm安装与破解及汉化 Pycharm安装 Pycharm破解 Pycharm汉化 Pycharm使用添加作者.时间等信息补充 @ Pycharm安装与破解及汉化本人最近开始找到了 ...
小白学习前端---第二天 HTML的基本属性————1
一.HTML的属性 1.1基本属性 1.1.1三个基本属性 class 定义类规则或者样式规则 id 定义元素的唯一标识 stype 定义元素的样式声明 1.1.2不含三个基本属性的元素 h ...
学习前端第一天之html标签补充
一.常用浏览器内核 Trident(IE内核) Gecko(firefox) webkit(Safari) Chromium/Blink(chrome) Blink(Opera) 二.常见标签回顾 a ...
学习前端第一天心得体会（初步了解HTML5的新特性以及和HTML的区别）
一.HTML5是什么? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提 ...
偏前端--之小白学习本地存储与cookie
百度了很多都是讲的理论,什么小于4kb啊之类的,小白看了一脸懵逼复制到html中为什么没效果!!哈哈.我来写一个方便小白学习. 贴图带文字描述,让小白也运行起来,然后自己再去理解... 1. cook ...
前端学习 linux —— 第一篇
前端学习 linux - 第一篇本文主要介绍"linux 发行版本"."cpu 架构"."Linux 目录结构"."vi 和 v ...
菜鸟Python学习笔记第一天：关于一些函数库的使用
2017年1月3日星期二大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

随机推荐

Linux查看用户属于哪些组/查看用户组下有哪些用户
一.关于/etc/group格式的讨论在说/etc/group格式的时候,网上很多文章都会说是“组名:组密码:组ID:组下用户列表”,这说法对了解/etc/group格式是没问题的,但如果碰到“查看 ...
makefile文件写法解析
一.makefile文件示例 makefile文件并不难写,一个makefile模版如下所示,所有makefile文件在此基上稍微修改就可以了. # this is a makefile #这一行是注 ...
java继承，final，super，Object类，toString，equals，
Java中的内部类:成员内部类静态内部类方法内部类匿名内部类内部类的主要作用如下: 1. 内部类提供了更好的封装,可以把内部类隐藏在外部类之内,不允许同一个包中的其他类访问该类 2. 内部类的方法可 ...
Node.js概要
Node.js是一个Javascript运行环境(runtime). Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好. Node.js是一个基于Chro ...
vue中nextTick和$nextTick的差别
<ul id="demo"> <li v-for="item in list">{{item}}</div> < ...
设计一个高质量的API接口
参考网址:http://url.cn/5UaTeyv 前言在设计接口时,有很多因素要考虑,如接口的业务定位,接口的安全性,接口的可扩展性.接口的稳定性.接口的跨域性.接口的协议规则.接口的路径规则. ...
关于执行findbugs,checkstyle,jacoco插件检测代码，GitHook的脚本编写
Git钩子的作用: (pre-commit ) 在用户执行 git commit -m "xxx" 命令之前,先执行pre-commit文件中的脚本命令在pre-commit文件 ...
QuickHit 项目
package cn.javaoppday01; import java.util.Random; public class Game { public Player player; public G ...
linux文件查看
查看目录 #查看文件使用 ls 命令,加上参数 -l 表示查看详细信息,-a 表示查看包含隐藏文件在内的文件.也可使用通配符,*代表任意个字符,? 表示单个字符. $ ls ch*.doc #表 ...
Linux3.10.0块IO子系统流程（2）-- 构造、排序、合并请求
Linux块设备可以分为三类.分别针对顺序访问物理设备.随机访问物理设备和逻辑设备(即“栈式设备”) 类型 make_request_fn request_fn 备注 SCSI 设备等从bio构 ...

小白学习前端---第一天 了解HTML

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

随机推荐

热门专题

小白学习前端---第一天了解HTML

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