初识HTML

背景：学习完牛腩新闻发布系统，接下来学习的便是HTML，一共两个小时，视频中讲解的都是一些比较基础的知识，和之前牛腩系统中的CSS+div设计相似，找到两者相似的部分，学习起来自然也就轻松了很多，下面简单的总结一下吧。

一、HTML

    超文本标记语言，标准通用标记语言下的一个应用。也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。

   “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

    超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

二、元素

1）图示

2）四种形式

.空元素<br>

.带有属性的空元素<hr color="blue">

.带有内容的元素<title>http://www.baidu.com</title>

.带有内容和属性的元素<font color="red">http://www.baidu.com</font>

三、框架

四、标签

1）与段落控制相关

<p align=#>  表示paragraph，作用：创建一个段，属性align表示段的对齐方式，#可以是left、center、right、justify。

<br>  表示line break，作用：换行。

<hr color>  表示horizontal rule,作用：插入一条水平线，属性color用来制定线的颜色。

2）与文本显示相关

<center>...</center>  使文本居中显示

<hn align="#">...</hn>   指出文本的标题，n从1到6的整数，1表示最大标题，属性align用于设置标题的对齐方式，#可以是left、center、right。

<font size=n color="clr">...</font>  用于设置字体，属性size表示字体的大小，n可以是从1到7的整数，数字越大，字体越大；属性color表示字体的颜色。

<b>...</b>  使文本成为粗体。

<i>...</i>  使文本成为斜体。

3）输入特殊字符

4）建立数字编号的列表

<ol start=""></ol>  start属性，可设置起始的序号

<li value></li>   value属性，可改变列表内的编号顺序

5）建立带有项目符号的列表

     <li type="#"></li>

     <ul type="#"></ul>

     #可以是：disc——实心的圆圈

              square——实心的方块

              circle——空心的圆圈

6）建立无符号的列表

     使用<dl>与<dt>标签创建无符号的列表。

     使用<dd>标签代替<dt>，创建缩进的列表。

7）表格

定义：<table border=n align="alignment" bgcolor="clr">...</table>

      border:表格边框的宽度

      align:表格的对齐方式,alignment=left、center、right

      bgcolor:表格背景颜色

标题：<caption>...</caption>

表行：<tr align="alignment" valign="alignment">...</tr>

      align:水平方向上的对齐方式

      valign:垂直方向上的对齐方式

表头：<th>...</th>

单元格：<td>...</td>

8)交互式表单

创建表单：<form method="get or post" action="URL">...</form>

         method:指定向服务器发送表单数据时所使用的HTTP方法，有get和post两种方法

         action：指定对表单进行处理的脚本的地址，也就是说，表单提交到服务器后，交由谁来处理，在       action属性中指定处理者的URL。

     

<input>元素：用于接受用户输入的信息

             <input type="type" name="name" size="size" value="value">

             type：指定要创建控件的类型。

             name：指定控件的名称。

             size：指定表单中控件的初识宽度。

             value：指定控件的初始值。

列表框：（下拉菜单）由<select>创建，由<option>提供各项

多行文本输入：

创建：<textarea name="name" rows="number of rows" cols="number of colums">...</textarea>

      rows：指定文本输入控件的可视区域显示的文本行数。

      cols：指定文本输入控件可视区域显示的宽度

超链接：

     <a href="form.html">表单的例子</a>（相对路径）

     <a href="../form.html">表单的例子</a>（相对路径）

     <a href="C:\Users\何丽杰\Desktop\HTML测试\table.html">表格的例子</a>（绝对路径，容易出错，尽量不用）

     <a href="https://www.baidu.com">百度首页</a>（链接网站）

嵌入图像：

       <img src="URL" width=n height=n>

       src:指定图像资源的位置。

       width和height：指定图片的尺寸。

9）HTML注释

<!--This is a comment-->

五、学习心得

    学习新的知识要建立在旧的知识之上，这样延伸着学习，获得新知识的同时，巩固旧知识，还能带来心情上的愉悦，获取更多的知识，一举多得的事，我们何乐而不为呢？