HTML

最新推荐文章于 2023-01-19 19:15:58 发布

向51致敬

最新推荐文章于 2023-01-19 19:15:58 发布

阅读量311

点赞数

分类专栏：前端 HTML

本文链接：https://blog.csdn.net/pan_by/article/details/101848602

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

互联网的基石

统一资源定位符（URL）
互联网上每个资源都对应一个单独的URL
超文本传送协议（HTTP, HyperText Transfer Protocol）
它负责规定浏览器和服务器怎样互相交流
超文本标记语言（HTML,HyperText Markup Language）
作用是定义超文本文档的结构和格式

在这里插入图片描述

HTML文本是由HTML命令组成的描述性文本，
HTML文件必须有htm或者html扩展名
HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容
在这里插入图片描述

heab

<head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义:
对文档做整体的控制

<title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。

<meta>
<meta name="keywords“  content="study,computer"> 
用来标记搜索引擎在搜索你的页面时所取出的关键词。
<meta name=“description“  content=“java,html"> 
这个 Meta 元素定义了对页面的描述: 
<meta name="author" content=“puckasoft"> 
用来标记文档的作者。
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”> 
用来标记你的页面的解码方式。 
<meta http-equiv=“refresh” content=“5;URL=http://www.163.com”>
用来自动刷新网页

一个典型的head

<head>
		<title>典型的head</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta http-equiv="refresh" content="5;URL=http://www.163.com">
		<meta http-equiv="expires" content="0">

		<meta name="author" content="zhangsan">
		<meta name="description" content="java">
		<meta name="keywords" content="JAVA,音乐,生活">


		<link rel="stylesheet" type="text/css" href="css/pagination.css" />
		<script type="text/javascript" src="js/search.js"></script>
	</head>

body

<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；
这些元素和元素属性构成HTML文档的主体部分

<body>元素的属性

bgcolorbgcolor属性将背景设置为颜色，它的值可以是一个十六进制数、RGB值或者一种颜色名称。
<body bgcolor="#000000">
<body bgcolor="black"> 
backgroundbackground属性将背景设置为图像，它的值是你所要使用图像的URL地址。
图像文件的容量尽量不要超过10K。 
<body background=“./images/sky.jpg” >bgcolor和background不能同时使用！

常用标签（文字操作）

<p>-段落(paragraph)-(4.html)
标签<h1>到<h6>标题元素。<h1>定义了最大的标题元素，<h6>定义了最小的。 (5.html)
<br>或者<br/>换行标签。
<!-- This is a comment --> html中的注释。浏览器将会忽略。
<hr size=“9” width=“80%” color=“red” >水平线
<del>twenty </del>删除文字
<b>...</b>粗体字(bold) 
<i>...</i>斜体字 (italic)
<font color=“red” size=“1”>...</font> 1是最小字体…
 <SUB> 下标(subscript)
 <SUP> 上标 (superscript)
<pre>代码标记，保持原格式
<span> 文字域标记 只有设置样式才起到作用
<div> 章节段落域标记  多用于布局页面

在这里插入图片描述

HTML常用标签（超链接）

<a href=“5.htm”>5.htm</a> 超链接
图片作为链接。
	<a href="lastpage.htm">	<img border="0" src=".\images\next.gif">
	</a>
target属性(定义从什么地方打开链接地址 )
	<a href="http://www.163.com/" target="_blank">163!</a>

点击aaaa会在nnnnn中打开
<a herf="12306" target="myframe">aaaa</a>
<iframe src="baibu" name="myrame">nnnnn</iframe>

在这里插入图片描述

锚标签和name属性
命名一个锚点：
<a name="label">Text to be displayed</a>
链接到锚点：
<a href="http://www.w3schools.com
	/html_links.asp#label">Jump to the label</a>
-------
<a name="mytop">顶部</a><br />//这段代码写在最前端
		<a href="#mytop">返回顶部</a> 跳到mytop锚点处

HTML常用标签（图像）
<img >标签的属性
src:图像文件地址
width：图像宽
height：图像高
border:图像边框
title：表示鼠标在图片上停留时，显示一个文字悬浮框。
alt：用于图片没显示时，显示一个说明文字。

<img src="../img/披风侠.jpg" width="200xp" 
			height="300xp" title="披风侠"	alt="披风侠"/>

音频视频播放标签

<embed>
标记用于在页面中嵌入多媒体文件，但是用户计算机上需要事先安装相应的处理程序.
(一般用于IE和基于IE内核的浏览器。火狐需要安装插件才行。)
常用嵌入式文档的格式：
mp3, mid, wma, asf, swf, flv, rm, ra, ram, avi
<embed src='http://player.youku.com/player.php/sid/XMTcxOTEzMjE0OA==/v.swf' 
allowFullScreen='true' quality='high' width='480' height='400' align='middle' 
allowScriptAccess='always' type='application/x-shockwave-flash'  ></embed>

音频
<audio controls>  
	<source src="horse.mp3" type="audio/mpeg">  
	<source src="horse.ogg" type="audio/ogg">  
	Your browser does not support this audio format.</audio>

视频
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>