web技术：HTML基础知识_html技术基础 csdn-CSDN博客

文章目录

概述
HTML标签
head
链接
图片
列表
HTML CSS
HTML发展历程
- HTML5（2014/10/28）
参考

概述

HTML文件基本结构

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

</body>
</html>

<!DOCTYPE html>告诉浏览器这是一个HTML5页面。

标签
标签的组成：元素、属性、值。
有些元素是空元素，既不包含文本也不包含其他元素。看起来像是开始标签和结束标签的结合，由左尖括号开头，然后是元素名称和可能包含的属性，然后是一个可选的空格和一个可选的斜杠，最后是必有的右尖括号。

空元素只有一个标签，同时作为元素的开始标签和结束标签使用。结尾处的空格和斜杠在HTML5中是可选的。

命名规范
文件名全部使用小写字母，用短横线分隔单词，用.html作为扩展名。

URL
URL 路径有时不以文件名结尾，而以一个目录结尾（可以包含一个结尾的斜杠，也可以不包含）。在这种情况下，URL 指的是路径中最后一个目录中的默认文件，通常为 index.html。
URL 可以是绝对的，也可以是相对的。
相对URL：

引用同一目录下的文件：index.html
引用子目录下的文件：sub/index.html
引用上层目录的文件：../img/logo.png
根相对 URL：/img/logo.png

HTML标签

基础

<!--  --> //注释
<!DOCTYPE> //文档类型
<html> //HTML文件
<title> //标题
<body> //主体
<h1>-<h6> //HTML标题
<p> //段落
<br/> //换行
<hr/> //水平线

<div>组合其他标签的容器</div>

格式

<b> //加粗
<i> //斜体
<del> //删除
<ins> //下划线
<sub> //下标
<sup> //上标

<div> //块标签
<span> //与行内元素组合，设置样式

head

<head>
<!--<meta>标签提供了元数据，元数据不显示在页面上，但会被浏览器解析。-->
<meta charset="utf-8">
<meta name="description" content="定义网页描述内容">
<meta name="author" content="定义网页作者">
<!--3秒刷新网页-->
<meta http-equiv="refresh" content="3">
<!--为搜索引擎定义关键字-->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

<title>网页标题</title>
<!--标题左侧显示logo-->
<link rel="shortcut icon" href="图片url">

<!--HTML文档中所有的链接标签的默认链接-->
<base href="http://www.test.com/images/" target="_blank">

<!--HTML文档与外部资源之间的关系，通常用于链接到样式表-->
<link rel="stylesheet" type="text/css" href="mystyle.css">

<!--HTML文档的样式文件引用地址或自定义样式-->
<style type="text/css">
body {background-color:yellow}
p {color:green}
</style>

<!--加载脚本文件-->
<script>
  ...
</script>
</head>

链接

<!--使用target属性，可以定义链接在哪个窗口显示。_blank表示在新窗口显示-->
<a href="http://www.liuweidong.club/" target="_blank">测试链接</a>

图片

<!--html文件与图片在不同盘符-->
<img src="file:///f:/*.jpg" width="500" height="300"/>
<!--html文件与图片在相同目录-->
<img src="*.jpg" width="500" height="300"/> 
<!--html文件与image文件夹在相同目录-->
<img src="image/*.jpg/"width="500" height="300"/>
<!--html文件与图片的父文件夹在相同目录-->
<img src="../image/*.jpg/"width="500" height="300"/>
<!--网络图片-->
<img src="http://www.test.com/images/test.png" width="500" height="300"/>

<img src="url" alt="图片加载不出来时，替换图片的文本"/>

列表

<!--无序列表-->
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<!--有序列表，start属性可以指定从特定数字开始-->
<ol start="3">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>

HTML CSS

<!--方式一 内联样式 在HTML元素中使用"style"属性-->
<!--background-color：背景色；font-family：字体；color：文字颜色；margin-left：左边距； text-align：文本对齐方式；-->
<h2 style="background-color:red;">标题</h2>
<p style="font-family:arial;color:blue;font-size:20px;margin-left:20px;">段落</p>
<h1 style="text-align:center;">居中对齐的标题</h1>

<!--方式二 内部样式-->
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

<!--方式三 外部样式-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

HTML发展历程

HTML5（2014/10/28）

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

</body>
</html>

废弃元素：

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

参考

HTML5与CSS3基础教程第8版