HTML学习总结

最新推荐文章于 2021-06-18 20:03:02 发布

墨渡青花

最新推荐文章于 2021-06-18 20:03:02 发布

阅读量241

点赞数

分类专栏：学习总结文章标签： html

本文链接：https://blog.csdn.net/SunAndNoOne/article/details/87073600

版权

学习总结专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.网站站点的创建

1)站点的作用

A 用来归纳一个网站上所有的网页、素材以及他们之间的联系

B 规划网站的所有内容和代码整合资源

2)创建站点的步骤

创建网页所需各个文件夹 css、js、images、html

3)文件的命名规则

A 件命名规则：用英文，不用中文

B 名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；必须以英文字母开头。@#￥%……！ day01 dya03 day_09 day-08

C 网站的首页必须命名为index.html不建议使用shouye.html

2.HTML的基本语法

1)<常规标记> 双标记

<标记属性=“属性值” 属性=“属性值”></标记>

2)空标记单标记

<标记属性=“属性值” />

说明：

1.写在<>中的第一个单词叫做标记，标签，元素。

2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。

3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

4.空标记没有结束标签，用“/”代替。

<!DOCTYPE html>              <!--  文档声明 -->
<html lang="en">             <!--  表示文档的开始 -->
<head>                       <!-- head标签存放文档的基本信息，不可见元素 -->
	<meta charset="UTF-8">          <!-- 声明字符编码  -->
	<title>Document</title>         <!-- 声明文档标题 -->
</head>
<body>                     <!—body标签存放文档可见内容 -->
</body>
	
</body>
</html>                    <!--   表示文档结束 -->

3.HTML常用标签

1、文本标题（h1-h6）

<h1>最重要的标题H1</h1>

<h2>次要栏目或标题-小标题H2</h2>

<h3>再次要栏目或分类小标题H3</h3>

<h4>文中分类小标题H4</h4>

2、段落文本(p)

<p>段落文本内容</p> 文本默认16像素

3、空格  

4、换行<br /> 强制换行

5、加粗

A、<b>加粗内容</b>

B、<strong>加粗内容</strong> 带有语义

6、倾斜

7、水平线

<hr />空标记

8、列表(ul,ol,dl)

*无序列表

<ul>(unordered li st)

    <li></li>

    <li></li>

</ul>

*有序列表

<ol >(ordered list)

     <li></li>

     <li></li>

</ol>

*自定义列表

<dl>(definition list)

     <dt>名词</dt>

     <dd>解释</dd>(definition description）

</dl>

有序列表的属性

1)、type:规定列表中的列表项目的项目符号的类型

语法：<ol type="a"></ol>

1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。

a 字母顺序的有序列表，小写（a, b, c, d）。

A 字母顺序的有序列表，大写（A,B,C,D)

i 罗马数字，小写（i, ii, iii, iv）。

I 罗马数字，大写（I, ii, iii, iv）。

2)、start 属性规定有序列表的开始点。

语法：<ol start="5"></ol>

9、插入图片

注:所要插入的图片必须放在站点下

①title的作用: 在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的

②alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方。

10、超链接的应用

语法：

<a href="#"></a>空链接

属性：target:页面打开方式，默认属性值_self。

属性值：_blank 新窗口打开

<a href="#" target="_blank">新页面打开</a>

11、div和span的用法

<div ></div> 没有具体含义，统称为块标签，用来设置文档区域，是文档布局常用对象

<span> </span> （用于嵌套文本），文本结点标签，可以是某一小段文本，或是某一个字。

12、数据表格的作用及组成

作用：显示数据

表格组成

<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">

    <tr>

        <td></td>

        <td></td> 

    </tr>

</table> <!-- 注：一个tr表示一行;一个td表示一列(一个单元格) -->

*数据表格的相关属性

1）width="表格的宽度"

2）height="表格的高度"

3）border="表格的边框"

4）bgcolor="表格的背景色" bg=background

5）bordercolor="表格的边框颜色"

6）cellspacing="单元格与单元格之间的间距"

7）cellpadding="单元格与内容之间的空隙"

8）对齐方式：align="left/center/right";

9)valign=“top/middle/bottom” （加在tr或td）

10)合并单元格属性：

colspan=“所要合并的单元格的列数"合并列; rowspan=“所要合并单元格的行数”合并行;