轻松理解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");
}