html学习 菜鸟 

1HTML 不是一种编程语言，而是一种标记语言 
2只有 <body>区域才会在浏览器中显示。
3<!DOCTYPE>声明有助于浏览器中正确显示网页。doctype 声明是不区分大小写的
4属性总是以名称/值对的形式出现，比如：name="value"。
属性值应该始终被包括在引号内。
5<!-- 这是一个注释 -->
6HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
7使用 target 属性，你可以定义被链接的文档在何处显示。如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。
例如：<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
8 <link> 标签定义了文档与外部资源之间的关系。<link> 标签通常用于链接到样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

9 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档，搞不清link和style的区别
10 <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

每30秒钟刷新当前页面:<meta http-equiv="refresh" content="30">

11 <script>标签用于加载脚本文件，如： JavaScript。

12 HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。显示时，要将<link>标签放入<head>里。

<head>
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
</head>

 13

  • CSS 可以通过以下方式添加到HTML中:

    • 内联样式- 在HTML元素中使用"style" 属性
    • 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
    • 外部引用 - 使用外部 CSS 文件

14 当特殊的样式需要应用到个别元素时，就可以使用内联样式

15 style和link的区别：

 

标签 描述 例子
<style> 定义文本样式 <h1 style="text-align:center;">居中对齐的标题</h1>
<link> 定义资源引用地址 
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

 

16  对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可

17 <img src="boat.gif" alt="Big Boat"> 若图片显示不出来，则显示alt的值

18

1 <map name="planetmap">
2   <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
3   <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
4   <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
5 </map>

19 

<table border="1">
    <tr>   行
        <th>Header 1</th>    表头
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>   单元格
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

20

 

21

 <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<span> 元素是内联元素，可用作文本的容器

22 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）

23 HTML 表单用于收集不同类型的用户输入。

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。

 <input type="text">   <input type="password">  <input type="radio"> <input type="checkbox"> 

<input type="submit"> :当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面

24 同一组的单选按钮，name 取值一定要一致

<form>
<p>你生活在哪个国家？</p>
<input type="radio" name="country" value="China" checked="checked">中国<br />
<input type="radio" name="country" value="the USA">美国
</form>

25 点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值

26 

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

27 只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容

<body>
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
<p>不支持 JavaScript 的浏览器会使用 &lt;noscript&gt; 元素中定义的内容（文本）来替代。</p>
</body>

28 

<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">点我</button>

29 

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体 

如需显示小于号，我们必须这样写：&lt; 或 &#60; 或 &#060;

30 辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。辅助程序是使用 <object> 标签来加载的。

<body>
<object width="400" height="50" data="bookmark.swf"></object>
</body>
<body>
<object height="50" width="100" data="horse.mp3"></object>
<p>如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。</p>
<p>或者你没有打开扬声器。</p>
</body>

31 

寻找元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
改变元素：
document.getElementById(id).innerHTML=新的 HTML
document.getElementById(id).attribute=新属性值
改变元素样式：
document.getElementById(id).style.property=新样式
HTML 事件属性
document.getElementById("myBtn").onclick=function(){displayDate()};
<body onload="checkCookies()"> # onload 和 onunload 事件会在用户进入或离开页面时被触发。
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

addEventListener() 方法用于向指定元素添加事件句柄。
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
给元素添加事件：
document.getElementById("myDiv").addEventListener("click", myFunction, true);
给 Window 对象添加事件：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});

 

posted on 2019-08-17 19:48  我和你并没有不同  阅读(308)  评论(0)  编辑  收藏  举报