HTML基础

paulli3 发布于2019-08-01 15:58 / 494人阅读

摘要：是什么官方给出的答案超文本标记语言。很多人看了这个解释后，还是懵了。请在需要突出显示文本时使用此标签。属性间用空格分开。注意以及元素等元素没有前面的属性。自定义属性是由用户自己定义，只要符合属性的格式就会生效。

HTML是什么？官方给出的答案：超文本标记语言。很多人看了这个解释后，还是懵了。其实也没有这么复杂，你直接把HTML理解成是浏览器能识别的语言就行了。

第一个例子

新建index.html，并输入以下代码：




  
  Document

这个就是最简单的html结构

代码说明

1、所有的HTML文档都应该有一个标签
2、标签可以包含两个部分：和
3、标签包含整个文档的一般信息，比如：title、meta、link等
4、页面上能看到的内容都是放在标签里

标签介绍

1、有些标签是成对形式出现，有些是自闭合形式出现。如：

、等
2、究竟哪些标签是成对出现，哪些是自闭合，这就需要平时我们死记了
3、根据换行效果，可把标签元素划分为：行内元素和块级元素

块级元素

div - 常用块级容易，也是css layout的主要标签

p - 段落

ul - 非排序列表

table - 表格

h1 - 大标题

h2 - 副标题

h3 - 3级标题

h4 - 4级标题

h5 - 5级标题

h6 - 6级标题

form - 交互表单

hr - 水平分隔线

pre - 格式化文本

dl - 定义列表

ol - 排序表单

div元素

段落元素

这是一个段落

列表元素



 Coffee
 Milk

浏览器效果：

Coffee

Milk

有序列表元素



 Coffee
 Milk

浏览器效果：

Coffee

Milk

行内元素

a - 锚点

br - 换行

cite - 引用

code - 计算机代码(在引用源码的时候需要)

em - 强调

i - 斜体

img - 图片

input - 输入框

kbd - 定义键盘文本

label - 表格标签

select - 项目选择

small - 小字体文本

span - 常用内联容器，定义文本内区块

strong - 粗体强调

textarea - 多行文本输入框

HTML5新增标签

header - 定义一个页面或一个区域的头部

footer - 定义一个页面或一个区域的页脚

nav - 定义导航链接

section - 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分

article - 定义独立的内容，如论坛帖子、报纸文章、博客条目、用户评论等内容

aside - 定义两栏或多栏页面的侧边栏内容，如联系我们、客服、网站公告等内容

audio - 定义音频内容，如音乐或其他音频流

canvas - 定义图形，如图表和其他图像

aside - 定义两栏或多栏页面的侧边栏内容，如联系我们、客服、网站公告等内容

command - 标记定义一个命令按钮，比如单选按钮、复选框或按钮

datalist - 定义选项列表，需与 input 元素配合使用，通过input 元素的 list 属性来绑定，用来定义 input 可能的值

details - 用于描述文档或文档某个部分的细节。

embed - 定义外部的可交互的内容或插件。

figure - 定义一组媒体内容（图像、图表、照片、代码等）以及它们的标题

hgroup - 定义文件中一个区块的相关信息，使用 hgroup 标签对网页或区段（section）的标题进行组合

mark - 定义有标记的文本。请在需要突出显示文本时使用此标签。

元素的属性

元素的属性就是元素本身的东西。格式：属性名="值"。属性间用空格分开。

说明

1、html属性分为：标准属性和用户自定义属性。
2、标准属性是由系统定义的，比如：id、class、style、title。
（注意：base、head、html、meta、param、script、style 以及 title 元素等元素没有前面的属性。）
3、自定义属性是由用户自己定义，只要符合属性的格式就会生效。
在HTML5中添加了data-*的方式来自定义属性。比如：data-name="主容器"

云服务器 GPU云服务器 html基础 html代码基础 html基础代码 html基础教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50237.html

#WEB安全基础 : HTML/CSS | 文章索引

摘要：黑体本系列讲解安全所需要的和黑体安全基础我的第一个网页黑体安全基础初识黑体安全基础初识标签黑体安全基础文件夹管理网站黑体安全基础模块化黑体安全基础嵌套列表黑体安全基础标签拓展和属性的使用黑体安全基础嵌套本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基...

EscapedDog 2019-04-23 11:53 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

mj 2019-08-28 18:13 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

Yu_Huang 2019-08-01 14:48 评论0 收藏0
前端入门1-基础概念

摘要：基础基础是一种标记语言，不是编程语言，需要明确这点。元素标签内容基础基础负责文本样式的呈现，既然将和分离开，各自只负责各自的职责，那么肯定需要某种方式将两者连接在一起。本篇文章已授权微信公众号 dasu_Android（大苏）独家发布声明本系列文章内容全部梳理自以下四个来源：《HTML5权威指南》《JavaScript权威指南》 MDN web docs Github:smyh...

codecraft 2019-04-23 13:15 评论0 收藏0
Flask Web Development —— 模板（中）

摘要：示例使用的模板的指令通过从引用来实现模板的继承。上面的模板定义了三个，分别命名为和。同时返回相应错误的数字状态码。示例带有导航栏的基础应用程序模板这个模板中的块中只是一个名为的元素，它包含了在派生模板中定义的名为的空。 2、集成Twitter Bootstrap的Flask-Bootstrap Bootstrap是Twitter的一个开源框架，提供用户交互组件来创建一个清新且有吸引力...

eternalshallow 2019-07-24 17:47 评论0 收藏0