HTML简单入门

简介

HTML也就是超文本标记语言，HTML5。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8">
    <title>html document</title>  
</head>
<body> 
</body>
</html>

HTML简单入门
其中： <!DOCTYPE html> 表示文档声明。body中写具体可见内容。

主要形式：.htm .html

HTML简单入门
HTML属性（属性只能在开始标签定义）：
通用属性/全局属性，如id,class,style
特有属性，如colspan,type,value

HTML语义化标签

1、标题标签，只有六级。 <h1>标题内容</h1>

2、段落标签，段落和段落之间会换行。<p>段落内容</p>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTMl 段落标签</title>
	<style>
		p {
			margin:0;
			padding:0;
		}
	</style>
</head>
<body>
	<p>段落内容1</p>
	<p></p>
	<p>段落内容2</p>
</body>
</html>

style中设置段落标签的属性:内外边距为0。不加style样式，即默认浏览器样式，两行之间由于<p></p>存在的缘故会有空隙，即空标签也会占位置。
HTML简单入门
3、字体标签（已过时）。<font>文字内容</font>
注：三种颜色表示方式：red/#d8d8d8/rgb(168,178,188)

4、链接标签。<a></a>,属性有herf和target。作用：文档内部锚点跳转、跳转到外部文档、下载资源。

href：超文本引用，写入地址即可
target：“_blank”在新窗口打开链接；"_self"在当前窗口打开链接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>链接</title>
	<style>
		.content {
			height:800px;
		}
		a {
			color:#333333;
			text-decoration: none;
		}		
		a:visited {
			color:#333333;
		}
	</style>
</head>
<body>
	<a href="http://www.imooc.com/" target="_blank">链接到新窗口</a>
	</br>
	<a href="#titleThird">页面内锚点跳转</a>
	</br>
	<a href="javascript:void(0);">不做任何跳转</a>
	</br>
	<div class="content">做出空白区域</div>
	</br>
	<h3 id="titleThird">跳转到这里</h3>
</body>
</html>

注1：</br> 表示换行

注2：#对应id、.对应class

注3：<style> 定义文档中标签元素的样式

注4：style中的.content，目的是为了空出一片区域展示页面内锚点跳转的效果

注5：text-decoration: none;表示去掉下划线

待整理：

<input type="text" value="" />  #属性只能在开始标签定义

<script> 实现交互脚本
<link> 链接外部资源

简介

HTML语义化标签

相关推荐