HTML学习笔记

最新推荐文章于 2025-08-06 16:42:26 发布

weixin_30673715

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量49

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/weibgg/p/10787084.html

学习步骤: HTML -> CSS -> JavaScript -> Dom -> Jquery

HTML学习笔记

学习地址

常用命令

<b>字体加粗</b>
<title>页标签</title>
<p>段落</p>
<h1>标题</h1> #最小到h6，数字越大标题越小

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

新建txt文档将文件后缀改为html或htm，将以上内容加入保存，双击浏览器运行。

分析：

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

HTML标题

<h1>标题</h1> #最小到h6，数字越大标题越小

HTML水平线（分割线）

<hr />

HTML换行

<br>

HTML 注释

<!--注释内容-->

HTML 文本格式化(字体格式）

<b>加粗文本</b>
<i>斜体文本</i>
<sub> 下标</sub>
<sup> 上标</sup>

HTML 链接

<a href="url">链接文本</a>

HTML 头部

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>

<body>
文档内容......
</body>

</html>

HTML 样式- CSS(页面渲染）

这里只有一点内容（可深入CSS）

HTML样式实例 - 背景颜色

格式：

<body style="background-color:yellow;"> #界面颜色
<h2 style="background-color:red;">这是一个标题</h2> #标题颜色
<p style="background-color:green;">这是一个段落。</p> #段落颜色

各颜色英文对照

HTML 样式实例 - 字体, 字体颜色，字体大小

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

分析：

font-family（字体），color（颜色），和font-size（字体大小）

HTML 样式实例 - 文本对齐方式

<h1 style="text-align:center;">居中对齐的标题</h1>

HTML 图像

<img src="图片地址" alt="如果图片加载失败需要显示的信息"> #alt也可不写

图片加载失败....

背景图像

<html>

<body background="https://i-blog.csdnimg.cn/blog_migrate/c24f3f3793c6cba9b2a6d57d9d06d748.png"> # background为背景 后面为图片地址

<h2 style="text-align:center;">图像背景</h2>

<p style="font-family:arial;color:red;font-size:40px;">文件均可用作 HTML 背景。。</p>

<p style="font-family:arial;color:red;font-size:40px;">如果图像小于页面，图像会进行重复。</p>
</body>
</html>

图片加载失败

点击运行实例

HTML 表格

<html>

<body>

<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

<h4>一列：</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<p>两行三列：</p>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>