zoukankan      html  css  js  c++  java
  • html学习笔记一

    学习了一天,总结巩固下自己收获。

    html是超文本标记语言,而不是编程语言。

    1:html结构

        包含html标签,head标签,title标签,body标签。

    1 <html>
    2     <head>
    3         <title>This is my first page!</title>
    4     </head>
    5 <body>
    6        content.
    7 </body>
    8 </html>

    2:html语法

       第一点:标签是有左尖括号<和右尖括号>组成,<标签>

       第二点:开始标签<标签> 和 结束标签</标签>

       第三点:标签正确嵌套。

       第四点:标签元素和属性为了遵循w3c标准,用小写。

    3:标签

      1)head标签(包含title标签,style标签,script标签,link标签,meta标签,base标签)

       

          title标签:语义是文档标题

          意义:

         用于浏览器工具栏标题显示

         页面添加到收藏夹标题显示

         搜索引擎搜索页面标题显示

         

    1 <!doctype html>
    2 <html>
    3     <head>
    4            <title>标题标签</title>
    5     </head>
    6 <body>
    7     <h1>Hello world!</h1>
    8 </body>
    9 </html>

      style标签:语义内嵌样式表

     1 <!doctype html>
     2 <html>
     3     <head>
     4            <title>内嵌样式表</title>
     5            <style type="text/css">
     6                 h1{color:red;}             
     7            </style>    
     8     </head>
     9 <body>
    10     <h1>Hello world!</h1>
    11 </body>
    12 </html>
     

      script标签:语义是插入js代码

     1 <!doctype html>
     2 <html>
     3     <head>
     4            <title>内嵌样式表</title>
     5            <style type="text/css">
     6                 h1{color:red;}             
     7            </style>
     8            <script type="text/javascript">
     9                document.getElementById("hid").innerHTML="JAVASCRIPT";
    10            </script>    
    11     </head>
    12 <body>
    13     <h1 id=“hid”>Hello world!</h1>
    14 </body>
    15 </html>

      

         

         

          link标签:语义是插入外部样式表

     1 <!doctype html>
     2 <html>
     3     <head>
     4            <title>外部样式表</title>
     5            <link rel="stylesheet" href="style.css" type="text/css">    
     6     </head>
     7 <body>
     8     <h1>Hello world!</h1>
     9 </body>
    10 </html>

      

         

          meta标签:包含一些元信息,例如关键字,描述,作者,文档编码等

     1 <!doctype html>
     2 <html>
     3     <head>
     4            <title>meta</title>
     5            <meta name="keyword" content="html,css"/>
     6            <meta name="description" content="欢迎回到html基础"/> 
     7     </head>
     8 <body>
     9     <h1>Hello world!</h1>
    10 </body>
    11 </html>

      

          

         2)body标签(承载页面内容)

          div标签(语义用于分离独立的逻辑块)

     1 <!doctype html>
     2 <html>
     3     <head>
     4            <title>div</title>
     5     </head>
     6 <body>
     7     <div>top</div>
     8     <div>content</div>
     9     <div>footer</div>
    10 </body>
    11 </html>

      

         标题标签(h1~h6)

         h1字体最大,h6最小。语义是用于文本的标题。

     1 <!doctype html>
     2 <html>
     3     <head>
     4            <title>标题标签</title>
     5     </head>
     6 <body>
     7     <h1>h1</h1>
     8     <h2>h2</h2>
     9     <h3>h3</h3>
    10     <h4>h4</h4>
    11     <h5>h5</h5>
    12     <h6>h6</h6>
    13 </body>
    14 </html>

      

        

         段落标签(p)

        用于描述文档的段落,段落标签前后换行显示。

    1 <!doctype html>
    2 <html>
    3     <head>
    4            <title>段落标签</title>
    5     </head>
    6 <body>
    7     <p>我是段落</p>
    8 </body>
    9 </html>

      

        

        超链接标签(a):用于从一个页面向另一个页面跳转

    1 <!doctype html>
    2 <html>
    3     <head>
    4            <title>超链接标签</title>
    5     </head>
    6 <body>
    7     <a href="http://www.baidu.com" title="我是超链接">
    8 </body>
    9 </html>

      

       

        图像标签(img):用于图像的显示。

    1 <!doctype html>
    2 <html>
    3     <head>
    4            <title>img标签</title>
    5     </head>
    6 <body>
    7     <img src="logo.jpg" alt="my image"  title="my image"/>
    8 </body>
    9 </html>

      

    列表标签:有序列表(ol)和无序列表(ul)

     1 <html>
     2     <head>
     3         <title>列表</title>
     4     </head>
     5 <body>
     6        <ol>有序列表
     7            <li>html</li>
     8            <li>css</li>
     9            <li>js</li>
    10         </ol>
    11          <ul>无序列表
    12            <li>html</li>
    13            <li>css</li>
    14            <li>js</li>
    15         </ul>
    16 </body>
    17 </html>

    表格标签

     1 <!doctype html>
     2 <html>
     3     <head>
     4            <title>table标签</title>
     5     </head>
     6 <body>
     7      <table>
     8         <caption>表格标题</caption>
     9         <tbody>
    10               <tr><th>表格头</th></tr>
    11               <tr><td>单元格</td></tr>
    12         </tbody>
    13     </table>
    14 </body>
    15 </html>

    表单标签

     1  1 <!doctype html>
     2  2 <html>
     3  3     <head>
     4  4            <title>form标签</title>
     5  5     </head>
     6  6 <body>
     7  7      <form method="post" action="form.php">
     8                  账号<input type="text" name="name"/>
     9                  密码<input type="password" name="pass"/>
    10<input type="radio" name="sex" value="girl"/>
    11<input type="radio" name="sex" value="boy"/>
    12                  跑步<input type="checkbox" name="sport" value="running"/>
    13                  游戏<input type="checkbox" name="sport" value="swimming"/>
    14                   <input type="submit" name="btnSubmit" value="提交"/>   
    15          </form>
    16 14 </body>
    17 15 </html>

     总结:html基础是了解标签的正确使用,所编写的代码要符合语义化,w3c标准。

  • 相关阅读:
    vue 基础 模板
    常见的JS语言错误总汇
    面向对象两大编程思想
    15条你可能不知道的JS高效技巧
    django简介
    ping连通性
    IP地址解释
    web网页请求以及网络联网的一些过程
    HTTP和HTTPS协议
    TCP和UDP
  • 原文地址:https://www.cnblogs.com/kevoin/p/4864389.html
Copyright © 2011-2022 走看看