全国计算机二级 web 程序设计 操作填空题 （历年常考知识点）

06-01 592阅读

计算机二级 Web 程序设计 知识点 考点大全 目录

  1. 表格结构

    1.1 表格基本结构

    1.2 、 和

    1.3 表格行和单元格

    1.4 元素

  2. 表单结构

    2.1 表单基本元素

    2.2 常用输入类型

    2.3 表单验证

    2.4 和 元素

  3. 列表

    3.1 有序列表和无序列表

  4. 美化与样式

    4.1 基础 CSS 设计

    4.2 响应式设计

    全国计算机二级 web 程序设计 操作填空题 （历年常考知识点）
    （图片来源网络，侵删）

    4.3 无障碍设计

  5. JS 相关

    全国计算机二级 web 程序设计 操作填空题 （历年常考知识点）
    （图片来源网络，侵删）

    5.1 JS 时间对象 new Date()

    5.2 JS Window 浏览器对象 navigator

    全国计算机二级 web 程序设计 操作填空题 （历年常考知识点）
    （图片来源网络，侵删）

  6. CSS 布局属性

    6.1 display 属性行块盒子布局属性

  7. 标签中的 target 属性

  8. JS 中修改界面样式

    8.1 改变 的样式和内容

    8.2 改变 的样式和内容

  9. JS 修改界面样式的方法与属性

    9.1 常用方法与属性列表

    9.2 常用 CSS 属性

  10. JS 中获取父元素的方法

如有其他需要修改或补充的地方，请随时告诉我！

1. 元素

1.1 定义与用途

元素用于为

提供一个简短的标题，以用户理解表格内容。

1.2 语法

 


    表格标题
    

1.3 使用注意事项
 

  •  必须放置在  的第一个子元素位置。
  • 每个表格只能有一个  元素。

    2. 表格结构
     

    2.1 表格基本结构
    一个标准的表格包含 
    • 、（表行）、 包含 th 或 td 元素。
  • 表头单元格 
    • 
   
      function delRow(obj){
         const father = obj.parentNode.parentNode   //中 parentNode 是获取当前元素 的父元素  两个是 获取父元素的父元素
      }
   

    • 注 ： js 中 循环遍历 window 对象 可以输出 所有关于window 对象中 的 方法都会被遍历出来

      注意
       

      此文章为原创 禁止搬运
      如有侵权发邮件 带着截图
      如有错误请告知
      
                
                
                
    （表头单元格）和 （表数据单元格）。 

    2.2 、 和 
     

    • : 表头，定义列标题。
    • : 表体，定义表格的主要数据。
    • : 表尾，定义表格底部的信息，例如合计。

      示例
       

      姓名
            电子邮箱
            年龄
        
      张三
            zhangsan@example.com
            25
        
      2.3 表格行和单元格
       

      • 表行 
     通常是加粗，代表列标题。
  • 表数据单元格 
    		•  包含实际数据。

    3. 表单结构
     

    3.1 表单基本元素
    表单标签  是所有输入元素的容器。
     

    3.2 常用输入类型
     

    • text: 单行文本输入。
    • email: 电子邮件输入。
    • number: 数值输入。
    • password: 密码输入。

      示例
       

          
    
    
    提交


       

      3.3 表单验证
       

      • 使用 HTML5 的 required、min、max 等属性进行常见验证。
      • 验证用户输入有效性以提升用户体验。

        4. 美化与样式
         

        4.1 基础 CSS 设计
        使用 CSS 为表格和表单提供基本的样式。
         

        示例 CSS
         

        table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

         

        常考的css 属性
         

        类别属性描述
        盒模型width设置元素的宽度
        height设置元素的高度
        padding设置元素内边距（内容与边框之间的空间）
        margin设置元素外边距（元素与元素之间的空间）
        border设置元素边框
        背景background-color设置元素的背景颜色
        background-image设置元素的背景图像
        background-repeat设置背景图像是否平铺
        background-position设置背景图像的位置
        文本color设置文本颜色
        font-size设置字体大小
        font-family设置字体系列
        font-weight设置字体粗细
        text-align设置文本对齐方式（左、右、居中等）
        line-height设置行高
        text-decoration设置文本装饰（如下划线、上划线等）
        布局display设置元素的显示类型（如块级、行内、flex等）
        position设置元素的定位方式（静态、相对、绝对、固定、粘性）
        top, right, bottom, left设置定位元素的偏移量
        float设置元素的浮动
        clear设置元素的浮动清除
        overflow设置内容溢出时的处理方式
        列表list-style-type设置列表项的标记类型（如圆点、数字等）
        list-style-position设置列表项标记的位置（在外面或里面）
        表格border-collapse设置表格的边框合并方式（合并或分开）
        border-spacing设置分开的表格单元格之间的距离
        过渡与动画transition设置过渡效果
        animation设置动画效果
        transform对元素进行转换（如旋转、缩放等）
        4.2 响应式设计
        使用 CSS 媒体查询确保表格在不同设备上可用。
         

        4.3 无障碍设计
        确保表格及其标签能够被辅助技术（如屏幕阅读器）识别。
         

        5. 列表
        5.1 有序列表和无序列表
         

        • 无序列表 ：ul li
          可在css 中设置标签样式 比如 list-style-type: circle;, list-style-image:url(“图片路径”)
        • 有序列表：ol li
          可在 ol里面设置 type属性设置

             
          1. 
        
          2. 
        
          3. 
   
           

          结果是
          A
          B
          C
           

          6. js 时间对象 new Date()
           

          let date = new Date()
console.log("获取年份",date.getFullYear()); //年份四位数 getFullYear
console.log("获取月份",date.getMonth() + 1);// 月份 0-11  所以 要 + 1  getMonth
console.log("获取日份",date.getDate()); // 获取日份 getDate
console.log("获取小时",date.getHours()); // 获取小时 getHours
console.log("获取分钟",date.getMinutes()); // 获取小时 getMinutes getMinutes getMinutes getMinutes
console.log("获取秒钟",date.getSeconds()); // 获取小时 getSeconds getSeconds  getSeconds getSeconds getSeconds

           

          7. js Windows浏览器对象 navigator
           

          console.log("获取浏览器的内部名称(开发代号)"+navigator.appCodeName)
console.log("获取浏览器的官方名称"+navigator.appName)
console.log("获取浏览器的平台和版本信息"+navigator.appVersion)
console.log("获取浏览器是否使用cookie，启用返回true 禁用返回false"+navigator.cookieEnabled)
console.log("获取浏览器是否联网，启用则返回true，断网则返回false"+navigator.onLine)
console.log("获取浏览器运行和操作系统平台"+navigator.platform)
console.log("获取浏览器的厂商和版本信息，即浏览器运行的操作系统、浏览器版本、名称"+navigator.userAgent)

           

          8. css display属性 行块盒子 布局属性
           

          方法描述示例代码
          1. 直接设置为块级将元素的 display 设置为 block。css .block { display: block; } 
          2. 行内元素变为块级将行内元素（如 ）设置为块级元素。css .inline-to-block { display: block; } 
          3. 使用 inline-block既允许元素在同一行显示，也可以设置宽高。css .inline-block { display: inline-block; } 
          4. 应用于类选择器通过类选择器将多个元素设置为块级。css .block { display: block; } 
          5. 媒体查询中的设置根据屏幕大小调整 display 属性。css @media (max-width: 600px) { .item { display: block; } } 
          6. JavaScript 动态设置通过 JavaScript 动态改变元素的 display 属性。javascript document.getElementById("myDiv").style.display = "block"; 
          7. Flexbox 布局使用 display: flex; 创建灵活布局。css .container { display: flex; } 
          8. Grid 布局使用 display: grid; 进行网格布局。css .container { display: grid; grid-template-columns: repeat(3, 1fr); } 
          7. a 标签中 target
           

          Target 值说明效果
          _self默认值，在当前窗口/标签页中打开点击链接后，页面内容在当前窗口替换。
          _blank在新窗口或新标签页中打开点击链接后，页面在新的标签页或窗口中打开。
          _parent在父框架中打开如果当前页面在框架中，链接将在父框架中打开。
          _top在整个窗口中打开链接在整个浏览器窗口中打开，覆盖所有框架内容。
          frame_name在指定框架中打开如果有命名的框架，点击链接将在指定的框架中打开。
          示例代码
           

          以下是包含不同 target 值的 HTML 示例：
           

          

    
    
    Links Example


    
          超链接示例
          
    
          在当前页面打开（默认）
          
    
          在新标签页打开
          
    
          在父框架打开
          
    
          在最顶层窗口打开
          
    
          在名为 myframe 的框架中打开
          



           

          8 js中修改界面样式
          当然可以！以下是一些常用的 JavaScript 方法和属性，用于改变  和  部分的内容和样式：
           

          改变  部分
           

          方法/属性描述
          document.title获取或设置文档的标题（）
          document.head获取文档的  元素
          document.head.appendChild(element)向  中添加一个新的元素
          document.head.removeChild(element)从  中移除一个现有的元素
          document.createElement(tagName)创建指定类型的元素（如 、）
          document.getElementsByTagName("link")获取所有链接元素，如 CSS 文件引用
          document.getElementsByTagName("script")获取所有脚本元素
          document.head.innerHTML获取或设置  中的 HTML 内容
          改变  部分
           

          方法/属性描述
          document.body获取文档的  元素
          document.body.style获取或设置  的 CSS 样式
          document.body.innerHTML获取或设置  中的 HTML 内容
          document.body.textContent获取或设置  中的文本内容
          document.body.appendChild(element)向  中添加一个新的元素
          document.body.removeChild(element)从  中移除一个现有的元素
          document.body.classList获取  的类名列表，可以添加/移除类
          document.body.setAttribute(attr, value)设置  的属性
          document.body.fgColor设置  的文字颜色
          document.body.bgColor设置  的背景颜色颜色
          例子
           

          •  
            修改 ：
             
            document.title = "新的文档标题";

             
          •  
            向  添加一种新的 CSS 样式：
             
            const style = document.createElement('style');
style.textContent = 'body { background-color: blue; }';
document.head.appendChild(style);

             
          •  
            修改  的背景颜色：
             
            document.body.style.backgroundColor = "#f0f0f0";

             
          •  
            添加新内容到 ：
             
            const newElement = document.createElement('p');
newElement.textContent = "这是新添加的段落。";
document.body.appendChild(newElement);

             

            这些是常用的操作，可以通过 JavaScript 来改变  和  的内容和样式。
             

            在 JavaScript 中，可以通过 DOM 操作来修改 HTML 元素的 CSS 样式。以下是一些常用方法和属性，用于修改样式的表格：
             

            方法与属性列表
             

            方法/属性描述
            element.style获取或设置元素的内联样式。
            element.style.propertyName设置指定 CSS 属性的值（通过样式属性名访问）。
            element.classList获取元素的类名列表，可以添加、移除或切换类。
            element.className获取或设置元素的类名（相当于 class 属性）。
            element.setAttribute("style", "css-declaration")设置整个样式字符串。
            常用 CSS 属性
             

            以下是一些常用的 CSS 属性，可以通过 element.style.propertyName 的方式设置：
             

            CSS 属性描述
            backgroundColor设置背景颜色。
            color设置文本颜色。
            fontSize设置字体大小。
            fontFamily设置字体系列。
            margin设置外边距。
            padding设置内边距。
            border设置边框。
            width设置元素宽度。
            height设置元素高度。
            display设置元素的显示方式（如 block, none）。
            visibility设置元素的可见性（如 visible, hidden）。
            opacity设置元素的不透明度。
            textAlign设置文本对齐方式。
            position设置元素的定位方式（如 absolute, relative）。
            top, right, bottom, left设置元素距离定位父元素的距离。
            示例代码
             

            以下是一些使用 JavaScript 修改样式的示例代码：
             

            1.  
              修改背景色：
               
              document.getElementById("myElement").style.backgroundColor = "blue";

               
            2.  
              修改文本颜色：
               
              document.getElementById("myElement").style.color = "red";

               
            3.  
              修改字体大小：
               
              document.getElementById("myElement").style.fontSize = "20px";

               
            4.  
              添加或移除类名：
               
              const element = document.getElementById("myElement");
element.classList.add("new-class"); // 添加类
element.classList.remove("old-class"); // 移除类

               
            5.  
              设置多个样式：
               
              const element = document.getElementById("myElement");
element.style.cssText = "background-color: yellow; color: blue; padding: 10px;";

               
            6.  
              使用 setAttribute 方法设置样式：
               
              document.getElementById("myElement").setAttribute("style", "border: 1px solid black; opacity: 0.5;");

               
            这些方法和属性可以有效地通过 JavaScript 修改元素的样式。
             

            9 html中label
             

            label 属性
             

            •  
  
              1. 可以联合 checkbox 和 radio 中使用
            •  
  
              1. 在 label 中 for 属性 绑定 input 中 checkbox 和 radio 中的id 来绑定 此时 点击 label 中 的文字即可 选择 或取消 表单 选择属性
              10 js 中 获取 父元素的方法
               

                 
    
         
      
   
     

		

		
		

		免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。		
			

	




	
相关阅读

	
    
	
				



				

		
	





	
目录[+]

	






	取消
	

		微信二维码
	

	

		

			
			微信二维码
		

		

			
			支付宝二维码