HTML教程详解

HTML学习笔记

目录

一、html简介

     1、html是什么?

     2、html能做什么(html的作用)?

     3、html书写规范   

二、html基本标签

　　　1、标签的语法
　　　2、标签的分类
　　　3、常用标签：

　1、文本标签：

       1、文本修饰
       2、段落

   2、图片标签

   3、链接标签

   4、列表标签

   5、表格标签

 

三、html表单标签（重点）

      1、form标签

      2、input标签

      3、select标签

      4、文本域标签

四、html框架标签及其他

       1、框架标签

       2、其他标签

       3、特殊字符

五、HTML5  Web存储

localStorage

sessionStorage

 

----------------------------------------------------------------------

一、html简介

  1、html是什么?

        html是用来描述网页的一种语言。

            (1) HTML 指的是超文本标记语言(Hyper Text Markup Language)。

            (2) HTML 不是一种编程语言，而是一种标记语言(markup language)，标记语言是一套标记标签(markup tag)(包括:HTML XML XHTML)。

            (3) HTML 使用标记标签来描述网页。

     超文本 标记 语言

     超文本：

                (1)  普通文本不能实现的，超文本可以实现，能实现普通文本不能实现的功能，表达能力优于普通文本如声音、图形等。

                (2)  包括超链接的文本。

       标记：

                就是标签，不同的标签能实现不同的功能。

       语言：

                人与计算机交互的工具。

-----------------------------------------------

 2、html能做什么(html的作用)?

        html通过标签的形式将信息展示给用户。

        HTML文档的后缀名? 答：.html/.htm  以上两种后缀名没有区别。

--------------------------------------------------------------------------------


3、html书写规范    

        (1) html基本结构

            <html>

                <head>

                    包括资讯信息：即整个页面的属性、指导浏览器解析的标签、引入外部文件的标签(CSS和js)。

                </head>

                <body>

                    我们需要展示的信息(正文)。

                </body>

            </html>


       (2) html标签是以尖括号包裹关键字成对出现的，有开始标签和结束标签(又叫围堵标签)，支持正确的嵌套。

       (3) 大部分标签有属性 格式：属性="属性值"（多个属性之间用空格隔开）

       (4) 空标签：功能比较单一 。例如：<br></br> = <br/>(又叫自闭合标签)

       (5) html不区分大小写，建议使用小写。

            注意：所有标记语言，标签中的英文单词没有以数字开头的。比如<1234>。

            注意：HTML中不支持：空格、回车、制表符，他们都会被解析成一个空白字符

            注意：空的html标签解释

                没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

                <br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

                在开始标签中添加斜杠，比如 <br/>，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

                即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

       

 

二、html基本标签

1、标签的语法

 可以在开始标签名后面添加属性，以此来设置文本样式，属性的语法       

 <标签名  属性名=”属性值”  属性名=”属性值” ……> 文本 </font>

2、标签的分类

  单标签：只有一个标签，一般把结尾的斜杠放到标签内的最后面；

  双标签：有开始，有结尾，属性设置在开始标签内；

 

3、常用标签

　　1、文本标签：

　　   1、文本修饰：
                font、b、s、i、sub、sup、strong、u、span

　　　2、段落

 

     h(1-6)：标题标签；

 

      p：段落；

 

      hr：分割线，属性：size（高度）、width（宽度）、color、align；

 

     center：内容居中

 

　　div: 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

               

 　  br:标签插入一个简单的换行符。

------------------------------------------------------------------------------------------

 

 

font:修饰文字内容,属性：face、size、color。标签规定文本的字体、字体尺寸、字体颜色。(H5不支持)；

 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p><font size="3" color="red">这是一些文本！</font></p>

<p><font size="2" color="blue">这是一些文本！</font></p>

<p><font face="verdana" color="green">这是一些文本！</font></p>

</body>
</html>



　　


 



b:字体加粗；　　




<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p>

</body>
</html>







　　



　s:删除线；




<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p><s>My car is blue.</s></p>
<p>My new car is silver.</p>

</body>
</html>







　　


 


                     i:斜体；




<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>He named his car <i>The lightning</i>, because it was very fast.</p>

</body>
</html>







　　


 


 sub:标签定义下标文本
　sup:标签定义上标文本




<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>这个文本包含 <sub>下标</sub>文本。</p>
<p>这个文本包含 <sup>上标</sup> 文本。</p>

</body>
</html>







　　


 


　　　　strong：定义重要的文本。（强调）




 


 


 




<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var>

</body>
</html>





 


　　


 


 　　　u:标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。


 


 


 


 




<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>This is a <u>parragraph</u>.</p>

</body>
</html>





　　


 


 　　　span:用于对文档中的行内元素进行组合。


 






<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

</body>
</html>







　　


 



------------------------------------------------------------------------------------
　　　　　　　　　　　　　　h1-h6:


<h1> - <h6> 标签被用来定义 HTML 标题。




<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。


 




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>







　　


 


p:标签定义段落。




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

</body>
</html>







　　


 


　　　　　　　　　　　　　　　　　　hr:


<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。




<hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。




 



　　　　




<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h1>HTML</h1>
<p>HTML 是用于描述 web 页面的一种语言。</p>

<hr>

<h1>CSS</h1>
<p>CSS 定义如何显示 HTML 元素。</p>

</body>
</html>





　　


 


　center:内容居中




 


 
div:


<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。




<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。




<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>这是一些文本。</p>

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

<p>这是一些文本。</p>

</body>
</html>





　　


 


　br:


 


<br> 标签插入一个简单的换行符。


 


<br> 标签是一个空标签，意味着它没有结束标签。


 






<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>
使用 br 元素<br>在文本中<br>换行。
</p>

</body>
</html>







　　


 


----------------------------------------------------------------------------
　2、图片标签
　　　　　　　　


                   img：图片，属性：


                  src(路径)、width、height、border(边框)、title(鼠标悬停提示)、alt(图片描述)；




 






<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">

</body>
</html>







　　


 



-----------------------------------------------------------------------


 　3、链接标签


                    a：超链接标签


               属性：href(网址)、target(打开方式)、title(鼠标悬停提示)、name(定位锚点)，功能：链接网络资源、本地定位；


 


 





       


 




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<a href="//www.runoob.com">访问菜鸟教程!</a>

</body>
</html>





　　


 


 ---------------------------------------------------------------------------


 


　　　　　4、列表标签


 


                        ul-li：无序列表，属性：type（符号的样式）；


 


                        ol-li：有序列表，属性：type、start、value；


 


                        dl-dt-dd：自定义列表；




 


 


 


---------------------------------------------------------------------------------------------------------------------------------------------


 


　　　5、表格标签


 


                  table：表格根标签，属性：border(边框)、width、height、align；


 


                   tr：一行；


 


                  td：一列，属性：rowspan(合并行)、colspan(合并列)；


 


                 th：标题；




 


 


 


----------------------------------------------------------------------------------------------------------------------------------------


三、html表单标签（重点）


                            1、form标签




form标签
        <form></form>
            属性：    
                name 表单名称
                action 提交的路径地址
                method 常用提交方式（get和post），默认是get提交
                
      get和post的区别（重点）：
         (1) get提交：将数据加在地址栏的后面，格式：




file:///D:/learn/Java/MyEclipse/Workspaces/MyEclipse%202017%20CI/day01_html/WebRoot/表单标签/form.html?username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj#
             即：?name=value&name=value...#







　　


 post提交：将数据封装在请求体中(http中会学)，格式： 




file:///D:/learn/Java/MyEclipse/Workspaces/MyEclipse%202017%20CI/day01_html/WebRoot/表单标签/form.html# 
即：# 







　　


(2) get提交相对不安全，post提交相对安全。 
(3) get提交有大小限制，根据浏览器不同而不同，post提交不限制大小。  
示例： <form>
         <table> 
            <!--form里面嵌套table-->
         </table> 
      </form>

--------------------------------------------------------------------


                            2、input标签


 


            <input type=" "/>
                type 根据type的值不同实现各种不同功能的表单项
                text 普通的文本输入框
                    name="username" 
                    value="张三"    <!--张三是文本输入框的默认值-->
                password 密码输入框；特点是显示的是掩码
                    name="password" 
                    value="123456" <!--123456是密码输入框的默认值-->
                
                radio 单选按钮
                    name 如果想让一组单选按钮互斥，就用指定相同的name属性值，再加value属性值（提交的时候用）
                    checked 默认被选中                
                checkbox 复选框（多选）
                    name 组的概念，就用指定相同的name属性值，再加value属性值（提交的时候用）
                    checked 默认被选中
                    
                file 上传文件的控件
                button 普通按钮，没有任何内置的功能
                    value="注册"    <!--注册是普通按钮上的默认值(名字)-->
                submit 内置功能，点击会按照action地址提交
                reset 重置，点击会清空之前填写的内容，恢复默认值
                
                image 图片按钮，功能类似与submit
                    src 加载图片
                    alt 图片的提示文字
                    
                hidden 隐藏表单和内容，作用是在提交数据的时候，服务器需要这个数据，但是用户看不到（开发中常用）
                    <input type="hidden" name="hide" value="xxxx"/>
                    <p hidden="hidden">这是一段隐藏的段落。</p>        <!--这句话用户看不到-->
                    <p>这是一段可见的段落。</p>
            
            注意：开发中name属性必须要写。











 


 




<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
用户名: <input type="text" name="usrname"><br>
<input type="submit" value="提交">
</form>

</body>
</html>





　


 


　 


      


 


---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


                            3、select标签


 


            <select></select> 用于下拉菜单
            属性：
                name 表单项的名称（提交的时候用）
            <option></option> 可选项（下拉菜单之间的级联）
                属性：
                    value 表单项的值
                    selected 默认被选中
            示例：
                <select name="city">
                    <option value="bj">北京</option>
                    <option value="sh" selected="selected">上海</option>
                    <option value="gz">广州</option>
                    <option value="sz">深圳</option>
                </select>
                <select>
                    <option>海淀</option>
                    <option>朝阳</option>
                    <option>昌平</option>
                </select>


 




<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>





　　


 


--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


                            4、文本域标签


 


            <textarea></textarea>
            属性：
                rows 行数
                cols 列数
            注意：
                默认的文本值在标签体当中。
            示例：
                <textarea name="textarea" rows="20" cols="50">这是文本区域</textarea>





<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>





　　


 


 


5、刷新/跳转


 








<meta http-equiv="refresh"content="5;url=http://www.baidu.com" />




























 


6、滚动


 








<marquee behavior=SLIDE  >


This is a slide effect


</marquee>




























 


7、自动跳转


<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />


8、头标签


      title：标题；


      meta：配置信息，属性：name；


      link：引入外部文件；


在title里添加图标：








<link rel="icon" type="image/x-icon" href="img/logo.ico" />




























      script：JavaScript脚本程序；


      style：css代码；


      base：对超链接的全局设置；


 


 


 


------------------------------------------------------------------------------------------------------------------------------------------------------


 


四、html框架标签及其他




                            1、框架标签




            <frameset></frameset>
            属性：
                rows 按行划分
                cols 按列划分
                    划分格式： rows="120,*"
        <frame/>
            属性：    
                name 名称，方便target根据name值进行定位
                src 加载的页面地址



                                                        iframe：内联框架








<iframe src=" " width="100%" height="50px" frameborder="0">


</iframe>








                                                        frameset-frame：使用该框架结构时，要删除body标签；








<frameset rows="100,*">


        <frame name="top" src="index.html" />


        <frameset cols="50,*">


           <frame name="left" src="lianjie.html" />


           <frame name="right" src="gsjj.html" />


        </frameset>


     </frameset>









        注意：
            <frameset></frameset>与<body></body>会打架，二者不能共存。
----------------------------------------------------------------------------


                            2、其他标签


 


        <meta/>
            <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
            <meta http-equiv="description" content="this is my page"/>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <link/>
            <link rel="stylesheet" type="text/css" href="./styles.css"/>
                href 引入css文件的地址
        <script></script>
            <script type="text/javascript" src=""></script>
                src 引入js的文件地址


 




pre：原文输出；


code：在页面中添加代码；


video：添加视频；


embed：添加音频；


----------------------------------------------------------------------------------------------------------------


                            3、特殊字符


 


        &nbsp;      一个英文空格
          &gt;        大于号
          &lt;        小于号
        &copy;      版权符号（圈C）
         &reg;       注册符号（圈R）




 ------------------------------------------------------------------------------------------------------------------------------------------------


 


五、HTML5  Web存储


HTML5 Web 存储




HTML5 web 存储,一个比cookie更好的本地存储方式。




什么是 HTML5 Web 存储?


使用HTML5可以在本地存储用户的浏览数据。


早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.


数据以 键/值 对存在, web网页的数据只允许该网页访问使用。


 


localStorage 和 sessionStorage 


客户端存储数据的两个对象为：


    

  • localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
    • 

  • sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
    • 



在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:




if(typeof(Storage)!=="undefined") 
{
   // 是的! 支持 localStorage sessionStorage 对象! 
   // 一些代码.....
 } else 
{
 // 抱歉! 不支持 web 存储。
 }





　　


localStorage 对象


localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。




<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
  localStorage.sitename="菜鸟教程";
  document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
}
else
{
  document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
</script>

</body>
</html>





　　


 


 


实例解析：


    

  • 使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。
    • 

  • 检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。
    • 



以上实例也可以这么写：






// 存储 localStorage.sitename = "菜鸟教程"; // 查找 document.getElementById("result").innerHTML = localStorage.sitename;






移除 localStorage 中的 "sitename" :






localStorage.removeItem("sitename");






不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：


    

  • 保存数据：localStorage.setItem(key,value);
    • 

  • 读取数据：localStorage.getItem(key);
    • 

  • 删除单个数据：localStorage.removeItem(key);
    • 

  • 删除所有数据：localStorage.clear();
    • 

  • 得到某个索引的key：localStorage.key(index);
    • 



提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。


下面的实例展示了用户点击按钮的次数。


代码中的字符串值转换为数字类型:




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>     
<script>
function clickCounter()
{
    if(typeof(Storage)!=="undefined")
    {
        if (localStorage.clickcount)
        {
            localStorage.clickcount=Number(localStorage.clickcount)+1;
        }
        else
        {
            localStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
    }
    else
    {
        document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>





　　


 


sessionStorage 对象


sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。


如何创建并访问一个 sessionStorage：




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
function clickCounter()
{
    if(typeof(Storage)!=="undefined")
    {
        if (sessionStorage.clickcount)
        {
            sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
        }
        else
        {
            sessionStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
    }
    else
    {
        document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 web 存储";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>
</body>
</html>





　　


 


本人原创，转载请说明出处https://www.cnblogs.com/zyx110/


如若对你有用，记得推荐，如若有误，欢迎改正!







            

            
posted @ 
2019-05-10 12:27 
泰斗贤若如 
阅读(994) 
评论(0) 
编辑 
收藏 
举报