HTML基础学习(一)—HTML

时间：2023-03-10 02:08:22
HTML基础学习(一)—HTML

一、HTML的介绍

     HTML(HyperText Markup Language)超文本标记语言，不是一种编程语言，而是一种描述性的标记语言，用于描述超文本的内容的显示，比如字体颜色或者大小。

     HTML是最基础的网页语言，它是通过标签定义的语言，代码是由标签所组成的。

<!DOCTYPE html>

<html>

	<head>

		<!--

		  1.放置一些属性信息，辅助信息。

		  2.引入一些外部的文件(css js)。

		  3.它里面的内容会先加载。

		 -->

		<meta charset="UTF-8" />

		<title>这是HTML标题</title>

	</head>

	<body>

		<font color="red">这是网页正文</font> 

	</body>

</html>

 

二、HTML标签的使用

1.排版标签

(1)<br/>

    换行。

(2)<p></p>

    段落标签，在开始和结束的位置上留一个空行。

     属性: align="left/center/right"对齐方式。

(3)<hr/>

     一条水平线。

(4)div

     声明一块区域。

     <div>数据</div>

(5)span

     声明一块区域。

<!DOCTYPE html>

<html>

  <head>

    <title>HTML学习</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  </head>

  <body>

  	---------------------p标签测试---------------------

  	<p>

  		 HTML(HyperText Markup Language)超文本标记语言，不是一种编程语言，而是一种描述性的标记语言，用于描述超文本的内容的显示，比如字体颜色或者大小。

  	</p>

  	---------------------hr标签测试---------------------

  	<hr align="left" width="50%"/>

  	---------------------div标签测试---------------------<br>

    <div>这是div区域1</div>

    <div>这是div区域2</div>

    ---------------------span标签测试---------------------<br>

    <span>这是span区域1</span>

    <span>这是span区域2</span>

  </body>

</html>

结果:

HTML基础学习(一)—HTML

 

2.字体标签

(1)<font></font>

     中间放文字，设置文字的颜色大小。

     sieze:字号大小最大值7，最小值1。

(2)标题标签

     <h1></h1>

     ……字体从大到小……

     <h7></h7>

 

(3)<b></b>

    粗体。

 

(4)<i></i>

    斜体。

 

3.列表标签

     数据对齐格式化。

(1)<ol></ol>

    有序列表。

(2)<ul></ul>

    无序列表。

<!DOCTYPE html>

<html>

<head>

<title>HTML学习</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

	<h2>有序列表</h2>

	<ol type="a">

		<li>AAA</li>

		<li>BBB</li>

		<li>CCC</li>

	</ol>

	<h2>无序列表</h2>

	<ul>

		<li>AAA</li>

		<li>BBB</li>

		<li>CCC</li>

	</ul>

</body>

</html>

结果:

HTML基础学习(一)—HTML

 

4.图片标签

<img />

     属性:

           src: 文件的位置。

           width:文件宽度。

           height: 文件高度。

           alt: 文件的说明文字。

 

5.超链接标签

<a></a>

(1)链接资源

     href="" 必须指定协议，默认为file文件协议。

(2)定位资源

     name 锚点

     <a name="top">顶部</a>

     <a name="center">中间</a>

     <a href="#top">回到顶部</a>

 

6.表格标签

<!DOCTYPE html>

<html>

<head>

<title>HTML学习</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

	<table border="1" width="50%" align="center" cellpadding="8">

		<caption>用户列表</caption>

		<tr>

			<th>姓名</th>

			<th>性别</th>

			<th>年龄</th>

		</tr>

		<tr align="center">

			<td>AAA</td>

			<td>男</td>

			<td>22</td>

		</tr>

		<tr align="center" >

			<td>BBB</td>

			<td>女</td>

			<td>21</td>

		</tr>

		<tr align="center" >

			<td colspan="3">

				人数总计:

			</td>

		</tr>

	</table>

</body>

</html>

结果:

HTML基础学习(一)—HTML

 

7.表单标签

<form></form>

(1)form标签中常见的属性

action: 指定表单组件数据发送的位置。如果没有定义action属性，那么默认提交到当前页面。

method: 定义表单提交的方式。只有两种常用 get post.如果没有指定method，默认就是get提交方式。

 

(2)input标签中type的类型如下

     文本框 text。输入的文本信息直接显示在框中。

     密码框 password。输入的文本以原点或者星号的形式显示。

     单选框 radio 复选框 checkbox 如：兴趣选择。

     隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。

     提交按钮 submit 用于提交表单中的内容。

     重置按钮 reset 将表单中填写的内容设置为初始值。

     按钮 button 可以为其自定义事件。

     文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。

 

(3)两个特殊的

A:<select>

     选择标签 提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。

    <option>:子项标签 属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。

B: <textarea>

     多行文本框。如：个人信息描述。

相关文章