当前位置:Gxlcms > html代码 > Html一天入门

Html一天入门

时间:2021-07-01 10:21:17 帮助过:41人阅读

一、什么是HTML

1.html:

HyperText Markup Language 超文本标记语言,是最基础的网页语言,而且都是由标签组成。

2.基本格式:


  
    放置一些属性信息,辅助信息。
    引入一些外部的文件。(css,javascript)
    它里面的内容会先加载。
  
  
    存放真正的数据。
  

3.注意事项
1)多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。
2)想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
3)属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或公司规定书写规范。

二、常见标签

1.排版标签

1)换行

2)

段落标签 在开始和结束的位置上会留一个空行。

  属性:align= 对齐方式
3)


一条水平线
  属性:
    1)宽度:width 值像素 100px 可以写百分比 30%
    2)align= 对齐方式
    3)size 粗细
    4)color 值 red green blue RGB 三原色 (red green blue #aa55ff)

4)div 声明一块区域
数据
css+div
5)span 声明一块区域

代码:

 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 2 <html>
 3   <head>
 4     <title>排版标签title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6 
 7   head>
 8   
 9   <body>
10       这是一首古诗。
11       <hr width="300px" size="20px;" color="red"/>
12       <p align="center">
13         静夜思<br/>
14        床前明月光,<br/>
15        疑是地上霜。<br/>
16        举头望明月,<br/>
17        低头思故乡。<br/>
18        p>
19        一首非常出名的古诗。
20        
21        <hr/>
22        <div>这是div区域1div>
23        <div>这是div区域1div>
24        <span>这是span的区域1span>
25        <span>这是span的区域2span>
26   body>
27 html>

显示:

2.字体标签

1)文本内容
  属性:
    1)size 字号的大小 最大值是7 最小值是1
    2)color 颜色
    3)face 字体

2)标题标签
  


  ...
  

    从大到小字体缩小。

3)粗体
4)斜体
    标签支持嵌套

代码:

 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 2 <html>
 3   <head>
 4     <title>字体标签title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6 
 7   head>
 8   
 9   <body>
10       <h2>排版标签h2>
11       <font size="7">文本内容font><br/>
12       <font size="10">文本内容font><br/>
13       
14       <hr/>
15       
16       <h1>这是一级标题h1>
17       <h2>这是二级标题h2>
18       <h3>这是三级标题h3>
19       <h4>这是四级标题h4>
20       <h5>这是五级标题h5>
21       <h6>这是六级标题h6>
22       
23       <hr/>
24       
25       <b><i>这是粗体又是斜体i>b>
26       <I>这是斜体I>
27       
28       
29   body>
30 html>

显示:

3.列表标签

1)dl 列表标签
  


    
上层项目

    
下层项目
特点:自动对齐,自动缩进。
  


2)有序列表和无序列表
  有序:

        type:列表前序标号
        start:从第几个开始。
      无序:

          数据条目:
    • 数据内容

    •     
    • 用户管理
    • 代码:

       1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
       2 <html>
       3   <head>
       4     <title>列表标签title>
       5     
       6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
       7     <meta http-equiv="description" content="this is my page">
       8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       9     
      10 
      11   head>
      12   
      13   <body>
      14       <h3>列表标签h3>
      15       <dl>
      16           <dt>上层项目dt>
      17           <dd>下层项目dd>
      18           <dd>下层项目dd>
      19           <dd>下层项目dd>
      20       dl>
      21       
      22       <hr/>
      23       
      24       <h3>有序列表h3>
      25       <ol type="a" start="4">
      26           <li>有序列表li>
      27           <li>有序列表li>
      28           <li>有序列表li>
      29       ol>
      30   
      31       <h3>无序列表h3>
      32       <ul type="square">
      33           <li>无序列表li>
      34           <li>无序列表li>
      35           <li>无序列表li>
      36       ul>
      37       
      38   body>
      39 html>

      显示:

      4.图片标签


        属性:src="https://img.gxlcms.com/图片的路径"
             width 显示图片的宽度
              height 显示图片的高度
              alt 图片的说明文字/Users/apple/Library/Containers/com.tencent.qq/Data/Library/Application Support/QQ/Users/.png

      代码:

       1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
       2 <html>
       3   <head>
       4     <title>图片标签title>
       5     
       6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
       7     <meta http-equiv="description" content="this is my page">
       8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       9     
      10 
      11   head>
      12   
      13   <body>
      14       <h3>图片标签h3>
      15       <img src="girl4.jpg" width="800px" height="600px" alt="啊,美女!">
      16       
      17   body>
      18 html>

      显示:一个美女

      5.超链接链接

        
        作用:1)链接资源
              href="" 必须指定 如果href的值不指定,默认是file文件的协议。只有自己指定协议,链接资源。如果href中指定的协议,浏览器不能解析,就会调用应用程序,可以解析的程序就可以打开。
           2)定位资源
              name 名称 专业术语 锚

      代码:

       1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
       2 <html>
       3   <head>
       4     <title>超链接标签title>
       5     
       6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
       7     <meta http-equiv="description" content="this is my page">
       8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       9     
      10 
      11   head>
      12   
      13   <body>
      14     <a href="http://www.baidu.com">百度a><br/>
      15     <a href="girl4.jpg">啊,美女!a><br/>
      16     <a href="mailto:xxx@sina.com">联系我们a><br/>
      17     <a href="http://www.xunlei.com/moves/bxjg.rmvb">变形金刚a><br/>
      18     <a href="thunder:23cwe2s@32sd==">变形金刚a><br/>
      19     
      20     <hr/>
      21     
      22     <a name="top">顶部位置a>
      23     <hr/>
      24     
      25     50年前,长沙镖子岭。
      26 
      27   四个土夫子正蹲在一个土丘上,所有人都不说话,直勾勾地盯着地上那把洛阳铲。
      28 
      29 
      30     <hr/>
      31     
      32     <a name="center">中间位置a>
      33     <hr/>
      34 
      35 
      36 50年前,长沙镖子岭。
      37 
      38   四个土夫子正蹲在一个土丘上,所有人都不说话,直勾勾地盯着地上那把洛阳铲。
      39 
      40 <hr/>
      41     
      42     <a href="#top">回到顶部a>
      43     <a href="#center">回到中间a>
      44     <hr/>
      45     
      46   body>
      47 html>

      显示:这里可以多搞一些文字

      6.表格标签(重点)

      作用:格式化数据

      声明一个表格
        属性:
          1)边框 border
          2)width 宽度
          3)文字与内边框的距离 cellpadding


        属性:
          1)align 对齐方式(文本内容)


        属性:
          1)width
          2)height
          3)colspan 列合并单元格
          4)rowspan 行合并单元格
      会加粗 并且会居中。
      表格的标题
      colspan 合并行, rowspan合并列

      代码:

       1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
       2 <html>
       3   <head>
       4     <title>表格标签title>
       5     
       6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
       7     <meta http-equiv="description" content="this is my page">
       8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       9     
      10 
      11   head>
      12   
      13   <body>
      14   
      18   
      19   <table border="1" width="400px" cellpadding="8" cellspacing="1">
      20       <caption>用户列表caption>
      21       <tr>
      22           <th>序号th>
      23           <th>姓名th>
      24           <th>性别th>
      25       tr>
      26       <tr align="center">
      27           <td>1td>
      28           <td>张三td>
      29           <td>td>
      30       tr>
      31       <tr align="center">
      32           <td>2td>
      33           <td>李四td>
      34           <td>td>
      35       tr>
      36   table>
      37   
      38   <hr/>
      39   
      40   <table border="1" width="400px" cellpadding="8" cellspacing="1">
      41       <caption>用户列表caption>
      42       <tr>
      43           <th>序号th>
      44           <th>姓名th>
      45           <th>性别th>
      46       tr>
      47       <tr align="center">
      48           <td>1td>
      49           <td>张三td>
      50           <td>td>
      51       tr>
      52       <tr align="center">
      53           <td>2td>
      54           <td>李四td>
      55           <td>td>
      56       tr>
      57       <tr align="center">
      58           <td colspan="3">
      59               人数总计:<font color="red">2人font>
      60           td>
      61           
      63       tr>
      64   table>
      65   
      66   <hr/>
      67   
      68   <table border="1" width="400px" cellpadding="8" cellspacing="1">
      69       <tr>
      70           <td rowspan="3">
      71               <img src="bx.jpg" width="150px" height="200px">
      72           td>
      73           <td>
      74               商品信息:冰箱
      75           td>
      76       tr>
      77       <tr>
      78           
      79           <td>
      80               商品价格:2999
      81           td>
      82       tr><tr>
      83           
      84           <td>
      85               <img src="gwc.png">
      86           td>
      87       tr>
      88   table>
      89   
      90   
      91   body>
      92 html>

      显示:

      7.表单标签(重点)

      作用:可以和服务器进行交互。
      输入项的内容 用户名 密码

        属性:action="提交的请求位置"
           method 提交方式(get和post) 如果method没有写默认是get方式提交。

           get和post区别:
            1)get方式表单封装的数据直接显示在url上。post方式数据不显示在url上。
            2)get方式安全级别较低,post级别较高。
            3)get方式数据的长度,post支持大数据。


        ** ?sex=on:
        在每个输入的标签中指定name和value name必须指定
        ?username=haha&pwd=1223&sex=nv&jishu=html


        属性:type 值可以指定很多的值,每一个不同的值代表的不同输入组件。

        1)type=text 文本框
        2)type=password 密码
        3)type=radio 单选按钮
          name属性
        4)type=checkbox 多选按钮
          单选和多选都有默认值:checked="checked"
        5)type=reset 重置按钮
        6)type=submit 提交按钮
        7)type=file 上传文件的输入项
        8)type=button 按钮
        9)type=image 图片(也是提交按钮,)
        10)type=hidden 隐藏标签(用户不用看到的,但是咱们开发时必须要使用的,可以把数据封装到隐藏标签中,和表单一起提交到后台)。

        选择标签
          选择下拉框
        文本域textarea
          

      8.框架标签

        

      框架标签不能写在的内部。body不能写在frameset的上面。

      代码:

      left.html:

       1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
       2 <html>
       3   <head>
       4     <title>left.htmltitle>
       5     
       6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
       7     <meta http-equiv="description" content="this is my page">
       8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       9 
      10   head>
      11   
      12   <body>
      13       <ul>
      14           <li><a href="http://www.baidu.com" target="right">百度a>li>
      15           <li><a href="http://www.sina.com" target="right">新浪a>li>
      16       ul>
      17   body>
      18 html
      
                        
      
      	 	
                          
                          
                          
                          
                          
                      

人气教程排行