HTML 入门第一课

雨点打透心脏的1/2处 2022-05-31 12:48 223阅读 0赞

## HTML 简单认识 ##

HTML（HyperText Markup Language）即超文本标记语言，是一种用来制作超文本文档的简单标记语言，也是制作网页的最基本的语言，它可以直接由浏览器执行。

> > 1.HTML 是用来描述网页的一种语言。
> > 
> > 2.HTML 指的是超文本标记语言: HyperText Markup Language
> > 
> > 3.HTML 不是一种编程语言，而是一种标记语言
> > 
> > 4.标记语言是一套标记标签 (markup tag)
> > 
> > 5.HTML 使用标记标签来描述网页
> > 
> > 6.HTML 文档包含了HTML 标签及文本内容
> > 
> > 7.HTML文档也叫做 web 页面

## 由 HTML 组成的网页的基本结构 ##

[![image][]][image 1]

文档类型声明 <!DOCTYPE html>      --这是html5的声明方法

头部标记（<head>….</head>）

包含文档的标题信息，头部标记都不可或缺！

主体标记（<body>…..</body>）

包含了文档的内容

中文编码声明（<meta charset = “utf-8”>）

## HTML常用标签 ##

<p>…</p>    定义一个段的块级标记      |     <br />   换行标记       |      <h1> …<h6>    标题标记

<ul>  </ ul>   无序列表标记，表示列表所包含的项是没有先后顺序的！列表项使用<li>表示。

<ol>  </ ol>   有序列表标记，表示列表所包含的项是有先后顺序的！列表项使用<li>表示。

<dl>  </ dl>    定义列表，定义列表至少包含一条术语（dt）或一条说明（dd）

<dt>  </ dt>   标明一个术语要说明的对象

<dd>  </dd>  列表项说明

<b>   </b> 或 <strong>  </strong>          文本加粗

<i>    </i> 或 <em>    </em>                    文本倾斜

<div>  </div>   块级元素   |    <span> </ span>  行内元素    |    <hr />   分隔线     |     <del>  <del />    删除线

< img >      图像的行内标记

> <img  src = “lianhua.jpg ”  alt = “莲花之美”>
> 
> src 是图片的路径参数；
> 
> *网页设计中的所有文件，原则上都必须放置在一起，即在同一个文件夹下（这个文件夹是网页的“根”文件夹）*
> 
> 相对路径：参照自身的位置，而定义的路径，叫做相对路径
> 
> 相对路径有三种表示方法：
> 
>        *1.Html文档和图片在同一个目录下，直接写图片名称*
> 
> *        2.Html文档和图片所在的文件夹在同一个目录下，先写文件夹名称，再写图片名称*
> 
> *        3.Html文档所在文件夹和图片所在文件夹在同一个目录下，则需要先用”../ ”找到根目录，*
> 
> *再写图片所在文件夹的名称，最后写图片名称*
> 
> \-> 图片大小              <img width = “ ”  height = “ “ />
> 
>             *网页中长度单位多使用 px ，即像素。*
> 
> \-> 图标替代文体      <img alt = “图片替代的文本内容” />
> 
>             *在网络较慢的环境中，如果没有出现图片，将以文本替代图片显示*
> 
> \-> 图片提示              <img title = “提示文本” />
> 
>           *  在鼠标放置图片上时提示的文本。多数标签都有此属性，但浏览器的支持不全面！*

### *HTML 文字排版标记* ###

> 1.<big></big> 定义大字体的文字 不符合标准网页设计的理念,不赞成使用.
> 
> 2.<small></small> 定义小字体的文字
> 
> 3.<sup></sup> 上标
> 
> 4.<sub></sub> 下标

### *HTML 特殊符号* ###

>           “<” 和 >”    “<”  和   “>”           |          &laquo;  &raquo;     <<     >>
> 
>            &lsaquo;    &rsaquo;    <  >          |        &copy;      版权          &amp      &

### *超链接 *  ###

<a>  </a>     通过使用属性href来指定要链接的url，标签的内容可以为文本也可为其他标签

> ①<a href="2.html">点击进入2网页</a>，点击文字进入2.html
> 
> ②<a href="2.html"><img src="two.jpg" /></a>，点击图片进入2.html

> ① a:link：未访问链接 ,如 a:link \{color:blue\}  
> ② a:visited：已访问链接 ,如 a:visited\{color:blue\}  
> ③ a:active：激活时（链接获得焦点时）链接的颜色 ,如a:active\{color:blue\}  
> ④ a:hover：鼠标移到链接上时 ,如 a:hover \{color:blue\}

锚点的使用

> 1.定义锚点<a id=“zj”>第三章</a>
> 
> 2.定义指向该锚地的链接<a href=“\#zj”>点击查看第三章</a>

下载链接的使用

> 如果url指向的不是一个html文件，那么点击时将下载该文件

### *表格的基本结构* ###

1）<table> </ table>       定义表格的基本框架

2）<tr>  </tr>               定义表格的行

3）<td>  </td>              定义表格行内单元格

4）<th> </th>               定义表格行内单元格（标题），自动将文本加粗，居中对齐

表单

表单的组成：一个表单有三个基本组成部分：

1）表单标签：这里面包含了处理表单数据所用程序的url，以及数据提交到数据服务器的方法。

2）表单域：包含了文本框，密码框，隐藏域，多行文本框，复选框，下拉框和文件上传框等。

[image]: /images/20220531/5ace1317779f4dc3b64ade689dc2b320.png
[image 1]: http://images2017.cnblogs.com/blog/1166497/201711/1166497-20171106154224075-476270114.png