HTLM 零基础入门教程（详解）
文章目录
- 前言
- 文档的后缀名
- HTML 标签
- 一、htlm概念
- 二、htlm特点
- 主要有以下三点：
- 三、常用标签及其属性
- 1-文本修饰
- 2-段落
- 3-标题
- 4-序列
- 5-图片
- 6-音频文件
- 7-视频文件
- 8-字体其他样式
- 9-超级文本
- 1-跳转到具体资源
- 2-调用本地邮件客户端进行发送邮件
- 3-调用Javascript脚本文件
- 4-设置锚点 书签
- 10-表格
- 总结：
前言
什么是HTML?
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML语言学习</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p>
</body>
</html>实例解析：
- <!DCOTYPE html> 声明为HTML5文档
- 元素是html页面的根元素
- 元素包含了文档的元（meta）数据 如 定义网页编码格式为 utf-8。
-
- 元素包含了可见的页面内容
元素定义一个大标题
元素定义一个段落
文档的后缀名
- .html
- .htm
以上两种后缀名没有区别，都可以使用。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 :
<html> - HTML 标签通常是成对出现的，比如 :
<b> 和 </b> - 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
一、htlm概念
HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
二、htlm特点
主要有以下三点：
1-使用是一对一对的标签组成双标签<tag></tag> 可以嵌套其他标签 单标签<tag> <tag/> 不可以嵌套其他标签2-标签之间可以相互嵌套，但是不可以交叉嵌套2.1<tag1><tag2></tag2></tag1>2.2<tag1></tag1><tag2></tag2>2.3 不可以出现<tag1><tag2></tag1></tag2>3-使用属性去区分标签不同<person id="2015105393xxxx" name="xiaohe"></person><person id="2015105394yyyy" name="xiaohe"></person>
三、常用标签及其属性
1-文本修饰
font 行内标签
属性：
size
字体大小 最大值是7
color
颜色值 颜色单词 red green blue 颜色的RGB rgb(0,0,255)
十六进制表示 #0000ff
face
字体族 黑体 楷体 宋体 华文彩云 必须浏览器支持
例如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><font size="7" color="red" face="华文彩云">主题内容。</font>
我还是主体内容
<br><br><br><br><br>
</body>字符实体 把一些特殊字符在页面中进行展示
空格 <br> 换行 单标签
2-段落
p 块元素 独立成行 行间距
属性 ：
align
对齐方式 left center right
color
不存在 如果需要设置样式 要嵌套font标签
例如：
<p align="center">以下是内容纲要：
</p>
<p align="right">前端设计主要讲解<font face="楷体" color="black">html、css、JavaScript技术。</font>
</p>
<p>深刻理解html负责页面内容，css控制网页样式，JavaScript负责动态交互以及各种技术的应用场景。
</p>
3-标题
h1-h6 块元素 独立成行 行间距
属性：
align
对齐方式 left center right
color
不存在 如果需要设置样式 要嵌套font标签
<hr> 水平分割线
color=“red” 颜色
size=“10” 高度
width=“400” 宽度
align"left" 对齐方式 center left right
例如：
以下是内容纲要：<h1 align="center">我是标题1</h1><h2 align="right">我是标题2</h2><h3>我是标题3</h3><h4>我是标题4</h4><h5>我是标题5</h5><h6>我是标题6</h6>
<hr color="red" size="10" width="400" align="left">
效果图：
4-序列
有序 块元素 独立成行 行间距 行缩进
ol和 li
属性：type 1 a A i I
start=“n” 从第n个数开始计数
无序
ul和 li
属性：
type li行的图样式
disc实心圆
circle空心圆
square实心方块
嵌套形式 ul 嵌套 ul/ol 继续缩进
例如：
我是序列测试：
<ul type="square"><li>真正开发实战中的干货都在这里哦。</li><li>准确把握新形势新使命新要求，在新的奋斗征程上为党和人民争取更大光荣。</li><li>绿色金融发展不是一日之功、不能急功近利，而要精耕细作、久久为功。</li><li>随着城市体检评估机制的完善，我们的城市必将更健康、更安全、更宜居。</li><li>如何报警本是个严肃的问题，却在娱乐化的网络世界里幻化成了“流量收割工具”。</li>
</ul>
<ol type="A"><li>真正开发实战中的干货都在这里哦。</li><li>准确把握新形势新使命新要求，在新的奋斗征程上为党和人民争取更大光荣。</li><li>绿色金融发展不是一日之功、不能急功近利，而要精耕细作、久久为功。</li><li>随着城市体检评估机制的完善，我们的城市必将更健康、更安全、更宜居。</li><li>如何报警本是个严肃的问题，却在娱乐化的网络世界里幻化成了“流量收割工具”。</li><li><li> <ul type="disc"><li>test001</li><li>test002</li><li>test003</li><li>test004</li><li>test005</li><li>test006</li></ul></li><ol type="a" start="5"><li>test001</li><li>test002</li><li>test003</li><li>test004</li><li>test005</li><li>test006</li></ol>效果如下：
5-图片
img
属性：
alt 图片找不到时显示的内容
src 图片的位置 src=“路径”
width 宽度
height 高度
borde 边框
注意：图片的保存路径最好和htlm文件路径一致
例如：
<img src="abcdefg.jpg" border="1"></img>效果如下：
6-音频文件
背景音乐 只对IE起作用
bgsound
sre=“路径”
也可以使用通用方法：
属性：
embed
sre=“路径”
width 0
height 0
例如：
<embed src="../汪苏泷_By2-有点甜.mp3" width="0" height="0">
这里不再展示效果了，因为打开页面背景音乐会自动响起。
7-视频文件
属性：
embed mp3 mp4
sre="" 路径
width 0
height 0
这里的属性和使用方法和上面一样，容易理解，代码操作也是一模一样的。
8-字体其他样式
加粗 b
斜体 i
下划线 u
9-超级文本
a
属性 href 具体的资源位置
target 是否新打开一个页面进行跳转 默认不打开
新打开空白页进行跳转 _blank
作用：
1-跳转到具体资源
url 网络资源
<a href="http://www.baidu.com" target="_blank">
path 本地资源
<a href="second.htlm">
2-调用本地邮件客户端进行发送邮件
<a href="mailto:10086@outlook.com ">发送信息到10086@outlook.com </a>
3-调用Javascript脚本文件
4-设置锚点 书签
设置锚点的位置：<a name="#锚点名称"> </a>
抛锚位置 点哪里就跳转到哪里 <a href="#锚点名称">跳转</a>
例如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>a链接使用</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>
<br>
<a href="mailto:10086@outlook.com ">发送信息到10086@outlook.com </a>
</body>
</html>
效果如下：
10-表格
特点： 对齐 在一行的td 高度一样 在一列中 td的宽度一样
table
属性：
width 宽度
height 高度
cellspacing 单元格td之间的距离
cellpadding 内容与单元格边框的距离 大小会加到table宽度上
aline 对齐方式 left center right 表格对齐方式
行 tr
height
aline 对齐方式 left center right 行内容对齐方式
valign 对齐方式 （垂直） middle top bottom
background 背景图片 IE上不好用
bgcolor 背景颜色
列 单元格 td 放在tr行中
width
aline 对齐方式 left center right 列内容对齐方式
valign 对齐方式 （垂直） middle top bottom
background 背景图片
bgcolor 背景颜色
合并单元格：
行合并 rowspan
列合并 colspan
1-表单 <form
提交数据 action 提交数据的url位置 method 提交数据的格式 get post name 表单名称>
input 输入框
type
text 文本输入框
password 密码输入框
radio 单选按钮 必须设置input的name属性 只有name属性相同时才认为是一组
checked 默认被选中
checkbox 复选框
checked 默认被选中
file 文件选择框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图片按钮 相当于submit功能 提交
hidden 隐藏输入框
get提交 文本提交 在地址栏中 可以看到提交的信息 密码 不安全
大小限制 8k 速度快
post提交 二进制提交 信息被加密 在地址栏中没有任何显示
无大小限制 速度相对慢
select 选择 （年月份，省份…）
总结：
HTLM 零基础入门教程（详解）相关推荐
- vue 单相绑定_Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）...
Vuejs第一篇之入门教程详解(单向绑定.双向绑定.列表渲染.响应函数) 2018-12-30 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素 ...
- python怎么输出浮点数_python 零基础入门教程第 2 章：基本数据类型 (一)
一.什么是数据类型 编程语言通过一些复杂的计算机物理底层机制,创造不同类型的数据,用来表示现实世界中的不同信息,以便于计算机更好的存储和计算. 每种编程语言都会有一些基本的数据类型用来表示现实世界中的 ...
- linux基础配置脚本,Linux中selinux基础配置教程详解
selinux(Security-Enhanced Linux)安全增强型linux,是一个Linux内核模块,也是Linux的一个安全子系统. 三种模式: Enforcing:强制模式,在selin ...
- python入门教程pdf-Python入门教程详解.pdf
您所在位置:网站首页 > 海量文档  > 计算机 > Python Python入门教程详解.pdf132页 本文档一 ...
- 视频教程-Python零基础入门教程-Python
Python零基础入门教程 从2012年从事互联网至今有7年软件编程经验,曾任职国内北京互联网公司,中南林业大学授课Python 现任逻辑教育Python课程负责人,精通Python语言,精通人工智能 ...
- SEO零基础入门教程（外链的发布和软文编写）
seo的作用是众所周知的,对网站进行seo优化,可以给网站带来大量的搜索引擎流量.但是想要做好网站优化也有难度,尤其是对于seo新手来说,因为缺乏理论和实战,所以seo新手需要多加练习.那么具体seo ...
- 九宫怎么排列和使用_剪映零基础入门教程第三十七篇：一学就会系列之九宫格小程序配音...
很多玩儿抖音的朋友都看过九宫格视频,但是并不是每个玩抖音的人都会制作这个九宫格视频,实际这个需要借助小工具来帮忙,而常用抖音的朋友们会对剪映更加熟悉一些,且九宫格视频在剪映内的制作方式则比较简单.那么 ...
- 计算机pscs6教程,photoshop CS6零基础入门教程
<photoshop CS6零基础入门教程>针对零基础学员开设,以教案和实际操作演示相结合的方式,详细地介绍adobe photoshop cs6的各项工具和命令.由浅入深.循序渐进地全面 ...
- finereport自学教程_办公物语丨Finereport零基础入门教程，你不可缺少的报表神器...
原标题:办公物语丨Finereport零基础入门教程,你不可缺少的报表神器 ⌛ 小办又来了,快,搬好你的小板凳. 今天小办要着重讲一下 之前推文里提到过的制表神器. 当你逐渐发现Excel不能满足你的 ...
最新文章
- 特征工程(part1)--什么是特征工程
- Linux - 命令
- svm多分类代码_监督学习——分类算法I
- python简单应用题_Python简单应用题
- linux反序列化漏洞,思科多个产品Java反序列化漏洞(CVE-2015-6420)
- nagios监控mysql服务_nagios监控mysql及邮件报警
- 让自己强大，必须放下十样东西
- 矩池云解决方案介绍图
- elf文件格式_Android so(ELF) 文件解析
- Selenium Automated test 's Installation environment
- 《python编程》第五章——并行系统工具（上）
- mysql时间减去1年_mysql时间增加一年
- 数字经济进入2.0时代 浙里有为共赢新“基”遇
- 将已购买的知乎Live课堂图片下载并导出的教程
- Vulkan 教程（1）开篇
- python 爬虫 爬取网易严选全网商品价格评论数据
- python 报价机器人_100行代码实现报价机器人公众号后台
- Dreamweaver CS6实战手册
- 北京理工大学：《Python语言程序设计》____笔记整理
- RTT简介及其简单应用