HTML学习总结

星崆

于 2021-07-18 16:51:59 发布

阅读量165

点赞数

分类专栏：笔记总结文章标签： html java

本文链接：https://blog.csdn.net/weixin_45057286/article/details/118879371

版权

笔记同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

总结

5 篇文章 2 订阅

订阅专栏

本文详细介绍了HTML的基础概念，包括文档结构、基本标记、元数据、标题、文字格式、排版、字体、背景、链接、表格、输入标签、表单、多媒体以及层（div）的使用。内容涵盖HTML的主要元素和属性，是学习HTML入门的全面指南。

摘要由CSDN通过智能技术生成

HTML

HTML的概述

	HTML指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。HTML 不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)。

HTML的文档结构

HTML的文档结构主要是由三部分组成的:<html></html>、<head>和</head>、<body>和</body>
（1）<html></html>
	 <html>标记用于html文件的最前面，用来表示html文件的开始。而</html>的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。
（2）<head></head>
	<head>和</head>构成html文件的头部部分，在此标记对之间可以使用<title> </title>和<script> </script>等等标记对，这些标记都是描述html文档相关信息的标记对，<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。
（3）<body></body>
	<body>和</body>是html文档的主体部分，在此标记可以包括“<p>”,“</p>”,“<h1>”,“<br>”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。

HTML的基本标记

1. META标记
	meta标签描述了一些基本的元数据。<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。<meta> 一般放置于 <head> 区域。
2. TITLE标记
	在头部的<head></head>中，有另一组标签<title></title>。写在<title></title>这里面的文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题。
3.文字上的分隔标记：
	- 强制断行标记：<br>
	- 强制分段标记：<p>
	- 空格：&nbsp
4. 排版的标记
（1）居中标记
	a.<center>居中对齐</center>
	b.说明:
		这是一个经常用到的标记，除了文字外，还有图片，表格等等一些其他的标记，任何可以显示在网页中的东西他都可以置之中。
（2）保持原始格式标记
	a.<pre>保持原有格式不变</pre>
	b.说明：
    	利用“<pre>”标记可以将排版和格式后的内容原封不动的呈现出来。
（3）文字的置左，置右，置中：
	在<p>标签中有一个属性align，这个属性常常在不同标记中出现，其功能就是专门在设定“水平对齐的位置”，其常见的属性值有三个“align="left"”置左，“align=""center”置中，“align="right"”置右。
5. 字体标记
（1）标题标记:
	a.使用方法：<h1>内容</h1>
	b.说明：
		标题的大小一共有6中，也就是从<h1>到<h6>,<h1>最大，<h6>最小。使用该标记时字体会变成粗体，并自称一行。
（2）设置字体标记
	使用方法：<font  size=“2”  color=“red”  face=“黑体”>内容</font>
（3）字体变化标记
	a.使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
	b.相关标记：
	       <b></b>                     加粗 
   		   <i></i>                     斜体            
           <u></u>                     底线             
           <sup></sup>                 上标             
           <sub></sub>                 下标             
           <blink><blink>              闪烁（在IE浏览器中没有效果） 
           <em></em>                   强调             
           <strong></strong>           加强             
           <smap></smap>               用于字母序列等宽       
           <address></address>         模拟信封上的字体       
           <s></s>                     删除线            
           <strike></strike>           删除线            
           <big></big>                 比默认字号大一号       
           <small></small>             比默认字号小一号       
           <code></code>               以等宽字体显示计算机程序代码 
6. 背景标记:
	使用：<body bgcolor="red"  backgroud="bg.jpg">
7. 分隔线标记:
	使用:上一部分<hr>下一部分
8. <IMG>标记:(向网页中插入图片)
	使用：<img  src="boy.jpg"  alt="haha" align="left" border="0"  height="56px" width="32px">
9.序列标记：
（1）无序列表<ul>
	a.使用：<ul><li>这是一个无序列表</li></ul>
	b.说明：其中<ul>就是无序列表，每增加一列内容，就需要加一个<li>;也可以为 <ul>添加属性type="disk"(实心点)，type="square"(小正方形)type="circle"(空心点)。
（2）有序列表<ol>
	a.使用：<ol><li>这是一个有序列表</li></ol>
	b.说明：其中<ol>就是无序列表，每增加一列内容，就需要加一个<li>;可以为 <ol>添加属性type="1"(数字)，type="A"(大写字母)，type="a"(小写字母)，type="I"(大写罗马)，type="i"(小写罗马)。
（3）自定义列表<dl>
	使用：<dl>
			<dt>这是一个自定义列表</dt>
			<dd>这是一个自定义列表</dd>
		</dl>
10. 特殊字符：
（1）<：&lt;
（2）>：&gt;
（3）&：&amp;
（4）“：&qout;
（5）空格：&nbsp;

超链接

1. 连接到其他的文档
	a.使用：<a href=“特殊字符.html“ target=”_blank”>连接其他文件</a>
	b.注意：此处所用的文件路径为相对路径。
	绝对路径：是指从根目录到文件的完整路径。
	相对路径：是指相对于当前文件的文件位置。
2. 网页的内部链接
	使用：<a  href="#c7">查看。。。</a>
3. 网页的外部链接
	使用：<a  href="http://www.baidu.com">链接的百度</a>
4. 图片的锚点链接

表格

1. 表格的结构
（1）<table>：<table>...</table>是用来在html页面上创建表格的。
（2）<th>：代表列名一般放在第一行
（3）<tr>：代表格的一行。
（4）<td>：用来定义表格的一列。
（5）注意：在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。
2. 表格的设置
		<table border="" cellspacing="" cellpadding="">
			<tr><th>Header</th></tr>
			<tr><td>Data</td></tr>
		</table>
3. 表格的合并
	a.使用colspan属性设置表格的横向合并，使用rowspan属性设置表格的纵向合并。
	b.举例：
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

input标签

1. 写法：<input type = “text" value=""/>
2. 邮箱输入框
	<input type="email" name="user_email" />
3. 数字输入框
	<input type="number" name="points" min="1" max="10" />
4. 数字范围输入框（进度条）
	<input type="range" name="points" min="1" max="10" />
5. 颜色选择框
	<input  type="color" name="colortext"/><br>

属性	作用
text	文本框
button	按钮
submit	提交
reset	重置
password	密码
checkbox	多选
radio	单选
file	上传文件
date	选取日、月、年
month	选取月、年
week	选取周和年
time	选取时间
datetime-local	选取时间、日、月、年（本地时间）
datetime	选取时间、日、月、年（UTC时间）

Select标签（下拉列表及文本域）

1. 标签定义及使用说明
（1）<select> 元素用来创建下拉列表。
（2）<select> 元素中的 <option> 标签定义了列表中的可用选项。
2. 提示和注释
	<select> 元素是一种表单控件，可用于在表单中接受用户输入。
3. 相关属性：
（1）multiple：当该属性为true时，可选择多个选项。
（2）disabled：当该属性为true时，会禁用下拉列表。
（3）name：定义下拉列表的名称。
（4）required：规定用户在提交表单前必须选择一个下拉列表中的选项。
（5）size：规定下拉列表中可见选项的数目。

表单

1. 表单的用途：
	表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
2. 表单的设置：
	<form>input 元素</form>
3. 文本域（Text Fields）
	文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
4. 密码字段
	密码字段通过标签<input type="password"> 来定义。
5. 单选按钮（Radio Buttons）
	<input type="radio"> 标签定义了表单单选框选项。
6. 复选框（Checkboxes）
	<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
7. 提交按钮(Submit Button)
	<input type="submit"> 定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

多媒体标记音频

1. HTML4多媒体
（1）<embed src="文件源" width="宽度"    autostart="true"  loop="true">
（2）相关解释：
		src		设置文件源
        width    设置宽度
        autostart   设置是否自动播放，如果是true就是自动播放，是flase不自动播放
        loop     设置是否循环播放true就是循环播放，false就是不自动播放
2、HTML5多媒体
	<audio src="G:\Media\霍比特人3：五军之战.mp4" controls="controls"></audio>
3、添加背景音乐
	<bgsound src="明月几时有.mp3" loop=5>
4. 视频标签
（1）<video src="G:\Media\霍比特人3：五军之战.mp4" width="320" height="240" controls="controls"></video>
（2）相关解释：
		control 属性供添加播放、暂停和音量控件。
		Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
		要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
		video 元素允许多个 source 元素。source 元素可以链接不同的视频文件

层（div）

1. 标签定义及使用说明
	<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
2. 提示和注释
（1）提示：<div> 元素经常与 CSS 一起使用，用来布局网页。
（2）注释：默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。