html的学习

2025-02-05 技术教程

html语法的学习什么是html

html: 超级文本标记语言(HyperText Markup Language)（不是编程语言）

"超文本"：字面意思，比普通文本更加高级；页面内可以包含图片，链接等非文字内容。"标记"：使用标签的方法将需要的内容包括起来。html是做什么的？

html用于编写网页。对网页的内容进行排版。

html代码：用于展示需要展示的数据。CSS代码：使显示的数据更加好看。JavaScript代码：使整个页面显示的数据具有动画效果。

网页根据内容是否改变分为：静态页面、动态页面

静态页面：代码编写好后，在浏览器里面看到的页面内容就不再改变了。html编写的就是静态页面。动态页面：在浏览器里面会根据不同的情况展示不同的页面。（例如登陆成功后显示的用户名，不同人登陆所显示的用户名是不同的）html语言的特点html文件不需要编译，可以直接通过浏览器阅读。html文件的扩展名是.html 或者.htmhtml结构都是由标签组成的标签名是预先定义好的，我们只需要根据需要拿来用就可以了。标签名不区分大小写。通常情况下，一组标签是由开始标签和结束标签组成的。例如：<a></a>有些标签没有结束标签，这些标签建议使用 / 结尾。例如：<img/>html结构大体分为两类：头head , 和体 body 一个Html文件的模板

html5的固定格式

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body></html><html> 是整个页面的根标签，理论上一个html页面只需要一个，它里面包含了头<head>和体<body>这两个标签。<head>为头标签，用于引入脚本，导入样式，提供元信息等，一般在浏览器里面不显示这些信息。<title>子标签用于显示浏览器的标题。<body>体标签，是整个网页的主体，大部分的代码都在此标签内。

html开发环境的搭建

为了更加快捷方便地编写Html，我们安装较为流行的前端IDE(集成开发环境) HBuilder 。

注释的使用：

注释的格式： 快捷键为：ctrl + /

常用的排版标签

1. 标题标签： <h2>
html提供了<hn>系列的标签，包含了：<h2> <h3> <h4> <h5> <h6> <h7> ，定义了<h2> 为最大的标题，<h7> 为最小的标题。
2. 水平线标签：<hr>

<hr> 在html页面中插入一条水平分割线，用于定义内容中的主题变化。size 属性：水平线的高度，单位像素（hx）noshade 属性：没有阴影，取值：noshade，表示显示纯色。
例如：

<hr /><hr size="5" /><hr noshade="noshade" />

3. 字体标签： <front>

<front> 用于设置字体的尺寸，字体，颜色等。 size 属性：用于设置字体的大小，可能的值：从1到7的数字。浏览器默认是3。 color属性：设置字体的颜色颜色的取值：#xxxxxx 或者 colorname#xxxxxx 表示使用红绿蓝三原色设置颜色。红绿蓝分别取值范围：00~FF ，此处使用的是16进制。#000000 表示黑色，#FFFFFF 白色红绿蓝2为取值相同时可以省略为1位。例如：#112233可以简化为：#123colorname :使用英文单词确定颜色。red红色，blue蓝色，green绿色，等等，在IDE中有颜色提示。
例如：

<front size="7">字体最大</front><front color="#FF0000">颜色为红色</font><front color="blue">颜色为蓝色</front>

4. 格式化标签：<b> <i>
<b> 粗体
<i> 斜体
例子：

<b>粗体</b><i>斜体</i>

5. 段落标签：<p> <br/>
<p> 定义段落。p标签会自动在文字的前后创建一些空白，形成段与段分明的效果
<br/> 插入单个换行
例子：

<p>段落1</p><p>段落2</p><br/>

6. 图片标签：<img>

<img> 在html 中引用一张图片src 属性：指定需要显示图片的URL路径。(路径可以是绝对路径也可以是相对路径)alt 属性：图片无法显示时的替代文本。width: 设置图片的宽度heigth: 设置图片的高度
例子：

<img src="../img/test.png" alt="示例图片" width="200px" heigth:"200px" title="鼠标移上显示的文字" />

7. 列表标签：<ul> <ol>

<ol> 定义有序列表type 属性：列表的类型，取值有：A，a ，I，i，1 等<ul> 定义无序列表type属性：符号的类型，取值：disc 实心圆，square 方块，circle 空心圆定义列表项。是<ul>或<ol> 的子标签
例如：

 <ul type="circle">  <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul> <ol type="I">  <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol>

显示效果：

8. 超链接标签：<a>

<a>标签是超链接，是在html中提供一种可以访问其他位置的实现方式href : 用于确定需要显示页面的路径(URL)target: 确定以何种方式打开href 中的页面。长取得值：_blank 、 _self等_blank 在新窗口中打开href确定的页面。_self 默认。使用href 中的页面替换当前的页面。
例如：

<a href="http://www.baidu.com" target="_blank">访问百度网，并在新窗口中打开链接</a>

效果：

9. 表格标签：<table > <tr> <td>
html表格标签是由<table>标签以及一个或者多个<tr><td><th>标签组成的

<table> 是父标签，相当于整个表格的容器border 表格边框的宽度width 表格的宽度cellpadding 单元边沿与其内容之间的空白cellspacing 单元格与单元格之间的空白bgcolor 表格的背景颜色<tr> 标签用于定义行<td>标签用于定义表格的单元格(1列)colspan 单元格可横跨的列数rowspan 单元格可横跨的行数align 单元格内容的水平对齐方式，取值：left 左，right 右，center 居中nowrap 单元格中的内容是否折行<th> 标签用于定义表头，单元格的内容默认居中，加粗
例子：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表格的跨行跨列操作</title> </head> <body> <table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px"> <tr> <td colspan="2"> <img src="../../img/hl1.jpg" height="100%" width="100%"/> </td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td colspan="2" rowspan="2"> <table border="3px" align="center" width="100%" height="100%" cellspacing="0px" cellpadding="0px"> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> </table> </td> <td>24</td> </tr> <tr> <td>31</td> <td rowspan="2" align="center">34</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> </tr> </table> </body></html>

效果：