HTML学习

2018-09-15 本文已影响0人不吃鱼的猫_8e95

1.HTML 文档 = 网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

<html>
<meta charset="UTF-8">
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body> 
</html>

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
如果编写html的时候中文出现乱码，加入<meta charset="UTF-8">即可

2. HTML标签

<h1>~<h6>
标题标签
<p>
段落标签
<a>
链接标签url
<a href="http://www.sunmingming.top">This is a link</a>
<img>
图片标签
<img src="w3school.jpg" width="104" height="142" />
pre 标签对空行和空格进行控制。
<pre>
在pre标签之间的文字将会保留空格
</pre>

3. HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
< br>标签表示换行

4. HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定

5. HTML水平线

<hr /> 标签在 HTML 页面中创建水平线。

6.HTML注释

7.HTML拆行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签

<p>This is<br />a para<br />graph with line breaks</p>

HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

8.HTML样式

style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法
背景颜色
background-color 属性为元素定义了背景颜色

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

HTML 样式实例 - 字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸

<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>


</html>

9. HTML 样式实例 - 文本对齐

text-align 属性规定了元素中文本的水平对齐方式

10.HTML链接

**HTML链接分两种，一种是指向本网站的超链接。另一种是指向万维网的链接

- 指向本站的<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
- 指向万维网的<p><a href="http://www.baidu.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>