第六届字节跳动青训营第五课 | 青训营

59 阅读3分钟

.HTM1.页面模板的创建与记忆

表示该页面使用的是html5标准

一般用于存放不显示的内容 一般用于显示在浏览器里面的内容 (1)style (2)text-align:center ###居中 (3)color: ###颜色 (4)font:size 12px ###字号像素

概念 (1)元素标签——有双标签,单标签 (2)元素属性——存在于标签内部的, 分为系统属性,自定义属性 属性指的是一个键值对,key,value (3)

hello demo1

——<元素标签>文本节点</元素标签> 2.尝试html和css部分语法合作完成特定功能 p13 ——title是什么

3.块级元素和行内元素的区别(重点) 示例:p元素一块级元素 span元素—行内元素

4.常用的块级元素p15 (1)标题元素,只有6个,数字大小和显示大小的关系 h1最大 (2)p,段落元素 ——空格,  ——换行,

5.注释语句 ---注意区分不同语言的注释语句 (C语言:"//" C#语言:“//、/* */" python:"#" html:")

6.列表元素(重点) (1)无序列表 元素标签:

    不可见元素;
  • 可见元素 (2)有序列表 元素标签:
      ;
    1. ###
        更改属性 (3)自定义列表 元素标签:
        (4)嵌套组合 注意点:嵌套的时候需要完整的将另一个列表插入

        块级元素

        7.表格元素(重点) (1)元素标签:table(重点)、th、tr(重点)、td(重点)从左往右排和上下无关 一行中最大的td控制整个表格的宽度 (2)重点标签的含义: table:它是表格的总体描述,可以不可见 tr:开启一行,不能单独显示,相当于一种行组的概念 td:在某一行中的列号,可以用于表示某个具体的单元格 (3)绘制简单表格(3×4:三行四列) 情况1:某一行少了一个td 情况2:某一行多了一个td (4)单元格合并(可以同时横跨)
        情况1:跨行合并 作用于元素:td 作用属性:rowspan ##span横跨 情况2:跨列合并 作用于元素:td 作用属性:colspan (5)高级应用 注意:td里面可以嵌套多种显示元素标签

        8.表单(重点重点) 作用:用于收集用户信息发送给服务器,服务器在得到数据后经过处理反馈给客户端浏览器(类似问卷调查) 元素:form,input form:表单的外包围,设置网络传输数据的一系列属性 核心属性1:action,属性值是服务器内部的相对虚拟资源映射路径 核心属性2:method,属性值只有两种,分别是get,post get表示通过url输入表单数据 post表示用过body传输表单数据 核心属性3:name,属性值自定义,用于服务端区分昂接受多个表单时,如何取表单元素数据

        input:表单显示元素,包括文本输入框、单选按钮、多选框、(普通)按钮等等 注意:显示样式通过type属性控制,p25表2-1

        10.表单元素 input元素 作用:收集信息给后端代码 通用属性1: key:name(不可改变)前端不唯一,后端唯一 value:自定义字符串 作用:使后台代码获取的关键元素 注意:在前端界面,name的属性值是可以重复的,表示某种组别的意思,主要用于后端代码 通用属性2: key:value(不可改变) value:有的是自定义,有的是系统设置好的 作用:后端代码获取到的真正的值
        通用属性3: key:id(不可改变) value:用于前端页面标识唯一的组件编号

        11.select元素 注意:和option元素联合使用 注意:selected和multiple可以简写

        12.按钮元素button

        13.div元素(层元素) 作用:容器