丸子小姐学前端__第一周

前言

记录一下个人觉得有必要记忆的内容，方便复习时候使用~~

一、什么是HTML

HTML: 超级文本标记语言，在浏览器运行的一种标记语言

二、HTML结构

       #声明文档类型，
      #是所有标签的容器，lang表示语言，表示整个文档的内容以什么语言为主  
                 #页面结构的头部，包含辅助显示的标签
     
         #页面的标题，在标题栏显示的内容

                      
        页面结构的主体，包含在页面中显示的标签

• :设置当前文档使用的标准，建议使用HTML5的类型
• HTML标签：用于包裹页面上所有的其他标签
• head标签：用于存放title，meta，base，style，script，link标签，这些标签都是用来辅助显示的标签，每个head标签必须有一个title标签
• body标签：用于存放所有的页面上的结构标签
• title标签：用于设置页面的标题、同时提高SEO的权重
• meta标签：设置页面上的字符集（编码格式），utf-8,gb2312
• HTML注释: 给代码添加的代码说明性的文字，或者使一些没有必要去掉它的作用

三、HTML标签

基本标签

加粗
斜体
下划线
删除
段落标签

标题1
标题2
标题3
标题4
标题5
标题6


  #换行

div标签和span标签(没有语义的标签)

div布局标签
在页面上单独独占一行，如果不设置宽度，默认占一行，通常作为容器布局的时候使用
span标签
一行可以放多个，显示大小由内容决定

img标签

     
通过width，height来设置宽和高，，若只设定一个，会自动等比例缩放，src的路径又分为两种：网页上的一个图片路径和本地的一个图片路径

a跳转标签

喜欢我？
    
    
    点我
上面的a标签的id为zjm，如果我点击‘点我’，页面会定位到上面的a标签

列表

#无序列表，type里面可以给参数，circle，square，，，，代表每行前面的图形

     
     
苹果
     
香蕉
     
西瓜
 

#有序列表，type的参数有1，a，A，i，I，代表以那种数字来排序
        
     
一等奖
     
二等奖
     
三等奖


#自定义列表，存在明显的从属关系

     
手机品牌
     
苹果
     
三星
     
小米
     
电脑品牌
     
苹果
     
三星
     
小米

表格

表格涉及到的标签
table 表格 | tr 行 | td 行内的单元格 | th 表头 | caption 表的标题 | thead 容纳表的表头 | tbody | 容纳表的主体内容 | tfoot 容纳表的尾巴，一般不出现
表格的相关属性
border 表格边框的宽度 | width 表格的高度 | height 表格的高度 | cellspacing 边框之间的间歇
cellpadding 表格中的单元格中的内容跟边框的距离 | align 水平位置 | rowspan 独占列的多少个单元格 | colspan 独占行的多少个单元格

表单

          #action为表单提交的目标地址，method为提交方法，为get时，可以在目标网页的网址上看到提交内容，若为post，就看不到
        昵称：
      #文本框
　　　　　
               #label标签，加了之后，点击密码两个字，输入框自动获取光标
            密码：
           #密码框
        
　　　　　
        性别：男                #单选框，在同一单选框中，name值要相同；checked是默认选项
        女
        不详


        爱好：打游戏吃饭            #多选框
        睡觉


        
                  #普通按钮

        
                                 #重置按钮，点击之后，表单内所有输入内容被重置

        
                              #提交按钮，点击之后，会把整个表单内容让目标地址提交

        
      #图片

        出生年月：                       #下拉框，multiple为布尔属性，设置后为多选下拉框，不设置默认单选
                    1995
                    1996
                    1997
                    1998
                年
                
                    1
                    2
                    3
                    4
                    5
                    6
                    7
                月
                
                    01
                    02
                    03
                    04
                日


        交友宣言：
          #文本域 ，筐的大小可以拉大

        日期：
                  #日期

        时间：
                 #时间
    

• name：表单提交时的键，注意和id的区别
• value：表单提交时对应项的值
• button，reset，submit时，value为按钮上显示的文本内容
• text，password，hidden时，value为输入框的初始值
• checkbox，radio时，value为选中项相关联的值
• checked：radio，checkbox默认被选中的项