HTML一

2018-03-19 本文已影响0人嗷老板

一、HTML的简述

1、什么是HTML

HTML是一种超文本标记语言。超文本是指HTML不仅可以实现文本展示信息的功能范畴，还可以展示图片、有样式的文字、点击跳转页面的文字。HTML所有操作都是通过标记实现的，标记就是标签。

2、为什么需要HTML语言

网页中有许多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），通过修改标签的属性值实现标签内部数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。

3、HTML的语法

（1）文件

HTML文件的拓展名为html或htm。htm是之前的命名规范，html是新的命名规范。
HTML文件由浏览器直接解析执行，无需编译，直接由上到下依次解析执行。

（2）标签

由尖括号包围关键字组成，一般是成对出现的，由开始标签和结束标签组成，也有单个出现的标签。例如：

成对出现的标签：<font></font>
单个出现的标签：<br />

（3）元素（标签体）

在开始标签和结束标签中间的所有内容都叫做元素。元素可以是一段普通的文本，也可以是其他的标签。例如：

文本：<font>hello html</font>
标签：<table><tr></tr><tr></tr></table>

（4）属性

在开始标签内可以有属性，为了给元素提供更多的信息，属性以名称和值的形式出现，例如：

<font color="red">hello html</font>

（5）结构

<html>
    <head>
    </head>

    <body>
    </body>
</html>

<html>是HTML文件的根标签，相当于Java类的大括号。
<head>定义网页的信息，包括标题、编码等。
<body>定义网页的内容，包括文本、链接、图片等。

二、HTML的简单标签

1、字体标签

用于展示效果中修饰文字样式。
格式：

    <font 属性名="属性值">文字</font>

属性：

size：控制字体大小，最小为1，最大为7。
* color：控制字体颜色，可以用英文设置（例如：red，blue...），还可以用十六进制颜色值来控制文本的颜色（例如：红色#FF0000，绿色#00FF00）。
face：控制字体类型。只能设置系统字库中存在的字体类型。
示例：

    <body>
       今天天气<font color="red" size="5" face="楷体">不错</font> 
    </body>

字体标签

2、格式化标签

标题标签：一级标题：<h1></h1>
二级标题：<h2></h2>
...
六级标题：<h6></h6>
段落标签：<p>起到换行的作用
其他标签：<b>加粗
<i>斜体
<u>下划线
<br />换行
<hr />水平线
示例：

    <body>
        <h1>html</h1>
        <b>java</b><br />
        <i>php</i><br />
        <u>python</u><hr />
        <h6>html</h6>
    </body>

格式化标签

3、列表便签

有序列表 <ol></ol>
属性：
type：定义的编号的类型
start：定义的编号的起始数字
列表项目标签：<li></li>
无序列表 <ul></ul>
属性：
type：定义的是符合的类型
列表项目标签：<li></li>

示例：

    <ul type="square">
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>
    <ol type="1" start="10">
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ol>

列表便签

4、图片标签

标签名：img
重要的属性： src 设置图片的地址
如果图片和当前页面在同一个目录下，直接直接使用图片名称来进行访问，或者通过./图片名称进行访问。
如果图片在当前目录的上一级，通过../图片名称来进行访问。
其他属性：
width 设置图片的宽度
height 设置图片的高度
alt 设置替代图片的文本

示例：

    <img src="mn.jpg" width="400" height="200" alt="美女"/>

5、超链接标签

定义一个可以点击跳转的链接，需要有一个可以用于点击的内容和一个可以用于跳转的地址。
标签名：a
重要的属性：href 定义需要跳转的地址
内部地址：
如果要访问的页面和当前页面在同一个目录下，直接通过页面名称来访问。
如果要访问的页面在当前目录的上一级目录下，通过../页面名称来访问
外部地址 url
https://www.baidu.com/
target
_blank 跳转到一个新的页面
_self 当前页面跳转

示例：

    <a href="demo.html" target="_blank">demo</a>
    <a href="https://www.baidu.com/" target="_self">百度</a>

6、转义字符

可以将一些特殊字符定义在标签的属性值或者标签体中。

    <    &lt;
    >    &gt;
    "    &quot;
    空格  &nbsp;

示例：

    <font color="red" siza="5">&lt;&nbsp;html&nbsp;&gt;</font>
    <br />
    <font color="red" siza="5">&quot;&nbsp;html&nbsp;&quot;</font>

转义字符