HTML学习周总结

       本周学习了html,作为超文本标记语言其作用在于使用标签来对网页进行描述,通过浏览器能够识别的标签,渲染成"网页",可以针对图片,字体, 动画,一些文档都可以去进行标记因此html文档也被称作网页.下列为本周学习的主要内容.

一·编写环境

        本周学习前在计算机上安装HBuilderX软件来用作通过代码编写呈现网页的工具,在创建新的页面后可以看到html的标准结构

<     根标签
            头标签
                  标题标签
         
                    浏览器中显示的主体部分
               

   因此HB工具是作为一个提高书写效率的工具.

二·常用标签  

    1.

-

从大到小来标记"标题"

    2.html中的注释    

    3.hr   水平线标签(分割线)

    4.段落标签 p标签 在插入段落标签时,前后加入空行.

    5.常见的文本格式化标签

        (1)i标签          作用为文本斜体

        (2)b标签         作用为文本加粗

        (3)strong标签  作用为文本加粗与b标签类似但是其不同点是b标签用于语义强调

        (4)em标签        作用为文本加粗与i标签类似但是其不同点是em标签用于语义强调

        (5)q标签           引用标签 短引用, 被引入的元素加入引号

        (6)blockquote   引用标签 长引用,用于缩进处理与编辑文本时tab键类似

        (7)列表标签

            <无序列表 ul 和li

                                       ul是父标签

                                        li是列表项(子标签)
                                          ul标签默认的属性 type:给列表项前面的标记值(默认disc,实心圆点) 不写就是默认值
                                            circle:空心圆点
                                             square:实心的小正方形

           <有序列表

                               ol和li
                                             li是ol子标签,列表项元素
                                             ol的默认属性type,默认值值1
          < 自定义列表
                                                自定义列表以
标签开始。
                                                 每个自定义列表项以
开始,每个自定义列表项的定义以
开始
         < 滚动标签 marquee属性: 背景色bgcolor
                                                    滚动的方式: behavior
                                                     默认值scroll :连续滚动
                                                     slide:滑动一次到浏览器边框停止掉
                                                     alternate:来回滚动
                                                     direction:滚动的方式 :默认属性值
                                        
                                                     scrollamount 表示运动速度,值是正整数 ,默认值是6
                                                     scrolldelay 表示停顿时间,值是正整数,默认为0,单位是毫秒
              (8)块标签
                     
                     
                       div:块元素,占一行空间,多个div之间会自带换行效果
                      div应用场景 :结合css(给html标签进行修饰的),完成层级页面布局
                      span:行内标签 ,不会像div元素处在同一行上的
                      span应用场景:前端完成表单校验去做的;

              (9)pre 原样输出标签

                  将我们写的文本内容使用pre包裹起来,浏览器就会按照我们文本的格式进行展示
    
              (10)html中常用的转义字符
 

                                   :相当于在敲了一个空格 (代表一个空格)

                                 &ensp:相当于两个空格
                                  >:在浏览器将 ">"进行转义
                                  <:"<" 进行转义
                    网站底部会有些版权所有或者注册商品的符号 使用转义字符的
                                 版权所有©转义成 ©
                                 注册商标®转义成 ®
                 (11)上下标标签
                       
                               sup和sub

三·图像标签

    语法规则

   
      src:连接到的图片地址 url(统一字符定位符)
      src:使用相对路径 (当前项目下的路径)

在使用图像标签时可以使用width:宽度  height:高度  以及px(像素或者百分比)来指定图片大小

      title:当鼠标悬浮在图片上的文字提示

      atl:替代文本 :当图片链接失效了

四·超链接标签

    用a标签来表示,通过使用href属性创建指向另一个文档的链接

    url  为网络资源定位符号(可以是本地地址或网络地址)

    target:打开资源地址的方式(_self为在当前窗口打开

                                                _blank为新建一个窗口打开)

    超链接标签在文本文档中可以充当书签使用(在中用name创建锚点)

五·表格标签

   使用table表示下面有子标签,table里面有一些属性

                border:表格边框线 单位为像素大小(指定1-5px,值越大,边框线越粗)
                cellspacing:设置表格单元格和边框之间的空隙,设置0,将单元格边框和表格的边框合并了
                width和height:宽度和高度 像素大小或者占整个分辨率的百分比
                align:给表格设置对齐方式center中间对齐
                bgcolor:设置背景颜色
       tr:行
                align:将td中的内容进行对齐方式 (center)
      行的子标签
              caption:给表格中设置标题
              td:一行指定的单元格 (普通单元格)
              th:给单元格设置表头信息(自动居中加粗效果)

        单元格合并
             
              
               单元格合并td标签的属性
                           rowspan:行合并(合并行) 你当前这个单元格行合并所占的格子数量
                           colspan:列合并(合并列) 你当前这个单元格列合并所占的 格子数量

六·表单标签

   1.   form标签提交数据(form里嵌套table)

     其中提交数据又分为两种get与post

      get提交:
           1)会将用户的信息提交到地址栏上 格式是在action的url地址后面表单项 标签中name属性值
1=输入的内容值1&name属性的属性值2=输入内容.
            2)get提交,不适合提交用户的私密数据(像登录密 码,需要进行处理加密(Java中--MD5加密的
工具))
            3)get提交由于在地址栏上的,所以提交的数据大 小有限制
     post提交:HbuilerX运行,提交,找不到地址 手动方式去运行页面
            1)不会将用户信息提交到地址栏上
            2)相对get安全,安全一些,但是密码的信息还需要 加密(后期通过工具加密)
            3)相对get来说不会将信息提交地址栏上,所以提 交数据大小无限制的

     表单标签中所有标签都需要加上name属性用以标记

2.表单标签中的元素每一个被标签都有一个Style属性:行内样式 指定一些样式内容

        输入类型元素input属性:

            type="text" 文本输入框
            type="password" 密码输入框
            type="radio" 单项按钮
            type="checkbox" 复选框
            type="date" 日期组件
            type="file" 文件上传组件
           type="email" 邮箱组件: 如果你写的内容不包含@符号,不能提交会提示
            type="button" 普通按钮 结合value去使用 ,给按钮默认值
            type="submit" 结合value属性="登录/注册" 特殊的提交按钮,将用户的信息提交到action="服务器地址"
            type="reset" 重置按钮
            type="hidden" 隐藏域,没有效果,但是可以提交数据
下拉菜单select标签
      子标签
             option:下拉选项
             textarea:文本域
             rows:指定书写的行数
             cols:一行有多个字符
若看成同一组信息,指定相同的name属性,给后端标记,用户选的哪些
七·框架标签
     框架标签 , 使用 frame 来表示
              特点:一个frame包含一个html页面
           
     它可以模拟后台管理系统模板 , 整个结构的组成由多个页面组成 , 不能使用 frame 来表示 , 需要使用  
frameset 框架集标签 ;
            
         
            
          
      框架集标签 frameset: 由两个或者两个以上的 html 页面组成
       rows: 水平方向 ( 由上而下划分 ) 每一个部分占整个部分权重百分比
      cols: 垂直方向 ( 由左而右划分 ) 每一个部分占整个部分权重百分比
                                                     (页面占比)
                     logo           
                                                              (页面占比)
             左边菜单页           
                中间主页            
                                  
           底部信息页               
                                  
注意事项:
当点击左边菜单页的超链接 ,a标签的target属性指定在具体frame中打开,和frame中的name属性值一致即可!

CSS入门

  css:层叠样式表

        在使用html时由于频繁利用style使得整体程序繁琐因此利用css中多种不同简便方式来对网页进行修饰

一·  css使用方式分为三种:行内样式\内部样式\外部样式(外联式)

1.行内样式

         html的每一个标签都有style属性:设置样式的 style="多种样式名称."

       弊端:一次只能控制一个标签去进行修饰(如果在实际操作过程中,仅仅给某个标签去设置,就直接 用这个方式)
2.内部样式(内联式)
      
      在head标签体中书写 存在弊端:当前这个html只是写html标签元素的,样式代码style标签
和html标签元素混合了,不利于管理
3.外部样式(外联式)
          单独需要在项目下创建css文件夹,然后里面创建后缀名.css文件 
            css文件书写
                      选择器{
                                 样式属性名称1:值1;
                                 样式属性名称2:值2;
                                 样式属性名称3:值3; ...
                                                                          }
            在当前html页面中导入css文件
            
            rel:关联样式库中的样式(关联层叠样式表):固定写法
二·css常用选择器(在后端开发过程中的需要使用内部样式)
          1.标签名称选择器{
                                   样式属性名称1:值1;
                                   样式属性名称2:值2; ....
                                                                            }
           2 class选择器(类选择器)
               需要在标签指定class属性="值"
                 .class属性值{
                                   样式属性名称1:值1;
                                   样式属性名称2:值2; ....
                                                                             }
                   同一个页面中的class属性值是可以同名的
                    class(类)选择器 :同一类元素 优先级 > 标签名称选择器
            3 id选择器
                   在标签中指定id="值",注意:id选择器的id的值,必须唯一的!
                   (id属性值唯一,能够解决浏览器中部分标签的兼容性问题)
                   #id属性值{
                                   样式属性名称1:值1;
                                   样式属性名称2:值2; ....
                                                                           }
                  上面三个选择器是设置css的最基本选择器
                  其优先级为:id选择器 > class选择器 > 标签名称选择器组合选择器
           4 并集选择器
                   选择器1,选择器2,选择器3....{ 选择器可以是上面id,class类,标签名称选择器
                                                         样式属性名称1:值1;
                                                         样式属性名称2:值2; ....
                                                                                                }
          5 子元素选择器
                   选择器1 选择器2 { 选择器2选中的标签是选择器1的子标签
                                       样式属性名称1:值1;
                                       样式属性名称2:值2; ....
                                                                                                 }
         6 后代选择器:
                 选择器1 > 选择器2 { //选择器2选中的元素是选择器1的后代元素
                                              样式属性名称2:值2;
                                               ....
                                                                                                  }
三·css内特殊选择器(伪类选择器)
   
         1.用于定义元素的特殊状态
             
            状态:
                    1)link状态:鼠标未访问状态
                    2)hover状态(使用居多):鼠标经过状态
                    3)avtive状态:鼠标获取焦点状态(激活,点击,但未松开),超链接类型
                    4)visited状态:鼠标访问过了状态(举例:超链接点了松开后,就访问了)
            css代码书写格式:
                                       选择器:状态名称{
                                                                   样式属性名称1:值1;
                                                                   样式属性名称2:值2;
                                                                               ...
                                                                                                      }
注意:
1)状态名称不区分大小写,但是建议小写
2)注意: 规定这个先后顺序: 才能出现循环的效果
                  a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后,才能生效!
                  a:active 必须在 CSS 定义中的 a:hover 之后才能生效!
四·css文本样式
                      
    div后接大括号{
                             
                            文本样式 color
                          
                            文本对齐样式 text-align(left   center    right)
 
                           
                           文本修饰 text-decoration 属性用于设置或删除文本装饰。
                                           underline:设置下划线
                                           none:不设置任何修饰
                                           overline:上划线
                                           line-through:中划线(电商平台:打折之后原件上面的中划线)
                                           text-transform:文本转换
                                           capitalize:将每个单词首字母大写
                                           uppercase:将英文单词转换成大写
                                           lowercase:将英文单词转换成小写
                                           text-indent:文本缩进
                                           letter-spacing:指定文本中字符之间的间距
                                           text-shadow:文本阴影(后面可添加文本颜色)
                                                       

你可能感兴趣的:(html,学习,前端)