HTML超文本语言总结大全（超详细）

最新推荐文章于 2024-08-10 15:48:39 发布

我真的裂开了

最新推荐文章于 2024-08-10 15:48:39 发布

阅读量3.4k

点赞数 2

分类专栏： html 文章标签： html html5

本文链接：https://blog.csdn.net/whatidonot/article/details/109481792

版权

html 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

HTML概述

html是什么?

超文本标记语言(HyperText Markup Language)

超文本网页语言内容

标记语言标签用标签来标注网页内容,浏览器在运行网页时,就可以根据标注来显示

我的第一张<b>网页</b> 

ctrl+1 ctrl+2  设置标题
```语言名称 选择代码类型

html做什么?

制作网页

HTML基本语法

开发工具

HBuilder X 国产软件

基本结构

<!-- 
  html 注释  ctrl+/
  声明 html语言版本为html5 告诉浏览器按照html5的标准运行
 -->
<!DOCTYPE html>
<!-- 
   网页中所有的内容都必须写在html标签内
 -->
<html>
	 <!-- 
	   网页头,里面可以设置网页内容,还可以添加网页标题
	 -->
	<head>
		<!-- 设置网页字符集编码 -->
		<meta charset="utf-8" />
		<!-- 这些信息时提供给搜素引擎  了解-->
		<meta name="keywords" content="手机,家电">
		<meta name="description" content="免费 Web & 编程 教程">
		<meta name="author" content="jim">
		
		<!-- 为标题处添加图标  href="图标地址"   rel="说明文件类型" -->
         <link href="img/baidu.ico"  rel="icon"/>
		 <title>百度一下,你就知道</title><!--网页标题-->
	</head>
	<!-- 网页的身体 网页中的内容都写在body中 -->
	<!-- 
	    属性语法:
		 属性格式: 属性名="属性值"
		    位置: 写在开始标签
			数量: 多个
	  -->
	<body text="red" bgcolor="#A4FFA4">
		
		<!-- 
		   标签分类:
		   <开始> 修饰的内容 </结束>  闭合标签 (双标签)
		   <link href="img/baidu.ico"  rel="icon"/> 自闭和标签  (单标签)
		 -->
		<b>网页中的内容都写在body中</b>
		<i>网页中的内容都写在body中</i>
		
	</body>
</html>

常用标签

标题标签

标题标签
	<!-- 
	   h1....h6
	   会占一行
	   align="center" 控制内容在本行中的水平位置
	          left(默认) center right
	 -->
	<h1 align="center">一级标题</h1>
	<h2 align="right">二级标题</h2>
	<h3>三级标题</h3>

段落标签

<!-- 
		   p标签表示一个段落,占一行
		   段落与段落之间会有一个间隔
		   align="center" 
		   style="text-indent: 2em;" 首行缩进
		   
		   在代码中文字间有多个空格 浏览器都视为一个空格
		   
		   <br/>  换行标签
 		 -->
		<p>
			标签<br/>中的文字&nbsp;&nbsp;&nbsp;&nbsp;默认会独占一行，并且段与段之间会有一个间距
			标签中的文字默认会独占一行，并且段与段之间会有一个间距
			标签中的文字默认会独占一行，并且段与段之间会有一个间距
		</p>
		<p align="right">
			标签中的文字默认会独占一行，并且段与段之间会有一个间距
			标签中的文字默认会独占一行，并且段与段之间会有一个间距
			标签中的文字默认会独占一行，并且段与段之间会有一个间距
		</p>
		
		 <!-- 
		   特殊符号转义:
		    空格 --- &nbsp;
			注册商标 -- &reg;
			版权--- &copy;
			> --- &gt;
			< --- &lt;
		 -->
		 
		 &reg;  &copy;
		 
		 &lt;b &gt;标签的功能是加粗文字

有序列表,无序列表

有序列表
		<!-- 
		   有两组标签构成  ol li 列表项
		   列表项前面会生成序号
		   type="I" 指定序号类型 1,A,a,I,i
		 -->
		<ol type="I">
			<li>列表项内容</li>
			<li>列表项内容</li>
			<li>列表项内容</li>
			<li>列表项内容</li>
		</ol>
		
		无序列表
		<!-- 
		  type="disc(默认),square,circle" 
		 -->
		<ul type="disc">
			<li>列表项内容</li>
			<li>列表项内容</li>
			<li>列表项内容</li>
			<li>列表项内容</li>
		</ul>

超链接,图像

       <!-- 
		  超链接 a
		  连接到网络上的另一个指定的网页资源
		  href=""  超文本引用
		  target="_self(默认当前窗口打开),_blank(新窗口打开)" 打开方式
		 -->
		<a href="http://www.baidu.com" target="_self">百度</a>
		<a href="http://www.qq.com" target="_blank">腾讯</a>
		
		<a href="baidu.html">山寨百度</a>

<!-- 
		  img 标签 
		   src="图片地址"  引用项目中的一个图片
		   
		    alt="这是hao123" 图片不能正常显示时提示
			title="这是hao12345" 鼠标移动到标签上提示信息
		 -->
		<a href="http://www.hao123.com">
			<img src="img/hao123.png" width="300" height="200" border="0"
			     alt="这是hao123" title="这是hao12345"/>
		</a>

超链接锚点

超链接找锚点
<a href="#锚点名称">链接名称</a>

定义锚点
<a name="名称">aaa</a>

表格

表格的基本构成标签

1.table标签：表格标签

2.tr标签：行标签（表格中的行）

3.th标签：表格的表头

4.表格的表头：td

表格的基本结构：


< /td>

</tr>

5.表格属性

1border边框属性：border=“1”或者border=“0” bground背景图像 bgcolor背景颜色 width宽 height高

cellpadding填充 cellspacing间距 align=centre right left 表格的位置设置

valign：表格内的文字位置是由单元格的align和valign决定的 valign包括top middle bottom

表格合并：colspan跨列合并单元格 rowspan跨行合并单元格

表单

form

form标签：表单表格中需要提交的地方，用户可以在表单中填写信息然后提交表单，之后交给服务器

<input type=文本输入框“text”  id=“” name=“” value=“服务器提交的值” size=文本的宽度 readonly=readonly内容只读  palaceholder=请输入（提示信息）disabled=disabled内容置灰不可使用

在html中还有一个专门用来用来选中表单中提示文字的lable标签，这个标签列入用户名

要注意这个for属性，该属性需要指定表单中的id值。

1.密码框 type=password 2.单选按钮type=radio checked=checked默认选址 value=男

复选框type=checkbox 单选框需要用name属性来进行分组 name相同是一组比如性别name=sex那就男的input标签里name=sex 女的input标签里也是name=sex 复选框和单选框都不能输入内容，（指的是上传服务器的内容）所以必须指定value的值
文件复选框 type=file name=文件选择框名 accept=“文件后缀名”限制文件类型
表单下拉框（举个例子）< option value=" ">xxx
< option value=" ">xxx................
下拉框的name id事件等需要在select中定义，而value需要在option中定义

6.多行文本域基本语法

7.按钮选项input type=“reset name=reset value=重填 type=submit 提交 type=button按钮

内联框架

内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面

《iframe src=# name=# width=# height=# frameborder=框架边界宽度#> …