HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML由一系列元素(elements)组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或工作。一对标签可以为一段文字或者一张图片添加超链接、设置字体、字号等。

HTML元素

  • 元素结构：普通元素 = 开始标签+内容+结束标签。
  • 空元素：不包含任何内容的元素称为空元素，空元素不需要通过内容来产生效果，比如 img、br元素。
  • 元素嵌套：元素可以相互嵌套，但必须保证元素嵌套次序正确。
  • 元素属性：属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。属性应该包含空格符 + 等号 + 属性值（由引号所包围）。

HTML文档格式

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>测试页面</title>

  </head>

  <body>

    <img src="data:images/firefox-icon.png" alt="测试图片">

  </body>

</html>
  • <!DOCTYPE html> ：文档类型。在当今作用有限，仅用于保证文档正常读取。
  • <html></html>：包含整个页面的内容，也称作根元素。
  • <head></head> ：对用户不可见，包含面向搜索引擎的搜索关键字、页面描述、CSS 样式表和字符编码声明等。
  • <meta> ：指定文档使用 UTF-8 字符编码 。
  • <title></title> ：设置页面的标题。
  • <body></body> ：包含期望让用户在访问页面时看到的内容主体，包括文本、图像、视频等内容。

HTML常用标签

1、字体标签：<font>...</font>

<font size=14 face="楷体" color="red">我是楷体、红色</font>

注:在HTML4中不赞成使用字体标签，HTML5直接不支持，而是使用CSS实现字体样式

2、标题标签：<h?>...</h?>

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

注：一般只使用三级标签，标题是为了结构如果只是为了样式，可使用CSS。<h1>标签尽量靠近<body>标签可以让搜索引擎更快领略主体。

3、段落标签：<p>...</p>

<p>这是一个段落</p>

注：段落内会根据容器宽度自动换行，段落间会自动添加空行

4、图片标签：<img>

<img src="相对地址、绝对地址、URL" alt="图片有错误时的显示信息" width="100px" height="100px">

width和height属性一般使用CSS配置

5、超链接：<a herf="xxx">...</a>

<a herf="https://www.baidu.com">点击文字打开百度</a>`

<a herf="https://www.baidu.com" target="_blank">点击文字在新页面打开百度</a>`

<a herf="img/1.png">点击文字打开本地图片</a>

<!--点击图片打开网址-->

<a herf="https://www.baidu.com"><img src="img/baidu.jpg"></a>

6、锚点

<!--先定义锚点-->

<a name="锚点1"></a>

<!--使用锚点链接-->

<a herf="#锚点1">跳转到锚点一</a>

<a herf="index.html#锚点1">跳转到index页面中的锚点一</a>

7、列表

无序列表

<ul>

    <li>

    <li>

</ul>

有序列表：

<ol>

    <li>

    <li>

</ol>

注：<li>标签内可以使用段落、链接、图片、其他列表等元素

8、表格：<table>...</table>

<table border="1">

    <tr>

        <th>Header 1</th>

        <th>Header 2</th>

    </tr>

    <tr>

        <td>row 1, cell 1</td>

        <td>row 1, cell 2</td>

    </tr>

    <tr>

        <td>row 2, cell 1</td>

        <td>row 2, cell 2</td>

    </tr>

</table>

9、表单：<form>...</form>

<form>

<label for="">请输入姓名：</label>  <input type="text" name="firstname"><br>

<label for="">请输入密码：</label>  <input type="text" name="lastname">

</form>

HTML：HTML基础的更多相关文章

  1. java基础集合经典训练题

    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...

  2. node-webkit 环境搭建与基础demo

    首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...

  3. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. Golang， 以17个简短代码片段，切底弄懂 channel 基础

    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...

  5. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  6. HTTPS 互联网世界的安全基础

    近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...

  7. Swift与C#的基础语法比较

    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

  8. .NetCore MVC中的路由（1）路由配置基础

    .NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...

  9. .NET基础拾遗（5）多线程开发基础

    Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...

  10. .NET 基础 一步步 一幕幕[面向对象之方法、方法的重载、方法的重写、方法的递归]

    方法.方法的重载.方法的重写.方法的递归 方法: 将一堆代码进行重用的一种机制. 语法: [访问修饰符] 返回类型 <方法名>(参数列表){ 方法主体: } 返回值类型:如果不需要写返回值 ...

随机推荐

  1. HDU-6704 K-th occurrence（后缀数组+主席树）

    题意 给一个长度为n的字符串,Q次询问,每次询问\((l,r,k)\) , 回答子串\(s_ls_{l+1}\cdots s_r\) 第\(k\) 次出现的位置,若不存在输出-1.\(n\le 1e5 ...

  2. hdu5790 Prefix(Trie树+主席树)

    Problem Description Alice gets N strings. Now she has Q questions to ask you. For each question, she ...

  3. Codeforces Round #646 (Div. 2) C. Game On Leaves（树上博弈）

    题目链接:https://codeforces.com/contest/1363/problem/C 题意 有一棵 $n$ 个结点的树,每次只能取叶子结点,判断谁能最先取到结点 $x$ . 题解 除非 ...

  4. Educational Codeforces Round 94 (Rated for Div. 2) A. String Similarity (构造水题)

    题意:给你一个长度为\(2*n-1\)的字符串\(s\),让你构造一个长度为\(n\)的字符串,使得构造的字符串中有相同位置的字符等于\(s[1..n],s[2..n+1],...,s[n,2n-1] ...

  5. mysql-画图

    目录 阿里数据库产品rds 淘宝数据库架构 数据库下载 Mysql3种安装方法 mysql_install_db安装数据库命令脚本中有生成初始mysql数据 也可以把mysql_install_db集 ...

  6. Explain 索引优化分析

    Explain 语法 # 语法 explain + DQL语句 mysql> explain select * from city where countrycode ='CHN' or cou ...

  7. Django的settings配置文件

    一.邮件配置 EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' EMAIL_HOST = 'smtp.qq.com' EMAI ...

  8. Redis面试常见问题（一）

    一.redis 简介简单来说 redis 就是一个数据库,不过与传统数据库不同的是 redis 的数据是存在内存中的,所以读写速度非常快,因此 redis 被广泛应用于缓存方向.另外,redis 也经 ...

  9. Stack Overflow Skill IQ Testing All In One

    Stack Overflow Skill IQ Testing All In One Pluralsight IQ | Stack Overflow https://www.pluralsight.c ...

  10. React Hooks: useCallback All In One

    React Hooks: useCallback All In One useCallback https://reactjs.org/docs/hooks-reference.html#usecal ...