HTML

HTML

Administrator 字数: 9629 阅读耗时: 24 分钟 2024/06/04 2024/06/09 博客独享热度: 16 评论: 0

本文最后更新于 2024-06-09，文章内容可能已经过时。

一、概述

html: hyper text markup language (超文本标记语言)，是一种用于创建网页的标准标记语言

超文本：页面数据出文字外，还可以使用图片、音频、视频文件

标记：页面中，所有的数据必须以标签方式存在。

二、使用

1、编辑器

VS Code（微软开发，开源免费）: https://code.visualstudio.com/
Sublime Text：https://www.sublimetext.com
WebStorm：https://www.jetbrains.com.cn/webstorm/

2、入门案例


<html>
<head>
<meta charset="utf-8">
<title>这是标题</title>
</head>
<body>
    这是html网页的内容部分
</body>
</html>

3、常用标签

双标签：有开始和结束两种标签组成。一般情况下，内容直接放在标签对中间。<标签名>内容</标签名>
单标签：也叫自闭合标签，一般情况下，单标签有特殊用途。不会提供页面显示文字内容。<标签名 />

（1）根标签：所有html文档内容都包含在其中

（2）头标签：中间存放文档的标题，引入的javascript，字体编码等其他内容

（3）主体：中间存放页面的主要内容

background属性：为页面设置一张背景图片
bgcolor属性：为页面设置背景颜色

（4）标题： <h1></h1> 数字1-6，独占一行，默认字体加粗。数字越大，字越小

<h1>标题</h1>  --- <h6>标题</h6>

（5）字体标签：<font></font> 设置文字大小、颜色、字体

<font size="数字">标题</font>
size属性：1-7   数字越大，字越大
color属性：red   设置颜色   
face属性：仿宋    设置字体

（6）段落标签：·

· 独占一行。

（7）加粗：

（8）斜体：

（9）下划线：

（10）图片引入：<img>

<img src="相对路径" alt="说明" width="">
src属性：设置图片来源；
alt属性：当图片没有正常加载时，说明图片内容
width:  按设置宽度自动调整图片在页面上显示大小
height:  按设置高度自动调整图片在页面上显示大小

（11）超链接：<a></a>

<a href="" target="">蜗牛学苑</a>
href属性： 设置跳转链接
target属性： 设置跳转方式： _self _blank

（12）换行：<br>

（13）水平分隔符: <hr>

（14）块标签

通常可以用来包裹其他的标签内容

（15）通常用来包括文字

（16）表格：<table></table>

<tr>  : 行
<td>  : 列
属性：
table: 
	border:  设置边框线宽
	width:   宽度
	height:  高度
	align:   位置 （right  center  left）
	cellspacing:  单元格之间间隙
	
tr: 
    height:  高度
    align:   针对单元格中的内容位置设置
    
td: width:   宽度： 
    colspan: 合并列
    rowspan: 合并行

（17）表单：<form></form>

<form action="url" method="get|post">
input: type
text :  单行文本框 
password:  密码框
submit:  提交按钮
reset:  重置按钮
button:  普通按钮
file:   文件上传     当需要文件上传时，form标签中需要填加属性enctype=multipart/form-data
radio:  单选框       多个单选框，属性name必须一致。否则无单选效果  value=数字
checkbox:  复选框      多个输入需要区分，设置value=数字
select:option  下拉列表,option是选项  value设置提交内容

</form>