HTML+CSS(一)

小石Sir.

已于 2022-09-25 16:19:33 修改

阅读量460

点赞数 14

于 2022-09-04 17:23:13 首次发布

本文链接：https://blog.csdn.net/qq_19262747/article/details/126687340

版权

HTML CSS JavaScript 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

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的一些内容，由个人结合资料并个人总结，如有侵权请及时与本人联系，若文章内容有误，请予以批评。我会吸取经验，及时改正！

小石Sir.

关注

14
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
4
评论
HTML+CSS(一)

html一些基础知识点，由个人总结并结合资料，欢迎交流经验。
复制链接

扫一扫

专栏目录