ChuannBlog

html

初识html

html是HyperTxt Makeup Language（超文本标记语言）的简称。
HyperText is text displayed on a computer or device that provides access to other text through links, also known as “hyperlinks”.

标签

由尖括号包围的关键词，比如 <html>。HTML 标签分为单标签和双标签

<img><br><hr><input>

<img src=’https://s3.amazonaws.com/codecademy-content/courses/web-101/htmlcss1-diagram__htmlanatomy.svg’ width=400>

属性

HTML标签可以拥有属性，属性提供了有关HTML元素的更多信息。
属性以键值对(属性名=属性值)的形式出现，且总是在HTML元素的开始标签中规定。

元素

从开始标签到结束标签的所有代码。HTML元素以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容。

文档

HTML文档被称为网页，由嵌套的HTML元素构成。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。

注释

注释是在HTML插入的描述性文本，用来解释该代码或提示其他信息。

<!-- This is a comment -->

注释只出现在代码中，不会在页面中显示；且注释不可嵌套

实体

HTML中某些字符是预留的，必须被替换为字符实体

显示结果描述实体名称实体编号
 空格&nbsp;&#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp;&#38;
"引号&quot;&#34;
'撇号 &apos; &#39;
￠分&cent;&#162;
£镑&pound;&#163;
¥日圆&yen;&#165;
€欧元&euro;&#8364;
§小节&sect;&#167;
©版权&copy;&#169;
®注册商标&reg;&#174;
™商标&trade;&#8482;
×乘号&times;&#215;
÷除号&divide;&#247;

html结构

常用标签

<!DOCTYPE>标签

位于文档第一行，告知浏览器文档使用了哪种html或xhtml规范

<head>标签

<meta>标签

<icon>标签

定义使用浏览器打开网页的标签页的标题左边的图标

<link rel="icon" href="http://www.jd.com/favicon.ico">

<title>标签

定义使用浏览器打开网页的标签页的标题文字

<title>oldboy</title>

<link>标签

指定CSS样式

<link rel="stylesheet" href="css.css">

<script>标签

指定JS文件

<script src="hello.js"></script>　

<body>标签

基本标签

<div>和<span>

<div></div>：<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

图形标签: <img>

超链接标签(锚标签): <a> </a>

<!--普通超链接-->
<a href="">click</a>
<!--浏览器新窗口打开超链接-->
<a href="" target="_blank" >click</a>
<!--鼠标置于超链接之上显示文字-->
<a href="" title="all text">click</a>

URL是统一资源定位符(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

列表标签

表格标签: <table>

<table>
    <tr>
        <td>标题</td>
        <th>加粗标题</th>
    </tr>
    <tr>
        <td>内容</td>
        <td>内容</td>
    </tr>
</table>

表单标签 <form>