HTML基础

最新推荐文章于 2022-07-27 18:33:48 发布

qq_40800584

最新推荐文章于 2022-07-27 18:33:48 发布

阅读量168

点赞数

文章标签：初学

本文链接：https://blog.youkuaiyun.com/qq_40800584/article/details/80259426

版权

一、html基本介绍：超文本标记语言

二、html创建：

(1)eclipse:

File-> new-> Dynamic Web project

然后在 WebContent 下自己创建文件夹里或直接创建！！不可以在 WEB-INF下和 META-INF下创建

(2) sublime：

新建文件保存时文件后缀为html即可

三、html的注释

四、标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>本文内容</title><!--此处是标题-->
</head>
<body><!--主体内容区域-->
    <!-- font 标签      
		属性	
			color 字体颜色
			size 字体大小
			face 字体（宋体，微软雅黑...）
			<br>换行
	 -->
	 <font color="red" size="20px" face="微软雅黑">font</font> <br>
	<!-- 
		有关段落的标签
		<p></p>   	 段落
		h1~h6		 标题
		<hr>        水平线
		有关文字的标签:
		<b></b>     加粗 
		<u></u> 	下划线
		<i></i>		倾斜
		<s></s>		中划线
		<sup></sup> 上标
		<sub></sub>  下标
	 -->
	 <p>字段</p>
	 <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6>
	 <hr> 
	 <b>加粗</b>  
	 <u>下划线</u>
	 <i>倾斜</i>
	 <s>中划线</s>	
	 <sup>上标</sup>
	 <sub>下标</sub>
	 <!-- 特殊符号
	 	 	空格
	 	&copy	版权
	 	&reg	注册
	  -->
	 	空格 空格
	 	版权&copy;
	 	注册&reg;
</body>
</html>

2.序列标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list</title>
</head>
<body>
	<!-- 
		<ol></ol>	有序
		<ul><ul>	无序
		<dl></dl>	自定义
	 -->
	 <ul>
	 	<li>无序</li>
	 	<li>无序</li>
	 	<li>无序</li>
	 </ul>
	 
	  <ol>
	 	<li>有序</li>
	 	<li>有序</li>
	 	<li>有序</li>
	 </ol>
	 <dl>
	 	<dd>描述列表中的项目</dd>
	 	<dt>定义列表中的项目</dt>
	 	<dd>描述列表中的项目</dd>
	 	<dt>定义列表中的项目</dt>
	 </dl>
</body>
</html>

3超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
	<!-- 
		<a href=""></a>		
			href 	表示超链接目标的URL
		超链接的分类
			外部链接：	 指的是从一个单独的站点上，通过外部链接来指向并访问不属于该站点上的网页。
			内部链接：  	指的是在一个单独的站点内，通过内部链接来指向并访问属于该站点内的网页。
		路径
			绝对路径：	从根目录开始一直到该目录的全程的路径 
				例如	C:\windows\system32\cmd.exe
			相对路径：	是从当前路径开始的路径
				../		从当前文件跳出
				./或/	进入该目录下的文件
		空连接：href="#"
		快速发邮件：	mailto:邮箱地址
		锚链接：
	      href="#名字"
	   	  name="名字"
	   	调用js
	   		href="javascript:alert('调用js')"
	   	 8）超链接一个 属性  target ==》_blank   打开新的页面
	 -->
	 <a href="#">空连接</a>
	 <a href="javascript:alert('调用js')">调用js</a>
	 <a href="mailto:">发邮件</a>
	 <a href="" target="_blank"></a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多媒体</title>
</head>
<body>
	<!-- 
		插入图片
			<img src="" alt="">
		插入背景音乐
			<bgsound>
		插入多媒体
			<embed>
		路径
			相对路径和绝对路径
		h5新增
			音频
				<audio>	
					autoplay	自动播放
					loop=""		循环次数
			视频
				<video>
					属性和音频类似
		由于电脑里没音乐和图片不做演示了
			
	 -->
	 <img src="" alt="我电脑里没有图片">
	 <bgsound src="" >
	 <embed src="">
	 <audio src=""></audio>
	 <video src=""></video>	
	 
</body>
</html>

4、表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
	<!-- 
		form	表单
					action：提交位置	method：提交方式（post/get）
		input	文本
					通过type改变-- text ，password，radio checkbox，file ，hidden submit，button，reset，image...
		select	下拉框
		
	 -->
	 <form action="" method="get">
	 	文本框（输入框）：<input type="text"><br>
	 	密码：<input type="password"><br>
	 	单选框：<input type="radio"><br>
	 	多选框：<input type="checkbox"><br>
	 	文件：<input type="file"><br>
	 	隐藏的：<input type="hidden"><br>
	 	提交：<input type="submit"><br>
	 	按钮：<input type="button"><br>
	 	重置：<input type="reset"><br>
	 </form>
</body>
</html>