2、在文件内，在p标签内，使用span标签创建一行文字。
3、定义一个类名为test的样式，设置宽度300px，高度50px，背景颜色为红色，同时设置display属性为block。
4、创建一个button按钮，用于触发执行js函数。
5、在js标签内，创建函数，在函数内，通过元素名称获得span对象，使用addClass方法给span对象添加class属性，设置class属性为test
html如何改变字体的大小与颜色？
可以用css改变字体的大小和颜色。
1、新建html文件，在body标签中添加文字，这里以p标签内容为“演示文本”为例，这时网页将会显示字体默认大小和颜色：
2、在head标签中添加style标签给页面设置css样式，选择p标签，字体大小用的是“font-size”属性，属性值为字体大小，这里以“30px”为例，这时“演示文本”字体将会变大：
3、选择p标签，字体颜色用的是“color”属性，属性值为颜色，这里以红色“red”为例，这时“演示文本”字体将会变成红色：
web前端开发中需要掌握哪些技术？
不得不说，想要入行Web前端的门槛并不高。
Web前端开发的前期是网页制作，简单的ps和dw就可以制作网页，后来为了更好的用户体验，应用于企业，那么就需要掌握基本的Web前端开发技术。
虽然不同的公司都有Web前端开发，但是职能也有不同，可以是做网站设计、网页界面开发的，只做网页界面开发的，做网页界面开发、前台数据绑定和前台逻辑的处理的，也有设计、开发、数据的。
主要是根据具体的公司职位需求来定，但是需要掌握的技术还是没差的。
Web前端开发学习
基础：HTML、CSS 、JavaScript
前端三大基础，学习顺序为：HTML＞CSS＞JavaScript。
了解HTML的基础知识，学会将页面分为多个部分，知道如何正确的建立DOM，最好至少能够制作五个页面（这里的重点是了解页面结构）。
然后大家再来考虑美观问题，认识CSS，网格和弹性盒子的知识要去了解，还有媒体查询和响应式知识，然后把CSS样式套用到你制作的HTML网页。
基础知识的最后一步JavaScript，这里会比前面两点稍有提升，但是不难，了解语法和基本的结构，开始学习操作DOM，理解一些相关概念，了解Ajax（XHR）。
推荐几本书籍：
《html5从入门到精通》
这本书讲的很系统，作为入门书籍，也比较容易懂，最重要的是有光盘教学，可以放电脑上看看。
css的书籍，这本书也有涵盖html5，有承上启下的作用。
比较出名的一本javascript，被读者称为犀牛书，很推荐。
框架：React、Angular 或者 Vue
学习完前端的三大基础之后，你还需要了解最新的前端框架。
这里就提出Vue 、Angular 、React，大部分人称为VAR，这三个是目前最流行的前端框架。
为什么没有jQuery？确实，初学者认为使用jQuery就可以写出任何特效效果，但是它并不是前端的全部，在工作时间久了之后才会发现，jQuery只是满足当下的业务需求，技术框架是随时会变的。
当然，学习jQuery没有问题，只是多学会框架，有助于提升你的个人技术能力，和你的职场竞争力。
打包工具：Webpack 和 gulp
进阶：Node.js 体系（包括 Node.js 服务端开发，npm 等）还需要什么？
不急，还没完呢，前端开发中有一个重要的知识：前端布局，主要是对页面模块和内容进行科学合理的组织与呈现。
其实前端布局没有引起多大的重视，但是它又是Web前端开发的核心，在工作中的比重也不小。
可能在你认为已经掌握了前端知识后，信心满满的去面试，但是却被一个看似简单的切图问题给难倒了，即便是混过了面试，工作中也不得心应手。
布局的好坏直接影响着后续的所有工作进展的顺利与否与效率的高低。
对于如何掌握前端布局的技能，W3Cschool APP最近新上线了一个专栏，有兴趣的可以看看。
最后偶想说，Web前端开发的前景好不好，还是得看你的技术怎么样，技能过关，网站界面做得好看，用户体验好，那自然好，如果想要更上一层楼，建议了解一下Web全栈开发，这是前端行业内重要的发展趋势。
html中怎么引用css样式？
1、html5使用link标签引入外围的css样式表。方法是首先打开hbuilder软件，在一个外部css文件中编写css代码，然后可以能过 link 引入到html中，这里设置了两个属性的字体和颜色属性：
2、在html文件中使用link标签引入刚刚写好的css样式表，其中href是相对路径，即相对于项目所在文件的路径。然后写两个标签，引入上述css文件里的样式：
3、最后打开浏览器，即可看到 上面的代码效果：
