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

随机推荐

依赖注入 IOC
首先,明确下IoC是什么东西: 控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控 ...
Android AES加密报错处理：javax.crypto.IllegalBlockSizeException: error:1e00007b:Cipher functions:OPENSSL_internal:WRONG_FINAL_BLOCK_LENGTH
一.问题说明今天写AES加/解密功能的apk,设想是四个控件(测试用的,界面丑这种东西请忽略) 一个编缉框----用于输入要加密的字符串一个文本框----用于输出加密后的字符串,和加密后点击解密按 ...
html 打电话发短信
打电话:window.location.href = 'tel:'+tel 发短信:window.location.href = 'sms:'+tel
POJ 1458 最长公共子序列(dp)
POJ 1458 最长公共子序列题目大意:给出两个字符串,求出这样的一个最长的公共子序列的长度:子序列中的每个字符都能在两个原串中找到, 而且每个字符的先后顺序和原串中的先后顺序一致. Sam ...
Win10系列：C#应用控件基础5
ListBox控件上一小节介绍的ComboBox控件在外观上仅显示当前选中的选项,通过单击此控件文本框才能看到其他选项,而ListBox控件能够以列表形式始终显示选项.在ListBox控件中可以添加 ...
Java使用wait() notify()方法操作共享资源
Java多个线程共享资源: 1)wait().notify()和notifyAll()方法是本地方法,并且为final方法,无法被重写. 2)调用某个对象的wait()方法能让当前线程阻塞,并且当前线 ...
bzoj2946
题解: 和poj1226差不多把翻转去掉然后不要忘记开大数组和二分的上限答案代码: #include<bits/stdc++.h> using namespace std; type ...
javascript进阶笔记(3)
本篇文章我们来学习和讨论一下js中的闭包.闭包是纯函数式编程的一个特性,因为它们能够大大简化复杂的操作.在js中,闭包的重要性不言而喻! 简单的说,闭包(closure)是一个函数在创建时允许该 ...
mybatis学习（二）----对表进行CRUD操作
一.使用MyBatis对表执行CRUD操作——基于XML的实现 userMapper.xml映射文件如下: <?xml version="1.0" encoding=&quo ...
记录搭建ssm项目
搞java也快3年了,搭建一个ssm居然有点吃力. 参考链接:https://blog.csdn.net/gebitan505/article/details/44455235/ 环境准备:jdk8. ...

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

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

随机推荐

热门专题

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

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