网站打开为建设中,h5游戏搭建,如何网上开店卖东西,vue做网站前端1 HTML语言 1.1 HTML简介 HTML指的是超文本标记语言#xff1a;HyperText Markup Language#xff0c;它不是一门编程语言#xff0c;而是一种标记语言#xff0c;即一套标记标签。HTML是纯文本类型的语言#xff0c;使用HTML编写的网页文件也是标准的文本文件#xff0c…1 HTML语言 1.1 HTML简介 HTML指的是超文本标记语言HyperText Markup Language它不是一门编程语言而是一种标记语言即一套标记标签。HTML是纯文本类型的语言使用HTML编写的网页文件也是标准的文本文件可以使用任意的文本编辑器例如记事本打开HTML文件查看并修改HTML源代码。当用浏览器打开网页时浏览器读取网页中的HTML代码分析其语法结构然后根据解释的结果显示网页内容。 1.2 HTML结构 下图是一个基本的HTML文档
!DOCTYPE html
html langen
headmeta charsetUTF-8title这是一个网页/title
/head
bodyimg src词云图.png width500 height700
/body
/html
/html 该HTML文档的浏览器端显示如下 其中!DOCTYPE html用于指定文档的类型html标签为文档的根标签该标签不带任何属性head标签是头标签用来规定文件的标题、编码方式和url等信息body标签为文档的主体标签有很多的属性设置如下表所示
body标签的属性及其描述 属性描述text设定页面文字的颜色bgcolor设定页面背景的颜色background设定页面的背景图像bgproperties设定页面的背景图像为固定不随页面的滚动而滚动link设定页面默认的链接颜色alink设定鼠标正在单击时的链接颜色vlink设定访问过后的链接颜色topmargin设定页面的上边距leftmargin设定页面的左边距
2 CSS层叠样式表 2.1 CSS概述 CSS是Cascading Style Sheets的缩写中文名叫层叠样式表是一种标记语言用于为HTML文档定义布局涉及字体、颜色、边距、高度、宽度、高级定位等方面。 2.2 选择器 网页可以分为三个部分结构html、表现CSS、行为JavaScript。CSS可以改变HTML中标签的样式但是要告诉CSS改变谁、改什么。选择器就是用来告诉CSS改变谁具体的有属性选择器、类和ID选择器。使用CSS改变元素样式有三种方式。 2.2.1 内联样式 行内样式 在标签内部通过style属性设置元素样式开发时不要使用内联样式。
bodyp stylecolor: red; font-size: 50px;人之初/p
/body2.2.2 内部样式表 将样式表编写到head中的style标签里然后通过CSS的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式修改时只需要修改一次。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestylep{color: red; font-size: 30px;}/style/headbodyp stylecolor: blue; font-size: 50px;人之初/pp2性本善/p2p性相近/pp习相远/p
/body
/html样式如下 由图可以看出内部样式表对设置过属性的标签都有效但如果同时存在内联样式和内部样式表时以内联样式为准 2.2.3 外部样式表 可以将CSS编写为外部CSS文件在html中通过link标签引入外部CSS文件。将样式编写到外部CSS文件中可以使用到浏览器的缓存机制从而加快网页的加载速度。
p{color: blue;font-size: 90px;
}上述代码是外部CSS文件index.css的代码index.css放在和网页html文件的同级目录下当然也可以自己指定目录。html代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlelink relstylesheet hrefindex.css/headbodyp人之初/pp性本善/pp性相近/pp习相远/p
/body
/html网页效果如下 3 JavaScript JavaScript是一种可以嵌入在HTML代码中由客户端浏览器运行的脚本语言。在网页中使用JavaScript代码不仅可以实现网页特效还可以响应用户请求实现动态交互的功能。 通常情况下在Web页面中使用JavaScript有三种方法分别是行间事件、页面script标签嵌入、外部引入。 3.1 行间事件 行间事件主要用于事件示例代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJS引入方式之行间事件/title
/head
body!-- 第一种嵌入js的方式行间事件 --input typebutton name点我 value点击 onclickalert(hello!);
/body
/html 页面效果如下 3.2 页面script标签嵌入 在HTML文件中可以使用script.../script标签将JavaScript脚本嵌入到其中。在HTML文档中可以使用多个script标签每个script标签中可以包含多个JavaScript的代码集合。script标签常用的属性及其说明如下表所示
script标签常用的属性及其说明 属性说明language设置所使用的脚本语言及版本src设置一个外部脚本文件的路径位置type设置所使用的脚本语言此属性已代替language属性defer此属性表示当HTML文档加载完毕后再执行脚本语言 示例代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejs引入方式一/titlescript typetext/javascriptalert(hello world!);/script
/head
body/body
/html效果如下 3.3 外部引入js 在Web页面中引入JavaScript代码的另一种方法是采用链接外部JavaScript文件的形式。如果脚本代码比较复杂或是同一段代码可以被多个页面所使用则可以将这些脚本代码放置在一个单独的文件中保存文件的扩展名为.js然后在需要使用该代码的Web页面中链接该JavaScript文件即可。示例代码如下 这里hello.js文件与html文件放在了同级目录下。
