HTML 介绍和简单基础
1. HTML 介绍
1.1 什么是HTML
- Html是一种用来实现Web服务的网页制作语言，通常由浏览器解释和显示页面。
- Html是一套超文本标记语言（Hyper Text Markup Language）
- 使用成对标签描述网页内容，例如：
<html> </html> - Html程序文件须以htm或html作为扩展名
1.2 如何编辑HTML
- HTML可以由任意文本编辑器创建
- 常用的编辑工具
- Dreamweaver(可视化)
- notepad++(文本)
- 例子
<html> <head> <title>网页主题</title> </head> <body> 我是网页内容 </body> </html> - 说明
<html> 与 </html> 之间文本是整个网页内容。 <head>网页主题</head> 之间文本是整个网页主题。 <title>网页主题</title> <body> 与 </body> 之间是正文页面内容。 所有标签字母都是小写。
2. Html 基础
2.1 Html 标题
- HTML标题是通过
<h1>-<h6>等标签进行定义的。<h1>定义最大标题。<h6>定义最小标题 - 例子
<h1>第1个标题</h1> <h2>第2个标题</h2> <h3>第3个标题</h3>
2.2 HTML 段落
- HTML段落是通过
标签进行定义的
- 例子
<p>这是一个段落</p> <p>这是另一个段落</p>
2.3 HTML 换行
- 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
<br>标签 - 例子
<p>这里是老男孩教育<br>网络安全<br />11期班级</p>
2.4 HTML 水平线
<hr>标签在HTML页面中创建水平线。hr元素可用于分隔内容- 例子
<hr> <p>这是一个段落</p> <hr /> <p>这是另一个段落</p> <hr />
2.5 HTML 注释
- 可以将注释插入HTML代码中，提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
- 例子
注释是这样写的： <!-- This is a comment -->
2.6 如何查看网页源代码
- 打开网页，只需要单击右键，
- 然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox）
- 其他浏览器的做法也是类似的。这么做会打开一个包含页面HTML代码窗口。
2.7 html标签属性
- 设置颜色背景：
<body bgcolor=red> - 设置图片背景：
<body background=1.png> - 内容居中:
<h1 align="center">这里的内容居中</h1>
2.8 格式化文字
- 加粗
<b>This text is bold</b> - 斜体
<i>This text is italic</i> - 字体大小颜色
<font size=7 color=red>老男孩</font> - 预格式化
<pre>想要输出的格式</pre>
2.9 HTML 实体
最常用的字符实体
显示结果 描述 实体名 实体号
空格  
< 小于 < <
> 大于 > >
& and符号 & &
" 引号 " "
' 单引号 '
2.10 HTML 超链接
- 超链接路径
- 相对路径
<a href="oldboy.htm">我的网站</a> - 网址
<a href="http://www.yunweibase.com/">运维基地</a> - 图片做超链接内容
<a href="oldboy.htm"><img border="2" src="..\1.png"></a>
- 相对路径
- 超链接属性target属性
- _blank在新窗口中打开链接
<a href="oldboy.htm" target="_blank"> - 父窗口打开，即原窗口打开是默认值
<a href="oldboy.htm" target="_parent">
- _blank在新窗口中打开链接
- 网页内部超链接：定位具体的位置
- 定义具体位置name=“C4”
<a name="C4"><h2>Chapter 4</h2></a> - 设置超链接指向具体位置
<a href="#C4">See also Chapter 4.</a>
- 定义具体位置name=“C4”