欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Html一天入门

程序员文章站 2022-05-14 20:54:33
...

一、什么是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>

显示:

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>

显示:

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>

    显示:

    Html一天入门

    4.图片标签

    Html一天入门
      属性:src="图片的路径"
           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>

    显示:

    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 htmlHtml一天入门

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    相关文章

    相关视频


相关标签: Html一天入门