1.1 HTML简介

什么是HTML?

HTML 是用来描述网页的一种语言。

l HTML 指的是超文本标记语言: Hyper Text Markup Language

l HTML 不是一种编程语言,而是一种标记语言

l 标记语言是一套标记标签 (markup tag)

l HTML 使用标记标签来描述网页

l HTML 文档包含了HTML 标签文本内容

l HTML文档也叫做 web 页面

实例

我的第一个标题

我的第一个段落。

实例解析

l DOCTYPE 声明了文档类型

l 位于标签 与 描述了文档类型

l 位于标签

与 为可视化网页内容

l 位于标签

作为一个标题使用

l 位于标签

作为一个段落显示

在HTML5中也是描述了文档类型。

1.1.3 HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

l HTML 标签是由尖括号包围的关键词,比如

l HTML 标签通常是成对出现的,比如

l 标签对中的第一个标签是开始标签,第二个标签是结束标签“/”

l 开始和结束标签也被称为开放标签闭合标签

内容标签>

1.1.4 HTML 元素

"HTML 标签" and "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:

HTML 元素:

This is a paragraph.

1.1.5 Web 浏览器

Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari,Chrome)是用于读取HTML文件,并将其作为网页显示。

浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:

1.1.6 HTML 网页结构

下面是一个可视化的HTML页面结构:

1.1.7 HTML版本

从初期的网络诞生后,已经出现了许多HTML版本:

1.1.8 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,以下方式均可:

常见的 DOCTYPE 声明

u HTML 5

u HTML 4.01 Strict

这个 DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。

u HTML 4.01 Transitional

这个 DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。

u HTML 4.01 Frameset

这个 DTD 与 HTML 4.01 Transitional 相同,但是允许使用框架集内容。

u XHTML 1.0 Strict

这个 DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

u XHTML 1.0 Transitional

这个 DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

u XHTML 1.0 Frameset

这个 DTD 与 XHTML 1.0 Transitional 相同,但是允许使用框架集内容。

u XHTML 1.1

这个 DTD 与 XHTML 1.0 Strict 相同,但是允许添加模块(例如为东亚语言提供 ruby 支持)。

1.2HTML基础

1.2.1 标题

HTML 标题(Heading)是通过

-

标签来定义的.

h是英文header标题的缩写,标题无处不在,它的应用范围十分广泛:网站结构、写作文、PPT等。h1是主标题,h2是副标题,h3、h4、h5、h6依次递减字体的大小。

实例:

1.2.2 段落

HTML 段落是通过标签

来定义的,P是英文paragraph段落的缩写,经常被用来创建一个段落,就和你写作文一样。

1.2.3 链接

HTML 链接是通过标签 来定义的.a标签,也叫anchor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。在 href 属性中指定链接的地址。

使用target属性,可以定义被链接的文档在何处打开,target=“_blank”会在新窗口打开文档。

这是一个链接!


标签定义 HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线。

1.2.4 折行

元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

文本格式化

HTML 使用标签 对输出的文本进行格式, 如:粗体 or 斜体

通常标签 替换加粗标签 来使用, 替换 标签使用。

1.2.5 表格

表格由

标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

使用边框属性来显示一个带有边框的表格:

表格的表头使用th标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:

行合并和列合并:

1.2.6 列表

HTML 支持有序、无序和定义列表:

有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于

  1. 标签。每个列表项始于
  2. 标签。

    列表项项使用数字来标记。

    观察在ol添加type属性,type=”A”或者type=”a”或者type=”i”或者type=”I”

    无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

    无序列表使用

  3. 标签。

    自定义列表不仅仅是一列项目,而是项目及其注释的组合。

    自定义列表以

    开始。每个自定义列表项的定义以
    开始。

    1.2.10区块

    HTML 可以通过

    和 将元素组合起来。

    Ø 区块元素

    大多数 HTML 元素被定义为块级元素内联元素

    块级元素在浏览器显示时,通常会以新行来开始(和结束)。

    实例:

    ,

    ,

    • ,

    Ø 内联元素

    内联元素在显示时通常不会以新行开始。

    实例: ,

, ,

Ø

元素

HTML

元素是块级元素,它是可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,

元素可用于对大的内容块设置样式属性。

元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用

1.2.11布局

大多数网站可以使用

或者

1.2.12 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签

来设置:

文本域(Text Fields)

文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

密码字段

密码字段通过标签 来定义:

单选按钮(Radio Buttons)

标签定义了表单单选框选项:

复选框(Checkbox)

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

提交按钮(Submit Button)

定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

下拉列表

文本框

按钮

1.2.13 head头部

可以添加在头部区域的元素标签为:

,

html下拉列表不居中_HTML介绍——入门级相关推荐

  1. html中什么表示下拉列表,html中select标签(下拉列表)的详细介绍

    html中select标签(下拉列表)的详细用法,有兴趣的朋友可以了解一下! 在网页中,下拉列表很常见,那你知道在html源代码中是怎么实现的吗?今天要分享的就是html中实现下拉列表的标签,即sel ...

  2. html下拉列表不居中_学习之路-前端-笔记-一、HTML笔记(转)

    原文作者:猿2048志愿者 各种技巧 1.在Webstrom中 同时按ctrl+alt+insert创建新内容 2.输入标签按tab自动补全 按end 或 HOME实现光标移动到当前行的最后或最前 3 ...

  3. web前端字体居中_html里文字居中代码怎么写?_WEB前端开发,html,css

    web前端是什么意思?_WEB前端开发 web前端就是前端网络编程,也被认为是用户端编程,是为了网页或者网页应用,而编写HTML,CSS以及JS代码,所以用户能够看到并且和这些页面进行交流.html里 ...

  4. web前端字体居中_html里文字居中代码怎么写?_WEB前端开发

    web前端是什么意思?_WEB前端开发 web前端就是前端网络编程,也被认为是用户端编程,是为了网页或者网页应用,而编写HTML,CSS以及JS代码,所以用户能够看到并且和这些页面进行交流. html ...

  5. csstable跨列居中_html中table表格如何跨行或跨列合并单元格

    在html中的table表格实现跨行或跨列合并单元格,需要用到以下两个属性: 1.跨列colspan属性:就是合并左右关系的单元格: 2.跨行rowspan属性:就是合并上下关系的单元格: 而在tab ...

  6. web前端字体居中_html怎么让图片居中_WEB前端开发,html,文字居中

    ps扣完图怎么提取出来_WEB前端开发 ps扣完图提取出来的方法:首先打开ps并打开需要抠的图片:然后选择钢笔工具,沿着物体外部,勾画闭合路径:接着依次选择"建立选区或者切换到路径面板-建立 ...

  7. web前端字体居中_html语言 让文字居中的代码是什么?

    展开全部 html中,让32313133353236313431303231363533e58685e5aeb931333365653839文字居中的css代码:1.平水居中:text-align:c ...

  8. csstable跨列居中_HTML基础 table rowspan colspan 跨行与跨列的单元格

    OS : Windows 10 browser : Chrome 83.0.4103.116 editor : Visual Studio Code 1.46.1 typesetting : Mark ...

  9. csstable跨列居中_HTML表格跨行、跨列操作(rowspan、colspan)

    一般使用 元素的colspan属性来实现单元格跨列操作,使用元素的rowspan属性来实现单元格的跨行操作. colspan属性规定单元格可横跨的列数,所有浏览器都支持colspan属性.其取值为nu ...

最新文章

  1. MySQL:一个死锁分析 (未分析出来的死锁)
  2. flutter系列InheritedWidget介绍
  3. 阿里 双11 同款流控降级组件 Sentinel Go 正式GA,云原生服务稳稳稳
  4. linux 的内核参数优化,linux 内核参数优化
  5. 算法--递归--汉诺塔问题
  6. node.js 安装 测试
  7. 北亚数据恢复关于服务器存储MDisk重建的数据恢复方法的研究
  8. 用 JavaScript 实现内存位翻转漏洞
  9. 分类预测 | MATLAB实现ELM极限学习机多特征分类预测
  10. 树莓派4B安装windows xp windows 95( windows xp windows 95 for raspberry pi 4B)
  11. 汇总统计数据工具—你所不知道的arcgis工具
  12. 程序员python开发简历范文_程序员简历就该这样写
  13. 在html中制作多彩照片墙,60个照片墙布置方案 记录浪漫时刻
  14. 手动查毒删除病毒文件图
  15. 2022年招商团长未来两年发展趋势分析
  16. 学习单片机,通常要学哪些知识点?(附送75块带屏开发板)
  17. 广告roi怎么计算公式_什么是广告ROI?ROI计算公式是什么? ROI怎么计算?ROI影响因素有哪些?...
  18. 异步传输模式(ATM)
  19. 英文word文件怎样全篇翻译成中文?
  20. Python3 数据库(MySQL/MongoDB/Redis)

热门文章

  1. 欲穷千里目,踏上云平台,更上一层楼
  2. ssbdemod在matlab中的意义,matlab中modulate函数
  3. 奔跑吧机器人发货_中国最大智能机器人仓库启用 天猫送货再提速上午下单下午到...
  4. 八种基础类型和包装类型
  5. 八个Python常用函数,非常好用,初学者必学知识点!
  6. flake8 错误修复指南
  7. BurpSuite Intruder模块四种攻击模式
  8. 基础科研探索推进中的十大关系
  9. Linux CentOS7配置ip地址攻略
  10. 办公必备工作日志软件推荐