轻松理解HTML

HTML的本质？

HTML本质是超文本标记语言，能表现如文字、视频、音频、程序等复杂元素。

什么是标签？

标签就像一个人名字张三、李四代表人的姓名一样。网页程序中不同的标签有着不同的意义，也代表不同功能和样式。

第一，html网页标签是放入以“<”开始，“>”结束尖括号有意义单词（系统、程序、浏览器默认单词），如<div>这就是div标签。

第二，网页标签不是随便自己命名，如<p>、<br>、<div>等都是有意义而且是浏览器支持的标签。

有哪些常见标签？

<!DOCTYPE html>
<html>这是一对超文本开始与结束标签
    <head>是一对头部声明标签，如标题标签、JS链接、CSS链接都是放入此对标签内
        <meta charset="UTF-8">
        <title>这是一对超文本开始与结束标签</title>
    </head>
    <body>是一定内容标签，即要显示内容都放入此标签内。
        <div>div标签也是div css所说的div标签。</div>
        </br>换行标签
        <font>字体声明标签，可在此标签内设置文字的CSS样式</font> 
        <span>此标签与div标签相似</span>
        <b></b>和<strong></strong>都是加粗标签
    <table border="1">表格标签
       <thead>
         <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
       </tr>
    </table>
    <form action="submit 操作执行的请求地址" method="指定请求的类型 get/post">表单标签
      <p>段落标签: <input type="text" name="fname" /></p>
      <input type="submit" value="Submit" />
    </form>
     </tbody>
    </body>
</html>

标签的语义

H1/H2/H3 表现大纲级别

div/span/p 表现布局

使用带语义的标签可以让搜索引擎快速的进行收录

虽然不同的标签也许能够达到相同的显示效果，但是强烈建议使用语义化标签+CSS样式去控制

<style>
.hstyle {
display: block;
font-size: 2em;
font-weight: bold;
}
</style>
<h1>标题1</h1>
<span class="hstyle">标题1</span>

如何使用样式

1、外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2、内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

3、内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

JavaScript 的作用

1. 业务逻辑处理

2. 对 DOM 进行操作（DOM : Document Object Model）:通过事件驱动页面模型发生变化（DOM 树中元素的增删改查，特别是改：改内容，改样式），JavaScript 能操作 DOM 的原因在于 JavaScript 实现了 DOM 相关操作的接口，能满足对 DOM 的操作。

JavaScript 是弱类型语言，体现在变量是没有准确的数据类型定义。通过 var 关键字定义。

// 动态类型,随值的变化而变化
var flag = 'abc';
flag = 12;
flag = true;
flag = {name : 'Tom'};
flag = function() {
alert("Hello,JavaScript");
}