html+css

最新推荐文章于 2023-08-08 17:30:21 发布

落～意

最新推荐文章于 2023-08-08 17:30:21 发布

阅读量321

点赞数 2

文章标签： html5

本文链接：https://blog.csdn.net/luo_li_d/article/details/112159652

版权

html

html文档的主体部分主要由标签和标签两部分组成，其他的内容基本上都包括在这两部分内部。

<!DOCTYPE html>
<!--声明此版本的HTML为HTML5-->
<html>
    <head>
        <!--文档的头部分，主要包括网页的标题以及需要声明的元数据-->
        <meta charset="UTF-8"/>
        <!--处理网页乱码问题，将网页设置为统一的编码格式-->
        <title>文档的标题</title>
        <!--设置网页的标题-->
    </head>
    <body>
        <!--文档正文部分（需要显示给用户的部分），都在body标签里面-->
    </body>
</html>
<!--...-->
<!--注释标签，将不需要的代码以及对代码的注释部分用此标签囊括-->

1.标题标签

<!--HTML中，标题标签分为1~6级，分别用h1~h6来表示-->
<h1>一级标题</h1>
................
<h6>六级标题</h6>

2.段落标签

<!--HTML中，标题标签用<p></p>来表示，在当前行充满的时候会自动跳转到下一行-->
<p>
    <!--在html中，标签之间是可以嵌套的-->
    <h1>一级标题</h1>
</p>

3.块元素

<!--<div>默认占一行，也可以充当行级元素-->
<div>
    <h3>这是一个在 div 元素中的标题。</h3>
    <p>这是一个在 div 元素中的文本。</p>
</div>

4.列表标签

列表分为有序列表和无序列表。在列表中，没有列表项的列表是没有意义的，实际上，列表也可以认为是一个块元素。

<!--无序列表-->
<ul>
    <!--在这其中，<li></li>标签为列表中的项目，作为最基本的列表内容支撑整个列表-->
    <li>咖啡</li>
    <li>茶</li>
    <li>牛奶</li>
 </ul>
<!--有序列表-->
<ol>
    <li>咖啡</li>
    <li>茶</li>
    <li>牛奶</li>
</ol>
<!--列表嵌套,在列表中，也可以将有序列表和无序列表进行嵌套使用-->
<ol>
    <li>陕西省
        <ul>
             <li>汉中市</li>
			<li>西安市</li>
        </ul>
    </li>
    <li>山西省
        <ul>
			<li>太原市</li>
             <li>运城市区</li>
		</ul>
	</li>
</ol>

5.空格

<!--空格&nbsp，当多个空格折叠后实际上只显示一个空格位-->
<div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>

6.行内元素

常用的行内元素主要有span，i，u，strong，img等。其中span标签的作用是对文档中的一部分内容进行整体上的布局；i标签的作用是将文本的字体转变为斜体；u标签的作用是为文本添加下划线；strong标签的作用是加粗文本字体；img标签的作用是定义图像。

span标签没有特殊的一个含义：作用就是就是将某些文字作为一个行内块元素使用

br标签的作用是换行

<!--<br>为单标签，只存在一个，不成对出现-->
<p>
    <span>
        <b>陕西省</b>
    </span>
    <i>汉中市</i><br>
    <strong>
        <u>朝阳北路</u>
    </strong>
</p>

7.图片标签

在img标签中，常用的属性主要有src和alt

src：给定图片的路径，路径分为相对路径和绝对路径。

绝对路径：可以从计算机的根目录中开始向下查找的某一个文件夹的某一个资源。如果在根目录中这个资源存在，那么一定是可以查找到这个资源的。

相对路径：使用某个参照物，来定位某一个资源。

alt：对图片进行描述，在图片正常显示的情况下一般是看不到的，只有当图片因为无法正常显示时才会出现通过alt定义的文本内容。

<!-- 相对路径的第一种写法：它本身和图片文件夹处于同一层级-->
<img src="/img/3.jpg" >
<!-- 相对路径的第二种写法：它本身包含上一级目录，而他的上级目录和图片文件夹处于同一层级-->
<img src="../img/image/2.jpg" >
<!-- 相对路径的第三种写法：它本身包含多级目录，找到他的顶级目录，再根据图片文件夹的位置进而访问图片资源-->
<img src="../../img/image/2.jpg" >

8.超链接

<!--<a></a>标签用来表示超链接标签
  href：给定超链接跳转的位置、如果没有指定跳转方式默认是在当前窗口打开目标
  target：目标
-->
<a href="https://www.baidu.com" >百度</a>
<a href="https://www.taobao.com" target="_blank" >淘宝</a>
<!--跳转到其他网页  -->
<a href="demo01.html">demo02</a>
<!-- 锚点 -->
<a href="#cang">点我回到顶部</a>
<a href="#" >网页窗口本身作为锚点</a>

9.表格

表格的基本格式如下：

<table>
    <!--使用一对table标签，进行表格的定义-->
    <tr>
    <!--<tr></tr>标签定义行-->
    <!--<td></td>标签定义列-->
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>

在表格的使用过程中，还需要使用一些元素进行修饰，常用的有tr，td，border，width，height，align，rowspan，colspan，cellpadding，cellspacing等。这其中，具体的功能分别是

tr：行
td：列
border：线宽
width：宽度
hegith：高度
algin：对齐方式
rowspan：跨行
colspan：跨列
cellpadding：单元格的内边距
cellspacing：单元格之间的距离

<!-- 表头-->
<table border="" cellspacing="" cellpadding="">
    <!-- 表头-->
	<thead>
        <tr>
            <th>编号</th>
		   <th>名称</th>
		   <th>金额</th>
        </tr>
    </thead>
    <tbody style="color: red;">
        <tr><td>001</td><td>鼠标</td><td>50</td></tr>
        <tr><td>002</td><td>键盘</td><td>150</td></tr>
	</tbody>
	<!-- 表尾 -->
	<tfoot>
        <tr><td colspan="2">合计</td><td>200</td></tr>
	</tfoot>
</table>