HTML 基础和实例
admin
2023-08-01 14:00:10
0次

豆子最近在学前端的基础知识，主要包括Html, CSS, Javascript, Dom, JQuery等内容。豆子没打算做专业的前端开发，不过学会一些常见的界面设计，对于学习Python的web框架还是很有必要的。这篇博客通过各种简单例子的迅速过一遍HTML的常见使用。


例1. 首先看看标签的内容


    
        
        
        
        
        
        
        老男人
        
    


  • 里面指定字符集，IE兼容模式

  • 显示标题

  • 显示标题的图标



    效果如下：

    HTML 基础和实例


例2：里面一些常见的标签



        12
        12

标签分为内联标签和块级标签，比如

就是块级，可以看见颜色是应用到整行，就是内联标签，颜色只是应用到文字上面。


HTML 基础和实例



        <a b>

< 小于符合； >大于符号；   空格



        
asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj

        
asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj

        
asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj

是段落标签，他和直接敲文字的区别是他可以自动换行，如果要手动换行，可以通过
实现


HTML 基础和实例


        
a

        
a

        
a

        
a

        
a

        a
        a

，

等等是设置字体的大小，数字越小，字体越大；当然也可以通过style来指定大小


HTML 基础和实例

 
        跳转1
        跳转2
        
        
        第一章
        第二章
        第三章
        
        第一章内容

        第二章内容
        第三章内容

标签是跳转，可以通过href指定跳转的对象，这个对象可以是一个网页的Url，也可以是其他标签的

如果不指定target=_blank, 会从当前tab跳转，否则新开一个tab页面跳转


HTML 基础和实例


例3 嵌套div




    
    


    
        asdfasdf
        
            

                asdf
            

        
        asdfas\
        asdf     

HTML 基础和实例


例4 表格和各种输入框




    
    


    

        
    
    
        
            
用户名： 

            
密码： 

            
邮箱： 

            
性别(单选框)：
                 男
                 女
            

            
爱好（复选框）：
                 男1
                 男2
                 男3
                 男4
                 男5
            

            
城市：
                
                
                    
                    
                    
                
                
            

            
文件：

            
备注 ：  

            
            
            
        
    

  • 文本框很直接，就是输入值

  • 密码框，邮箱自动隐藏密码和判断邮件格式；

  • 单选框，复选框都是通过指定name联系在一起

  • 下拉列表框可以指定默认的选项，调整大小，甚至通过分组

  • 所有的这些数据可以通过form的submit来提交给后台, form的属性比较重要的是action，这个是提交给哪个url，method，这个分为get和post，get会在url后面显示提交的内容，而post会隐藏这些内容

HTML 基础和实例

例5：列表




    
    


    
    
        
  • 1asdfasdf1
    • 
        
  • 2asdfasdf
    • 
        
  • 2asdfasdf
    • 
    

    
    
        
  1. 1asdfasdf1
    2. 
        
  2. 2asdfasdf
    3. 
        
  3. 2asdfasdf
    4. 
    

    

        
DT

        
dd

        
dd

        
dd

        
DT

        
dd

    

    • 和
    • 是星点隔开；

      • 和
      1. 是数字隔开；

      2. 和
        是缩进格式隔开


    HTML 基础和实例



    列6 表格

    
    
        
            标题一
            标题二
        
        
            内容一
            内容二
            内容三
            内容三
        
        
            内容一
            内容二
            内容三
            内容三
        
        
            内容一
            内容三
            内容三
        
        
            内容一
            内容二
            内容三
            内容三
        
    
    
    
        
            
                第一列
                第二列
                第三列
                第四列
            
        
        
            
                第一列
                第二列
                第三列
                第四列
            
             
                第一列
                第二列
                第三列
                第四列
            
        
    

    注意事项：