小白学习前端---第一天了解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有很多语言的 ...

随机推荐

Hadoop---目录结构介绍
Hadoop---目录结构介绍 1.Hadoop目录结构 1.一级目录介绍 2.etc详解: 3sbin 4.bin 5.share 6.一个数独测试 2.hadoop的历史 3. Ha ...
1.Liunx 文件管理
文件管理命令 1.基本命令:ls .cd .pwd .man 2.文件操作:touch . cp . rm . mv .ln . mkdir . rmdir 3.文件查看:cat .more .les ...
Oracle Shared Pool之Library Cache
1. Shared Pool组成 Shared Pool由许多区间(Extent)组成,这些区间又由多个连续的内存块(Chunk)组成,这些内存块大小不一.从逻辑功能角度,Shared pool主要包 ...
网页定位点击事件js响应函数教程（Chrome）
一.背景说明在前端页面调试或者渗透测试(尤其是XSS)时,我们经常想定位js函数位置:比如点击了某个位置弹出了一个对话框,这是哪个文件的哪个js函数在响应. 本文以Chrome浏览器定位点击事件响应 ...
windows工具打开命令
程序命令位置记事本 notepad C:\Windows\system32 ping ping C:\Windows\System32 服务管理器 services.msc C:\Windows ...
flex入门----基础知识
传统的页面布局在flex出现之前,双列布局,三列布局,动态盒居中,绝对居中布局等常见的布局均是采用dispaly+float+定位来布局的,一般包括以下几种布局策略: normal flow(文 ...
【转载】offer经验
http://www.cnblogs.com/figure9/archive/2013/01/09/2853649.html
java 一些容易忽视的小点-类和对象
构造器通过new关键字调用构造器虽然有返回值,但是不能定义返回值类型(返回值的类型肯定是本类),不能在构造器里使用return返回某个值. 构造器是有权限的,也就是可以添加public,也可以添加 ...
configparse 模块
config parser 用于解析配置文件的模拟何为配置文件包含配置程序信息的文件就是称为配置文件什么样的数据应作为配置文件需要该但是不经常改的信息例如数据文件的路径 db_pa ...
bzoj1798
题解: 同洛谷2023 代码: #include<bits/stdc++.h> using namespace std; typedef long long ll; ; ll p,v,su ...

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

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

随机推荐

热门专题

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

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