目录
HTML
HTML介绍
1.html的定义
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
由<(左尖角号)、内容以及>(右尖角号)组成的叫做标签,三者缺一不可。在 HTML 中,使用<>包围标签的目的是方便将它们与普通文本进行区分。
2.html的作用
html是用来开发网页的,它是开发网页的语言。
HTML的基本结构
1.结构代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
以上描述的HTML的结构代码主要使用了:<!DOCTYPE>、<html>、<head>、<title> 以及 <body> 等标签。
- <DOCTYPE> 是 Document Type Declaration 的简称,用来声明文档,也就是告知 web 浏览器当前页面使用了哪种 HTML 版本编写代码,此处使用的是 HTML 5 的版本。声明文档必不可少,而且必须位于 HTML 文档的第一行;
- <html> 除了声明文档外的所有代码都必须写在 <html></html> 中间
- <head> 表示页面的"头部",页面的标题一般写在 <head></head> 中间
- <title> 表示页面的标题
- <body> 表示页面的"身体",页面中的绝大部分内容都可以写在 <body></body> 之间。
HTML常用标签
1.标题标签
标签语义:作为标题使用,并且重要性从h1—h6依次递减
特点:标题文字会变的加粗,字号也会依次变大;一个标题独占一行(有自动换行效果)
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>
效果图:
2.段落标签
段落标签:表示一个自然段,会独占一行。
<p>这是段落标签</p>
3.换行标签
<br></br>
使用时使元素换行
4.水平线标签
<hr></hr>
5.引用图片标签
<img scr="1.gif" />
属性:
src: 设置一个外部图片的路径
alt: 可以用来设置在图片不能显示时的描述
width: 修改图片的宽度
height:修改图片的高度,这两个改变时都是同时修改,不该比例。只有当两个都同时指定时才不按比例
<img scr="1.gif" alt="这是一个苹果" height=“300px” />
6.超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性)当标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其中_self为默认值当前窗口打开,_blank为在新窗口打开 |
eg:<a href="http://www.qq.com" target="_blank">腾讯</a>
1.外部链接
eg:<a href="http://www.qq.com">腾讯</a>
2.内部链接
内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可
eg:<a href="xxx.html">文本</a>
3.空连接
<a href="#">文本</a>
4.下载链接
下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件
eg:<a href="xxx.zip">下载链接</a>
5.网页元素链接
网页元素链接:在网页中的各种网页元素,如文本,图像,表格,音频,视频等都可以添加超链接
eg:<a href="http://www.qq.com"><img src="img.jpg"/></a>
6.锚点链接
锚点链接:点我们点击链接,可以快速定位到页面中的某个位置
在 链接文本的href属性中,设置属性值为 #名字 的形式,如
<a href="#two">第二集</a>
找到目标位置标签,里面添加一个id属性=刚才的名字,如:
<h3 id="#two">第二集介绍</h3>
7.文本框标签
<input type="text" />
8.div标签
<div> 是一个块级元素,也就是说它的内容自动的开始一个新行,换行是它固有的特定格式表现,同时它也是一个双向标签,它应用于样式表,有多种属性:Class、Style、title、ID等
<div class="" id="" title="" style=""></div>
8.span标签
- 在行内定义一个区域,也就是一行内可以被<span>划分成好几个区域,从而实现某种特定效果。
- <span>本身没有任何属性。
<span class="" id=""></span>
HTML其他标签
1.列表标签
列表标签的种类
- 无序列表标签(ul标签)
- 有序列表标签(ol标签)
1.无序列表
<!-- ul标签定义无序列表 -->
<ul>
<!-- li标签定义列表项目 -->
<li>列表标题一</li>
<li>列表标题二</li>
<li>列表标题三</li>
</ul>
2.有序列表
<!-- ol标签定义有序列表 -->
<ol>
<!-- li标签定义列表项目 -->
<li><a href="#">列表标题一</a></li>
<li><a href="#">列表标题二</a></li>
<li><a href="#">列表标题三</a></li>
</ol>
2.表格标签
表格的结构
表格是由行和列组成,好比一个excel文件
表格标签
- <table>标签:表示一个表格
- <tr>标签:表示表格中的一行
- <td>标签:表示表格中的列
- <th>标签:表示表格中的表头
示例代码
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
</table>
表格边线合并
border-collapse 设置表格的边线合并,如:border-collapse:collapse;
总结
以上就是关于html的一些内容, 由个人结合资料并个人总结,如有侵权请及时与本人联系,若文章内容有误,请予以批评。我会吸取经验,及时改正!