HTML简介

什么是HTML

HTML 的全称为 超文本标记语言（Hyper Text Markup Language），这种语言给我们提供一种建立结构性文档的方法。通过表示结构性的标签语法，我们可以创建包含标题，段落，列表，图片以及其他内容的文档。简而言之，HTML语法是用来描述文档内容的。

HTML发展历程

HTML文档结构

要创建一个HTML文档，最简单的方法是创建一个文本文件，然后将其扩展名保存成.html。

组成文档结构的元素只有4个，这也是任何HTML文档都必须有的元素。

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>首页</title>

    </head>

    <body>

        <p>My cat is very grumpy</p>

    </body>

</html>

HTML元素

  • 开始标签（Opening tag）：开始标签有标签名和尖括号组成。
  • 闭合标签（Closing tag）：闭合标签在标签名之前多了一个斜线（/）。
  • 内容（Content）：元素的内容。
  • 元素（Element）：由开始标签、闭合标签以及标签之间的内容组成。

空元素

并不是所有的元素都由开始标签、内容、闭合标签3部分组成，有些元素只有一个单标签，这些元素通常用来在文档中插入一些东西，比如：元素会在页面上嵌入一张图片。

<img src="./images/imgdemo.jpg">

HTML 属性

元素可以用属性进行配置。属性由属性名和属性值组成，例如：

  • 属性总是写在开始标签中。
  • 属性名和元素名之间要有一个空格。
  • 属性名后面要跟一个等号（=）。
  • 属性值使用双引号或单引号括起来。如果属性值本身含有引号，那两种引号都要用到。
  • 一个元素可以有多个属性，这些属性之间以空格分隔。

常用的元素

标签 描述
<h1>~<h6> 定义标题
<p> 定义段落
<br> 换行
<pre> 定义预先格式化的文本。
<hr> 水平线
<b> 定义粗体文本
<em> 定义需要强调的文本
<i> 定义意大利斜体文本
<small> 定义小号文本
<strong> 定义重点文本
<ins> 定义插入的文本
<del> 定义删除的文本
<mark> 定义标记或需要高亮显示的文本
<div> 定义块级区域，作为其他HTML元素的容器，通常用于页面布局。
<span> 定义行内区域，作为一些文本的容器，用于控制文本的样式。
<img>  
<a>

注释

<!-- <p>My cat is very grumpy</p> -->

链接

  1. 页面之间的链接

假如我们写了A、B两个页面，那么怎样让这两个页面关联起来呢？这个时候就需要使用超链接了。

<a href="B.html">跳转到B页面</a>

它有如下两个重要属性：

  • href：指定要链接到哪个页面或哪个位置
  • target：指定如何显示页面，该属性有_self、_blank
  1. 锚链接

定义锚点其实就是在页面中创建一个定位点，当我们想要在其他地方跳转到这个定位点时，只需要创建一个定位到这个定位点的锚链接，就可以直接跳转到该定位点，这样就不需要通过鼠标滚动页面来寻找我           们需要的信息了。

首先，在 HTML 文档中定义一个锚点（也就是一个定位点），使用id属性定义锚点：

       <p id="tips">My cat is very grumpy</p>

然后，我们在同一个文档中创建指向该锚点链接：

       <a href="#tips">有用的提示</a>

也可以在其他页面中创建指向该锚点的链接：

       <a href="B.html#tips">有用的提示</a>

我们只需要将 # 符号和锚点的名称添加到 URL 的末尾，就可以链接到 tips 这个锚点了。

图片

code><img>元素用于在页面中嵌入图像，该元素是一个空元素。

必要属性：

  • src：该属性指定图片文件所在的位置，可以是相对路径，也可以是绝对路径。
  • alt：该属性指定一段文本，用来作为该图片的提示信息。

可选属性：

  • height：指定图片的高度，属性值可以是百分比，也可以是像素值。
  • width：指定图片的宽度，属性值可以是百分比，也可以是像素值。

元素的分类

根据HTML元素的默认显示方式，可将元素分为块级元素(block)和行内元素（inline）。

1：块级元素

块级元素总是另起一行，并且独占一行。行内元素不能嵌套块状元素，但它可以被嵌套在另一个块状元素内。例如：<div>，<ul>，<h1>~<h6>，<p>等元素。

2、行内元素

行内元素是那些包含在块级元素内部，并且只包含小部分文档内容的元素。行内元素不会另起一行，通常出现在一小段文本中，例如<a>元素，<em>元素或<strong>元素。

使用特殊字符

实体是浏览器用来替代特殊字符的一种编码，下表中列出了网页中常用的一些特殊字符。

最常用的字符实体

显示结果 描述 实体名称 实体编号
  空格 &nbsp;  
< 小于号 &lt; <
> 大于号 &gt; >
& 和号 &amp; &
" 引号 &quot; "
' 撇号 &apos; '
€ 欧元符号 &euro; €
￠ 分 &cent; ¢
£ 镑 &pound; £
¥ 日圆 &yen; ¥
§ 节 &sect; §
© 版权 &copy; ©
® 注册商标 &reg; ®
™ 商标符号 &trade; ™
× 乘号 &times; ×
÷ 除号 &divide; ÷

每个特殊字符都有一个实体编号，可以用来在文档内容中代表该字符。例如，字符"&"的实体编号是&#30;。特别常用的特殊字符还有对应的实体名称。例如，"&"的实体名称是&amp;，对于浏览器来说，&#30;和&amp;是一回事，都代表”&”。

特别声明：本人也是小白，想让与我一样的初学者一起学习，写的不好的地方请见谅

html和css入门 （一）的更多相关文章

  1. [HeadFist-HTMLCSS学习笔记][第七章CSS入门：加一点样式]

    CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...

  2. CSS入门教程——定位(positon)

    CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用.   定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...

  3. 第六十九节，css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  4. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  5. 胖虎都看得懂的CSS入门

    CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...

  6. 【Python全栈-CSS】CSS入门

    CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...

  7. day 31 html(二) 和css入门

    前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...

  8. HTML与CSS入门经典(第9版)试读 附随书源码 pdf扫描版​

    HTML与CSS入门经典(第9版)是经典畅销图书<HTML与CSS入门经典>的最新版本,与过去的版本相同,本书采用直观.循序渐进的方法,为读者讲解使用HTML5与CSS3设计.创建并维护世 ...

  9. css入门知识点整理

    css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...

  10. H5教程（二），CSS入门（一）选择器

    这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1.  CSS简介 1.1  CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...

随机推荐

  1. LeetCode 101 对称二叉树的几种思路（Python实现）

    对称二叉树 给定一个二叉树,检查它是否是镜像对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的.   1   / \ 2   2 / \ / \3 4 4 3 但是下面这个 [1,2,2 ...

  2. re 模块 常规方法使用

    前情提要: re模块主要用于正则,用的好了秒杀一切匹配的规则,这里主要是介绍基本用法 一:元字符 1:\w 匹配字符,包含中文,数字或下划线 l ='早乙女露依 123 是我的 321 心目中的 22 ...

  3. SaltStack Pillar 详解

    简介 grains用于存储静态不易变更的数据,而pillar一般用于存储动态, 敏感的数据,通过minion和master设置或获取grains信息,而pillar信息只能在master端配置,在到m ...

  4. 关于类的成员，public,private修饰符

    类的成员要:属性,方法 属性:是它本身所居有的东西,比如人的特征,也可以这样理解属性是静态状态 方法:是这些属性通过方法行为发生改变,也就是方法是动态,可以对属性进行更新 public 公共的,可以被 ...

  5. Java方法区

    方法区 在一个jvm实例的内部,类型信息被存储在一个称为方法区的内存逻辑区中.类型信息是由类加载器在类加载时从类文件中提取出来的.类(静态)变量也存储在方法区中. jvm实现的设计者决定了类型信息的内 ...

  6. 1.需要对txt存放的测试数据做去重处理，代码如下

    采用集合去重,在新文件里逐行写入,达成目的 old_file = "D:/testdata/memberId.txt" #old result_file = "D:/te ...

  7. Codeforces Round #555 (Div. 3) C2. Increasing Subsequence (hard version)【模拟】

    一 题面 C2. Increasing Subsequence (hard version) 二 分析 需要思考清楚再写的一个题目,不能一看题目就上手,容易写错. 分以下几种情况: 1 左右两端数都小 ...

  8. 插播一条 QQ头像无法正常显示问题

    问题背景 不知道啥什么,QQ群的头像有些显示不全直接是默认的头像.想一想最近也没做啥,怎么就出问题了. 后来想一想,大概是个人文件夹的文件出问题了 解决办法 好友头像显示问题的删除 MiscHead. ...

  9. Codeforces - 149D 不错的区间DP

    题意:有一个字符串 s. 这个字符串是一个完全匹配的括号序列.在这个完全匹配的括号序列里,每个括号都有一个和它匹配的括号 你现在可以给这个匹配的括号序列中的括号染色,且有三个要求: 每个括号只有三种情 ...

  10. Docker for Windows 启动失败，提示Kubernetes证书无效

    起因 部署服务器到一台很久未更新的系统(windows 10),安装docker后,恰好系统自动更新,重启后docker不能启动,提示Kubernetes证书无效(未截到图,抱歉) 排查 因为没有开启 ...