大家好，欢迎来到IT知识分享网。
文章目录
前言
<!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="xxxx" name="xiaohe"></person> <person id="yyyy" name="xiaohe"></person> 三、常用标签及其属性
1-文本修饰
例如：
<!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="center"> 以下是内容纲要： </p> <p align="right"> 前端设计主要讲解<font face="楷体" color="black">html、css、JavaScript技术。</font> </p> <p>
深刻理解html负责页面内容，css控制网页样式，JavaScript负责动态交互以及各种技术的应用场景。
</p> 3-标题
<hr> 水平分割线 例如：
以下是内容纲要： <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-序列
属性： type 1 a A i I start=“n” 从第n个数开始计数
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-音频文件
例如：
<embed src="../汪苏泷_By2-有点甜.mp3" width="0" height="0"> 这里不再展示效果了，因为打开页面背景音乐会自动响起。
7-视频文件
属性：
这里的属性和使用方法和上面一样，容易理解，代码操作也是一模一样的。
8-字体其他样式
9-超级文本
作用：
1-跳转到具体资源
2-调用本地邮件客户端进行发送邮件
<a href="mailto: ">发送信息到 </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: ">发送信息到 </a> </body> </html> 10-表格
特点： 对齐 在一行的td 高度一样 在一列中 td的宽度一样
列 单元格 td 放在tr行中
get提交 文本提交 在地址栏中 可以看到提交的信息 密码 不安全
大小限制 8k 速度快
select 选择 （年月份，省份…）
总结：
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/117202.html
