HTML基础入门：标记语言、结构与常用标签-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_68821222/article/details/133523406

一、HTML概述

HTML 指的是超文本标记语言 (HyperText Markup Language)。

超文本:是指页面内可以包含图片、链接、声音,视频等内容

标记:标签(通过标记符号来告诉浏览器网页内容该如何显示

用HTML语言把我们需要显示的内容显示在浏览器上，但html语言本身不显示

二、HTML基本用法

HTML基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的网页</title>
	</head>
	<body>
         hello world!
	</body>
</html>

1)<html></html>标签标记HTML文档的开始和结束

2)<head></head>标签包括标题和其他说明

3)<body></body>标签包含文本、图像和链接

4)<!-注释内容-->

5)标签

HTML中的标记指的就是标签

HTML使用标记标签来描述网页

结构：

<标签名></标签名> 闭合标签（有标签内容）

<标签名/> 自闭和标签（无标签内容）

6)标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性

如：<body text=”red”>

a 属性的格式：属性名="属性值"

b 属性的位置：

<标签名属性名 = ''属性值">.....</标签名>

c 添加多个属性：

<标签名属性名 = ''属性值" 属性名 = ''属性值">.....</标签名>

三、基本常用标签

1.标题标签

2.段落标签

<p></p>

3.换行标签

<br/>

4.列表

1）无序列表<ul><li></li></ul>

1）有序列表<ol><li></li></ol>

5.超链接<a></a>

a标签：通过连接来访问其他网页资源

链接标签
href="链接地址"
target="目标文件的地址

定义链接地址打开链接文档的位置

href：规定链接指向的页面的URL（页面地址）

URL：统一资源定位符

target：打开链接文档的位置默认值为_self，在自己窗口打开；_black重新开启一个窗口打开

6.图像标签

图像路径图像边框图像宽度图像高度

注：图片的宽高一般不建议使用

四、表格

1.表格的基本结构

table 表格
       tr 表格的行
       th head 表格的头
       tr date 表格的数据

2.表格属性

bgcolor="颜色背景颜色

border="number"表格的边框

background="图片位置"表格的背景

width="400" height="300"表格的宽度和高度

cellpadding="值"内容到边框的距离

cellspacing="值" 单元格与单元格之间的距离

valign="bottom" 表格内文字的位置是由<td>的aligin和valign决定的

valign可选的值为：top、middle、bottom

aligin：表格内文字的位置是由<td>的aligin和valign决定的

aligin：可选的值为：center、left、right

3.表格的合并

colspan（跨列合并单元格）colspan="number"

rowspan（跨行合并单元格）rowspan="number"

五、表单

1.<from></from>：

表示一个表单，一个表单里有多个组件

action=“后端程序的地址 javaEE”
method="get/post"请求方式

<form acition ="http://www.baidu.com" method="get"></form>
   type="test"单行文本输入框
   name="userName"
   randonly="randonly"只读，可以提交

2.文本

3 其他表单

4下拉框

5多行文本域基本语法

<textarea name= "textarea" cols= "40" rows= "6"> 文本域中的内容 </ textarea >

认识HTML