前 言主包这边已经在大一的时候学过前端基础开发所以同样学过的同学可以直接从day2的JS开始看起但是基础不扎实的同学建议看一下day1稍微掌握一下基础的即可以后工作了可以直接用cursor对接需求。一.HTML和CSS1.含义HTML超文本标记语言超文本超越了文本的限制比普通文本更加强大。除了文字信息还可以定义图片、音频、视频等内容。标记语言由标签构成的语言HTML标签都是预定义好的。eg使用a展示超链接使用img展示图片video展示视频。HTML代码直接在浏览器中运行HTML标签由浏览器运行。CSS层叠样式表用于控制页面的样式表现2.快速入门步骤新建文本文件后缀名改为.html编写HTML结构标签在body中填写内容html head titlehtml的快速入门/title /head body h1hello HTML/h1 img src 1.jpg /body /html特点HTML标签不区分大小写HTML标签属性值单双引号都可以HTML语法松散二.基础样式及标签1.标题排版图片标签imgsrc指定图像的url绝对路径/相对路径width图像的宽度像素/相对于父元素的百分比height图像的高度像素/相对于父元素的百分比标题标签h1 - h6水平线标签hr注绝对路径绝对磁盘路径Dxxxx、绝对网络路径https//xxxx相对路径从当前文件开始查找。./当前目录../上级目录2.标题样式CSS引入方式行内样式写在标签的style属性中不推荐h1 style xxx:xxx;xxx:xxx;中国新闻/h1内嵌样式写在style标签中可以写在页面任何位置但是通常写在head标签中style h1{ xxx:xxx xxx:xxx } /style外嵌样式写在一个单独的.css文件中需要通过link标签在网页中引入link rel stylesheet href css/news.css注span标签无语义作用是组合行内元素不换行优先级顺序id选择器 类选择器 元素选择器注font-size是设置字体大小注意记得加上px3.超链接标签a href ... target ...央视网/a属性href指定资源访问的urltarget指定在何处打开资源链接_self默认值指的是在当前页面打开_blank在空白页面打开如果不想默认添加超链接后变成蓝色和下划线可以用text_decoration来规定添加到文本的修饰none表示定义标准的文本注以上内容和样式包括其他的可以去https://www.w3school.com.cn/这个链接查看三.正文1.正文排版如果要设置首行缩进可以在p标签的css样式中设置text_indentbr换行标签line-height设置行高b加粗标签text-align设置对齐方式注在HTML中无论输入多少个空格只会显示一个可以使用多个空格占位符nbsp来显示2.页面布局布局标签在实际开发网页中会大量使用div和span这两个没有语义的布局标签标签divspan特点div标签一行只显示一个独占一行宽度默认是父元素的宽度高度默认由内容撑开可以设置宽高span标签一行可以显示多个高度和宽度默认由内容撑开不可以设置宽高如果想要居中显示可以用margin0 auto上下为0左右一半自动居中对齐注如果只是需要设置某一个方位的边框内边距外边距可以在属性名后加上-位置如padding-toppadding-left....四.表格和表单1.表格标签注如果是表头单元格用th拥有表头字体加粗及居中显示的效果普通单元格用td即可2.表单标签场景在网页中主要负责数据采集功能如注册、登录等数据采集标签form表单项不同类型的input元素、下拉列表、文本域等等input定义表单项通过type属性控制输入形式select定义下拉列表textarea定义文本域属性action规定当提交表单时向何处发送表单数据表单数据提交的url地址method规定用于发送表单数据的方式GET、POST其中GET是默认方式注表单项必须有name属性才可以提交