超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
<!doctype html><!--声明HTML5文档-->
<html lang='en'><!--html根标签 lang翻译：成英文-->
<head><!--网页的头部-->
<meta charset = "UTF-8"><!--编码格式 UTF-8 国际编码 meta 元标签-->
<meta name = "Author" content = "网页作者" ><!--作者-->
<meta name = "Keywords" content = "关键词1,关键词2 给搜索引擎抓取用" ><!--关键字-->
<meta name = "Description" content = "网页描述"><!--描述-->
<title>Document</title><!--网页标题-->
<link rel="stylesheet" href="style.css"><!--外部css样式/外链样式 href后面跟css文件地址-->
<style type='text/css'>/* style中写css */
div{
width:100px; /* 宽度：100像素*/
height:100px; /* 高度：100像素*/
background:red; /* 背景：红色 */
}
/* {}前面写选择器，{}里面写样式 */
/*style标签里面写内嵌(嵌入式)样式*/
</style>
</head>
<body><!--网页主干:可视化区域-->
<!--
HTML:网页结构
css:层叠样式 ---修饰,美化网页(网页化妆师)
js(javascript): 脚本语言---网页效果，特效(网页魔术师)
-->
<div style='width:100px;height:100px;background:red'> </div><!--块/div标签-->
<!-- style中写行间（内联/行内）样式 -->
</body>
<!-- script中写入javascript -->
<script>
var oDiv = document.getElementsByTagName('div');
//console.log( oDiv );
oDiv[0].onclick = function(){
oDiv[0].style.background = 'green';
}
</script>
</html>
标签
div标签
<div style=''> 我是div标签 </div>
标题标签
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>
段落标签
<p>这是一个段落。</p><!-- 段落标签 -->
链接标签
<a href='https://www.taobao.com/'> 超链接标签或者a标签 </a><!-- 超链接 -->
提示:在 href 属性中指定链接的地址。
图像标签
<img src="/images/logo.png" width="258" height="39" /><!-- 图片 -->
提示：在 src属性中指定图像的地址(相对路径/绝对路径)。
注意：图像的名称和尺寸是以属性的形式提供的。
列表标签
<ul><!-- 无序列表标签 -->
<li>
<span> ul列表一</span>
</li>
<li>ul列表二</li>
<li>ul列表三</li>
<li>ul列表四</li>
</ul>
<ol><!-- 有序列表标签 -->
<li>ol列表一</li>
<li>ol列表二</li>
<li>ol列表三</li>
<li>ol列表四</li>
</ol>
<dl><!-- 自定义列表标签 -->
<dt>dl列表标题</dt>
<dd>dl列表一</dd>
<dd>dl列表二</dd>
<dd>dl列表三</dd>
<dd>dl列表四</dd>
</dl>
斜体标签
<i>iiii</i> <!-- 斜体标签 -->
<em>emememem</em> <!-- 强调 斜体 -->
粗体标签
<b>加粗标签</b><!--粗体标签-->
<strong>strongstrongstrongstrong</strong><!-- 强调 粗体 -->
水平线标签
<hr/> <!-- 水平线 -->
换行标签
<br/> <!-- 换行标签 -->
标签详解
img
<!doctype html> <!-- 文档类型：HTML文档(HTML5标准) --><!-- 注释：说明给开发人员看的 -->
<html lang='en'><!--html根标签 lang翻译：成英文-->
<head><!--网页头部-->
<meta charset='UTF-8'/><!--字符编码：UTF-8 国际编码-->
<meta name='keywords' content='关键词1,关键词2 给搜索引擎抓取用'/>
<meta name='description' content='网站描述'/>
<meta name='Author' content='网页作者'/>
<title>hello world</title><!--网页标题-->
<style type='text/css'>/* style中写css */
div{/* width样式属性 */
width:100px; /* 宽度：100像素*/
height:100px; /* 高度：100像素*/
background:red; /* 背景：红色 */
}
/* {}前面写选择器，{}里面写样式 */
img{
width:100px;
height:100px;
}
</style>
</head>
<body><!--网页主干:可视化区域-->
<!--
一、HTML CSS JS
HTML:网页结构
css:层叠样式 ---修饰,美化网页(网页化妆师)
js(javascript): 脚本语言---网页效果，特效(网页魔术师)
二、常用标签
div
img
三、img 详解
属性：
src 定义图片路径
width 定义宽度,只给宽度，height会等比例缩放
height 定义高度,只给高度，width会等比例缩放
alt 定义图片出错是的提示内容，有利于seo,搜索引擎的抓取
title 定义鼠标移到图片上出现的描述
-->
<div>
<!-- src属性 -->
<img src='images/1.jpg' width='650' height='459' alt='大自然' title='hello world'/>
<p title='我是p'>pppppppppppp</p>
</div>
</body>
</html>
网友评论