HTML再接触

水深无声 2022-04-15 02:55 110阅读 0赞

前言  
  之前学习C\#视频的时候接触过HTML，现在经过牛腩的学习，再次专项学习HTML，还是有很多收获的，最主要的还是复习之前的HTML内容了，不过知识就是在重复中印象才越来越深刻的。

收获  
  1.开始标签 内容 结束标签 属性值对  
  `<body><font color="red">这是HTML的学习现场</body>`

这里的`<body>`是开始标签，`</body>`是结束标签，`color`是属性，`red`是属性值，`这是HTML的学习现场`是内容。

2.HTML的4种形式

<br>                                            //空元素
    <hr color="blue">                               //带有属性的空元素
    <title>这是HTML的学习现场</title>                //带有内容的元素
    <font color="red">这是HTML的学习现场</font>      //带有属性和内容的元素

3.HTML的基本格式

<html>                             //开始HTML文档
    	<head>                         //开始文档头部
    		<title>                   //开始文档标题
    			这里是HTML的学习现场    
    		</title>                  //结束文档标题
    	</head>                       //结束文档头部
    	<body>                        //开始文档体
    			我是主持人Helen！
    	</body>                       //结束文档体
    </html>                           //结束HTML文档

4.与段落相关的标签

> `<p align="#">` 创建一个段。属性align表示段的对齐方式，\#可以是left、center、right、justify(两端对齐)  
> `<br>` 换行  
> `<hr color="clr">` 插入一条水平线。color指定线的颜色，例如：red、blue、green、black等

5.与文本显示相关的标签

> `<center>...</center>` 使文本居中显示  
> `<hn align="#">...</hn>` 指出文档的标题。n是1到6的整数，1是最大标题，6是最小标题。属性align用于设置标题对齐的方式，\#可以是left、center、right  
> `<font size=n color="clr">...</font>` 设置字体。size是大小，color是颜色  
> `<b>...</b>` 粗体  
> `<i>...</i>` 斜体

6.注释 ``

7.列表

使用`<ol>`和`<li>`标签创建带有项目编号的列表。

<ol>
    	<li>123
    	<li>456
    	<li>789
    </ol>                  //默认编号从1到3

<ol start="10">
    	<li>123
    	<li value="20">456
    	<li>789
    </ol>                 //编号是10 20 21

在上述标签中，可以使用type属性指定编号系统的类型。

> `<ol type="A"></ol>` A、B、C  
> `<ol type="a"></ol>` a、b、c  
> `<ol type="I"></ol>` I、II、III  
> `<ol type="i"></ol>` i、ii、iii

使用`<ul>`和`<li>`标签创建带有项目符号的列表。

> `<ul type="disc"></ul>` 显示为实心的圆圈  
> `<ul type="square"></ul>` 显示为实心的方块  
> `<ul type="circle"></ul>` 显示为空心的圆圈

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

使用`<dl>`和`<dd>`标签创建缩进的列表。

同时使用`<dt>`和`<dd>`标签，建立术语列表。术语由`<dt>`标签指定，说明由`<dd>`标签指定。

8.表格

<table border=n align="alignment" bgcolor="clr">...</table>  //border是定义表格边框的宽度；align设定表格的对齐方式，bgcolor指定表格的背景色
    <caption>...</caption>  //定义表格的标题
    <tr align="alignment" valign="alignment">...</tr>    //align指水平对齐方式，有left，center，right；valign是垂直对齐方式，有top，middle，bottom
    <th>...</th>  //定义表头
    <td>...</td>  //定义单元格

9.表单

使用`<form>`创建作为HTML文档一部分的表单。

<form method="get or post" action="URL"></form>       //get：提交的数据被附加到URL的末端，作为URL的一部分发送到服务器端
    								//post：将表单中的信息作为一个数据块发送到服务器端
    								//action：对表单进行处理的脚本的地址

使用`<input>`接收用户输入的信息。

<input type="type" name="name" size="size" value="value">  //type  控件的类型
    								//name  控件名称  在表单中不显示
    								//size  控件的初识宽度
    								//value  控件的初识值

type="text"            //单行文本输入控件
    type="submit"          //提交按钮
    type="reset"           //重置按钮
    type="password"        //口令输入控件
    type="radio"          //单选按钮         checked表示被选中
    type="checkbox"      //复选框
    type="hidden"         //隐藏控件

列表框

多行文本输入控件

个人简介：<textarea name="personal" rows="5" cols="30">个人简介</textarea>

10.超链接URL

<a href=""></a>       //""里可以是主机上文件的绝对路径，也可以是网址

11.嵌入图像

<img src="URL" width=n height=n>    //src指位置，width是宽度，height是高度

总结  
  HTML作为一种超文本标记语言，里面还有很多的功能值得我们去探索。