• 11_html

    知识点1【HTML概述】

    知识点2【文字标签】

    知识点3【标题】

    知识点4【超链接】

     知识点5【table表格标签】（重要）

     知识点6【form表单】（重要）

    知识点7【JavaScript的概述】让网页动起来

    1、什么是 Javascript?

    2、网页使用js脚本的三种方式

    知识点8【js的函数】

    知识点9【JS的对象】

    1、浏览器对象（window对象）

    2、文本对象（Document对象）（重要）

    知识点1【HTML概述】

    HTML是超文本标记语言(Hyper Text Markup Language)

    HTML由各种各样的标签(tag)组成，如

    HTML标签

    （1）由尖括号包围的关键词比如

    （2）通常是成对（开始标签，结束标签）出现的比如,例外：

    （3）注释标签：、注释

    2、HTML元素

    （1）开始标签(start tag)到结束标签(end tag)的所有代码

    3、HTML属性

    （1）在HTML元素的开始标签中规定

    （2）以名称/值对的形式出现:

    1. 例子(01_first_html.html)：
    3. <html>
    4.     <head>
    5.         <title>01_first_htmltitle>
    6.     head>
    7.     <body>
    8.         <label>hello, HTML!!!label>
    9.         <br>
    10.         <img src="./image/01_first_html.png">
    11.     <body>
    12. html>

    1、元信息标记

    提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词

    2、标签位于文档的头部，不包含任何内容。

    3、签的属性定义了与文档相关联的名称/值对。

    4、在 HTML 中，标签没有结束标签。

    5、标签永远位于 head 元素内部。

    6、元数据总是以名称/值的形式被成对传递的

     案例1：

    1. 例子（02_meta.html）：
    2. <html>
    3.     <head>
    4.         <title>02_meta</title>
    5.         <meta charset="UTF-8"/>
    6.         <meta http-equiv="refresh" content="5;url=http://www.baidu.com/">
    7.         <meta name="keywords" content="jump">
    8.     </head>
    9.     <body>
    10.     5秒后我们将去一个神奇的地方！(这个网页的关键字是：jump)
    11.     </body>
    12. </html>

    知识点2【文字标签】

     案例：

    1. <html>
    2. 	<head>
    3. 		<title>03_char</title>
    4. 		<meta charset="UTF-8">
    5. 	</head>
    6. 	<body>
    7. 		b:<b>这些文字是粗体的</b>
    8. 		<br>
    9. 		<br>
    10. 		i:<i>这些文字是斜体的</i>
    11. 		<br>
    12. 		<br>
    13. 		u:<u>这些文字带有下划线</u>
    14. 		<br>
    15. 		<br>
    16. 		em:<em>用于强调的文本，一般显示为斜体字</em>
    17. 		<br>
    18. 		<br>
    19. 		strong:<strong>用于特别强调的文本，显示为粗体字</strong>
    20. 		<br>
    21. 		<br>
    22. 		code:<code>用来指出这是一组代码:int main(void)</code>
    23. 		<br>
    24. 		<br>
    25. 		small:<small>规定文本以小号字显示</small>
    26. 		<br>
    27. 		<br>
    28. 		big:<big>规定文本以大号字显示</big>
    29. 		<br>
    30. 		<br>
    31. 		sup:12<sup>2</sup>=144
    32. 		<br>
    33. 		<br>
    34. 		sub:硫酸亚铁的分子式是Fe<sub>2</sub>SO<sub>4</sub>
    35. 		<br>
    36. 		<br>
    37. 	</body>
    38. </html>

    运行结果：

    知识点3【标题】

    —

    一级标题 -->6级标题

    以及标题字体最大

    1. <html>
    2. 	<head>
    3. 		<title>04_head_style</title>
    4. 	</head>
    5. 	<body style="background-color:#90EE90">
    6. 		<br>
    7. 		<h1 style="color:red" >一级标题</h1>
    8. 		<h2 style="color:orange">二级标题</h2>
    9. 		<h3 style="color:yellow">三级标题</h3>
    10. 		<h4 style="color:green">四级标题</h4>
    11. 		<h5 style="color:black">五级标题</h5>
    12. 		<h6 style="color:blue">六级标题</h6>
    13. 		<p style="background-color: white; font-family: arial; color: #ff00ff; font-size:50px; text-align: center">普通段落</p>
    14. 		<br>
    15. 	</body>
    16. </html>

    运行结果：

    知识点4【超链接】

    超链接

    （1）页面内的超链接电子邮件超链接

    注：subject ---主题

    （2）页面内的超链接

    回到顶部：

    回到某一位置：

    <>

    （3）页面外的超链接

    外网：

    内网：

    （4）图片超链接

    1. <html>
    2. 	<head>
    3. 		<title>05_a_href</title>
    4. 		<meta charset="UTF-8">
    5. 	</head>
    6. 	<body>
    7. 		<br>
    8. 		<a href="mailto:kitty_zjy@126.com?subject=Hi">email to others</a>
    9. 		<br>
    10. 		<br>
    11. 		<a href="#mike">去中间看看</a>
    12. 		<br>
    13. 		<br>
    14. 		<a href="http://www.1000phone.com">千锋，用良心做教育</a>
    15. 		<br>
    16. 		<br>
    17. 		<a href="a.html" target="_blank">打开本地一个新的网页</a>
    18. 		<br>
    19. 		<br>
    20. 		<a href="a.html"><img src="image/a.jpg"></a>
    21. 		<br>
    22. 		<br>
    23. 		<p>some information</p>
    24. 		<p>some information</p>
    25. 		<p>some information</p>
    26. 		<p>some information</p>
    27. 		<p>some information</p>
    28. 		<p>some information</p>
    29. 		<p>some information</p>
    30. 		<p>some information</p>
    31. 		<p>some information</p>
    32. 		<p>some information</p>
    33. 		<p>some information</p>
    34. 		<p>some information</p>
    35. 		<p>some information</p>
    36. 		<p>some information</p>
    37. 		<p>some information</p>
    38. 		<p>some information</p>
    39. 		<p>some information</p>
    40. 		<p>some information</p>
    41. 		<p>some information</p>
    42. 		<p>some information</p>
    43. 		<p><a name="mike">中间</a></p>
    44. 		<p>some information</p>
    45. 		<p>some information</p>
    46. 		<p>some information</p>
    47. 		<p>some information</p>
    48. 		<p>some information</p>
    49. 		<p>some information</p>
    50. 		<p>some information</p>
    51. 		<p>some information</p>
    52. 		<p>some information</p>
    53. 		<p>some information</p>
    54. 		<p>some information</p>
    55. 		<p>some information</p>
    56. 		<p>some information</p>
    57. 		<p>some information</p>
    58. 		<p>some information</p>
    59. 		<p>some information</p>
    60. 		<p>some information</p>
    61. 		<p>some information</p>
    62. 		<p>some information</p>
    63. 		<p>some information</p>
    64. 		<p>some information</p>
    65. 		<p>some information</p>
    66. 		<p>some information</p>
    67. 		<p>some information</p>
    68. 		<p>some information</p>
    69. 		<p>some information</p>
    70. 		<p>some information</p>
    71. 		<p>some information</p>
    72. 		<a href="#top">回到顶部</a>
    73. 		<br>
    74. 	</body>
    75. </html>

     运行结果：

     知识点5【table表格标签】（重要）

    案例：（晚上敲） 

    1. <html>
    2.     <head>
    3.         <title>tabletitle>
    4.         <meta charset="UTF-8">
    5.     head>
    6.     <body>
    7.         <table border="1" align="center">
    8.             <caption>统计学生信息caption>
    9.             <tr align="center"> 
    10.                 <td colspan="3"><b>学生信息b>td>
    11.                 <td colspan="2"><b>成绩信息b>td>
    12.                 <td rowspan="2">照片td>
    13.             tr>
    14.  
    15.             <tr align="center"> 
    16.                 <td>姓名td>
    17.                 <td>性别td>
    18.                 <td>专业td>
    19.                 <td>课程td>
    20.                 <td>分数td>
    21.             tr>
    22.  
    23.             <tr align="center"> 
    24.                 <td>郑涵td>
    25.                 <td>男td>
    26.                 <td>电子信息td>
    27.                 <td>web开发td>
    28.                 <td>99td>
    29.                 <td>调皮td>
    30.             tr>
    31.             
    32.         table>
    33.     body>
    34. html>

    运行结果：

     知识点6【form表单】（重要）

    HTML页面与服务器交互的手段

    (1)属性

    name：表单的名称

    method：表单数据从浏览器传输到服务器的方法

    get：将表单数据附加在URL地址后面，长度不超过8192个字符,不具有保密性，默认为get

    post：将表单数据包含在表单的主体中，一起传输到服务器上。没有长度限制,密文传输

    action：用来定义表单处理程序

    （2）

    内的标签

    a、 表单输入标签

    常用的文本域、按钮都是使用这个标签

    属性：

    name 域名称

    type 域类型

    value 元素值

    type属性值:

    text 文字域 password 密码域

    file 文件域 checkbox 复选框

    radio 单选框 button 普通按钮

    submit 提交按钮 reset 重置按钮

    hidden 隐藏域 image 图像域

    b、选择列表

    菜单和列表是为了节省网页的空间而产生的

    属性

    name 菜单和列表的名称

    size 显示的选项数目

    multiple 列表中的选项为多项

    selected 默认被选中的选项(option中的属性)

    c、文本域

    用来制作多行文本输入域

    属性

    name 文字域的名称

    rows 文字域的行数

    cols 文字域的列数

    案例1：input输入框

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.     </head>
    6.     <body>
    7.        <h3>这是一个表单的案例</h3>
    8.        <form method="GET" action="deal.cgi">
    9.             用户名:<input type="text" name="usr">
    10.             <br>
    11.             密 &nbsp &nbsp 码:<input type="password" name="pwd">
    12.             <br>
    13.             请选择你要上传的文件:<input type="file" name="file">
    14.             <br>
    15.             请选择你的爱好:<input type="checkbox" name="hobby" value="LoL">LOL
    16.             <input type="checkbox" name="hobby" value="王者">王者
    17.             <input type="checkbox" name="hobby" value="吃鸡">吃鸡
    18.             <br>
    19.             你的性别：<input type="radio" name="sex" value="男">男
    20.             <input type="radio" name="sex" value="女">女
    21.             <br>
    22.             <input type="button" value="错我呀">
    23.             <br>
    24.             你猜猜这是谁:<input type="image" src="./image/zkd.jpg">
    25.             <br>
    26.             <input type="submit" value="提交"> &nbsp &nbsp &nbsp &nbsp <input type="reset" value="复位">
    27.        </form>
    28.     </body>
    29. </html>

    运行结果：

     a、选择列表

    菜单和列表是为了节省网页的空间而产生的

    属性

    name     菜单和列表的名称

    size    显示的选项数目

    multiple 列表中的选项为多项

    selected 默认被选中的选项(option中的属性)

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.     </head>
    6.     <body>
    7.         选择你的车型：
    8.        <select>
    9.         <option>BMW</option>
    10.         <option>玛莎拉蒂</option>
    11.         <option>火车</option>
    12.         <option selected>宝骏</option>
    13.         <option>自行车</option>
    14.        </select>
    15.     </body>
    16. </html>

    运行结果：

    案例3：文本域

    a、文本域

    用来制作多行文本输入域

    属性

    name     文字域的名称

    rows     文字域的行数

    cols     文字域的列数

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.     </head>
    6.     <body>
    7.        请输入你的留言：
    8.        <br>
    9.        <textarea>
    10.            今天心情挺好！！！！！！！！啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
    11.        </textarea>
    12.     </body>
    13. </html>

    运行结果：

    知识点7【JavaScript的概述】让网页动起来

    1、什么是 Javascript?

    Javascript是一种基于对象并具有安全性能的脚本语言，是由浏览器内解释器翻译成可执行格式后执行，在概念和设计方面，Java和Jvascript是两种完全不同的语言。

    Javascript的四个特点：基于对象的语言、简单性、动态性、跨平台性

    break

    case

    catch

    continue

    debugger

    default

    delete

    do

    else

    false

    finally

    for

    function

    if

    in

    Instanceof

    new

    null

    return

    switch

    this

    throw

    true

    try

    typeof

    var

    void

    while

    with

    2、网页使用js脚本的三种方式

    直接添加脚本 使用script标记插入脚本 链接脚本文件（推荐）

    1、直接添加脚本

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.     </head>
    6.     <body>
    7.         <!--alert会弹出一个对话框-->
    8.         <input type="button" value="错误呀给你惊喜" onclick='alert("我就是你的惊喜，呵呵！！")' >
    9.     </body>
    10. </html>

    运行结果：

    2、使用script标记插入脚本

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.         <script type="text/javascript">
    6.             function my_button()
    7.             {
    8.                 alert("我就是你的惊吓，哈哈！！！");                
    9.             }
    10.         </script>
    11.     </head>
    12.     <body>
    13.         <!--alert会弹出一个对话框-->
    14.         <input type="button" value="错误呀给你惊喜" onclick="my_button();" >
    15.     </body>
    16. </html>

     运行结果：

    3、链接脚本文件（推荐）

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.         <!--这是描述 js中的函数来之哪个js文件-->
    6.         <script type="text/javascript" src="01_js.js"></script>
    7.     </head>
    8.     <body>
    9.         <!--alert会弹出一个对话框-->
    10.         <input type="button" value="错误呀给你惊喜" onclick="my_button();" >
    11.     </body>
    12. </html>

    运行结果：

    4、运算符

    （1）算数运算符

    +、－、*、/、%、++、－－

    （2）逻辑运算符

    &&、||、!

    （3）比较运算符

    ==、>、＝、

    （4）位运算符

    ~、&、|、^、>、>>>(无符号右移)

    （5）字符串运算符

    +(合并运算符)

    （6）赋值运算符

    =、+=、-=、 *=、/=、%=

    （7）条件运算符

    ? :（条件 ？结果1 ：结果2）

    知识点8【js的函数】

    1. 函数的语法结构:
    2.    function 函数名(参数1,参数2,…){
    3.    函数体
    4. }

    案例：

    index.html

     <input type="button" value="错误呀给你惊喜" onclick='my_button(10,"hehe",20);' >

    deal.js

    1. //arg1, arg2, arg3 不用写类型
    2. function my_button(arg1, arg2, arg3)
    3. {
    4.     var data="";
    5.     data += arg1;
    6.     data +=":"
    7.     data +=arg2;
    8.     data +=":"
    9.     data += arg3;
    10.     //10:hehe:20
    11.     alert(data);
    12. }

    运行结果：

    知识点9【JS的对象】

    1、浏览器对象（window对象）

    Window 对象表示浏览器中打开的窗口，打开一个HTML网页会创建一个window对象

    Window 对象是全局对象

    window.open()打开一个新的窗口

    window.close()关闭当前窗口

    window.location.href：返回完整的URL;对其进行赋值，则能够跳转到相应的网页

    1. function my_button()
    2. {
    3.     //open在新的窗口中打开网页
    4.     //window.open("http://www.baidu.com");
    5.  
    6.     //在当前窗口中打开网页
    7.     //window.location.href="http://www.baidu.com";
    8.  
    9.     //获取当前网页的url
    10.     //alert(window.location.href);
    11.  
    12.     //关闭close关闭窗口
    13.     window.close();
    14. }

    2、文本对象（Document对象）（重要）

    每个载入浏览器的 HTML 文档都会成为 Document 对象。

    Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

    1、提供了从JS脚本中对 HTML 页面中的所有元素进行访问

    2、可以通过getElementById()方法,来根据对应的ID号去访问、控制HTML页面中的标签元素

    3、可以通过title，URL属性获取当前文档的标题，URL信息等

    4、可以通过write方法在HTML页面中写入HTML表达式

    案例1：登录界面 value

    index.html

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.         <!--这是描述 js中的函数来之哪个js文件-->
    6.         <script type="text/javascript" src="14_js.js"></script>
    7.     </head>
    8.     <body>
    9.         <!--id是唯一 标记一个个标签-->
    10.         用户名:<input type="text" id="usr">
    11.         <br>
    12.         密码:<input type="password" id="pwd">
    13.         <br>
    14.         <input type="button" value="登录" onclick="my_button(1);">
    15.         &nbsp;&nbsp;&nbsp;&nbsp;
    16.         <input type="button" value="取消" onclick="my_button(0);">
    17.     </body>
    18. </html>

     14_js.js

    1. function my_button(arg)
    2. {
    3.     if(arg == 1)//登录 admin 123456
    4.     {
    5.         //获取网页上输入框的用户名密码
    6.         var usr = document.getElementById("usr").value;//重点
    7.         var pwd = document.getElementById("pwd").value;
    8.         if(usr=="admin" && pwd=="123456")
    9.         {
    10.             window.location.href="http://www.baidu.com";
    11.         }
    12.         else
    13.         {
    14.             alert("用户名或密码错误请重新输入");
    15.             //清空用户名密码的输入框
    16.             document.getElementById("usr").value="";
    17.             document.getElementById("pwd").value="";
    18.         }
    19.     }
    20.     else if(arg == 0)//取消
    21.     {
    22.         //清空用户名密码的输入框
    23.         document.getElementById("usr").value="";
    24.         document.getElementById("pwd").value="";
    25.     }
    26. }

    运行结果：

     总结： document.getElementById("usr").value value一般用于输入框

    2、案例 document获得label的内容 innerHTML

    var text = document.getElementById("addr").innerHTML;

    index.html

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.         <!--这是描述 js中的函数来之哪个js文件-->
    6.         <script type="text/javascript" src="15_js.js"></script>
    7.     </head>
    8.     <body>
    9.         地址:<label id="addr">BJ</label>
    10.         <br>
    11.         <input type="button" value="单击改变地址" onclick="change_fun();">
    12.     </body>
    13. </html>

    15_js.js

    1. function change_fun()
    2. {
    3.     //获取label的内容 对于label 而是innerHTML
    4.     var text = document.getElementById("addr").innerHTML;
    5.     alert("获得的内容为:"+text);
    6.  
    7.     //更改label的内容
    8.     document.getElementById("addr").innerHTML="SZ";
    9.  
    10. }

    3、案例 document获得img的内容 src

    index.html

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.         <!--这是描述 js中的函数来之哪个js文件-->
    6.         <script type="text/javascript" src="16_js.js"></script>
    7.     </head>
    8.     <body>
    9.         此处有帅哥:
    10.         <br>
    11.         <img src="./image/zkd.jpg" id="img">
    12.         <br>
    13.         <input type="button" value="单击改变图片" onclick="change_fun();">
    14.     </body>
    15. </html>

    16_js.js

    1. function change_fun()
    2. {
    3.     //更改img的内容 src
    4.     document.getElementById("img").src="./image/0001.png";
    5. }

    4、案例 document获得单选框的内容

    index.html

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.         <!--这是描述 js中的函数来之哪个js文件-->
    6.         <script type="text/javascript" src="17_js.js"></script>
    7.     </head>
    8.     <body>
    9.         请选择你的性别:
    10.         男:<input type="radio" name="sex" id="nan">
    11.         女:<input type="radio" name="sex" id="nv">
    12.         <br>
    13.         <input type="button" value="单击获取性别" onclick="sex_fun();">
    14.     </body>
    15. </html>

    17_js.js

    1. function sex_fun()
    2. {
    3.     alert("男:"+document.getElementById("nan").checked);//选中true 否则false
    4.     alert("女:"+document.getElementById("nv").checked);//选中true 否则false
    5. }

    运行结果：

     5、案例 document获得复选框的内容

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.         <!--这是描述 js中的函数来之哪个js文件-->
    6.         <script type="text/javascript" src="18_js.js"></script>
    7.     </head>
    8.     <body>
    9.         请选择你的英雄:
    10.         <!--onchange 下拉列表框被选择的时候自动调用hero_fun函数-->
    11.         <select onchange="hero_fun();" id="hero">
    12.             <option>德玛西亚</option>
    13.             <option>烬</option>
    14.             <option>小法</option>
    15.             <option>盲僧</option>
    16.             <option>小炮</option>
    17.         </select>
    18.         
    19.     </body>
    20. </html>

    18_js.js

    1. function hero_fun()
    2. {
    3.     //获取下拉列表框被选中的索引号
    4.     var index = document.getElementById("hero").selectedIndex;
    5.  
    6.     //根据索引号 从选项数据中options[]中得到选中的内容
    7.     var hero_name = document.getElementById("hero").options[index].value;
    8.     alert("你选择的英雄为:"+hero_name);
    9. }

    运行结果：

      

  • 相关阅读:
    ssm整合
    Python013--爬虫01（工具准备）
    如何做gif动图？手把手教你在线制作动图
    Git 常用命令
    问题解析：Python中的变量复制备份，为什么没有达到效果？
    【MindSpore易点通】混合精度训练使用总结
    12月2日：thinkphp中的链式操作
    Using Multiple RDF Knowledge Graphs for Enriching ChatGPT Responses
    devops底层是怎么实现的
    自定义MVC
  • 原文地址：https://blog.csdn.net/buhuidage/article/details/128069656