网页三剑客是什么(网页制作三剑客是指)

一. HTML语法基础

HTML是一种超文本标记语言，负责描述Web开发三大语言中的内容和结构。目前语言标准已经发展到HTML5。

1.1 语言结构

与其他编程语言不同，HTML是一种DSL(领域特定语言)，用于以结构化的方式描述网页内容。它为浏览器快速理解整个超文本内容的框架结构提供了语义信息。HTML使用树结构来描述内容。学过数据结构的同学马上就能明白，只要是树型结构，必然有两种关系:父子关系和兄弟姐妹关系。例如，每个人都会明白:

& ltdiv & gt& lth1 & gt文章标题& lt/h1 & gt；& ltp & gt文本段落。& lt/p & gt；& ltdiv & gt在上面的小HTML代码中，div元素是父节点，它有两个子节点h1和p。H1和p是兄弟。如下图所示:

所以HTML元素可以像这样嵌套和包含，就像容器一样。如果要用百分比来表示大小，那么这个百分比将总是只根据最近的父元素来计算。

现代HTML的标准模板

<!DOCTYPE html><html> <head></head> <body></body></html>1.2 常用标签

<!– 这是注释 –><html><!– 头部标签，可以导入js，css等 –><header></header><!– 网页主体 –><body><!– 脚标签，增加可读性 –><footer></footer></body></html>

<!– 标题标签(数字越小,字越大) –><h1>一级标题</h1><h2>二级标题</h2><h6>六级标题</h6>

<!– 这是字体 –><font> 字体的设置 </font><b>字体会加粗</b><i>字体会倾斜</i><u>字体下划线</u>

<!– 换行 –><br> 也可以 <br/> 只有一半(无需包裹.只写一半)<!– 空格 –> <!– 段落 –><p> 长段文字 </p> <!– 水平线 –><hr><!– 居中标签的效果 –><center> 标签名称 … </center>

<!– 图片 –><img src="路径"><!– 链接标签 –><a href="http://www.baidu.com" target="_blank"> 点击访问百度网址 </a><span> 有多大空间占据多大空间 </span> <div> 独占一行 </div>

<!– 有序号列表 –><ol type="testing"> <li> Will </li> <li> Roy </li></ol><!– 无序号列表 –><ul type="testing"> <li> Will </li> <li> Roy </li></ul>

<!– 表格 –><table> <!– 行 –> <tr> <!– 表头 –> <th> 表头一列 </th> <th> 表头二列 </th> <th> 表头三列 </th> </tr> <tr> <!– 列 –> <td> will</td> <td> Roy </td> <td> 土匪 </td> </tr></table>

更多内容可以参考：https://www.runoob.com/html/html-tutorial.html& lt!DOCTYPE html & gt& lthtml & gt& lthead & gt& lt/head & gt；& ltbody & gt& lt/body & gt；& lt/html & gt；1.2常见标签:& lt；body & gt& lt!-foot标记以增加可读性–>:& lt；页脚& gt& lt/footer & gt；& lt/body & gt；& lt/html & gt；& lt!-标题标签(数字越小，字越大)-& gt；& lth1 & gt一级标题:& lttr & gt& lt!-header->；& ltth & gt标题列& ltth & gt标题中有两列

二. CSS语法基础

CSS是一种描述HTML文档风格的语言。

描述CSS应该如何显示HTML元素。

CSS存在于style标签中并生效。

CSS是一种字典类型的数据结构。

CSS语法选择器

/*当前页面上的所有h1、h2标签都有效*/h1、H2 { color:red；字体大小:14px}CSS id选择器/*此CSS规则将应用于id = & # 34para1 & # 34HTML element */# para 1 { text-align:center；颜色:红色；}CSS类选择器/*在这个例子中，所有那些带有class = & # 34中心& # 34；HTML元素*/。center { text-align:center；颜色:红色；}CSS属性选择器/*您希望所有带有title和href的元素生效*/*[title][href]{ color:red；}CSS复合选择器/*在这个例子中，只有那些带有class = & # 34中心& # 34；:em {颜色:红色；}

三. JS语法1.1 用法

Js可以写在HTML的script标签里

& lt!DOCTYPE html & gt& lthtml & gt& ltbody & gt& lt脚本& gtdocument . write(& # 34；& lth1 & gt这是一个标题

& lt!DOCTYPE html & gt& lthtml & gt& lthead & gt& lt!–>代码->:& lt；meta charset = utf-8 & gt；& lt!-标题->；& lttitle & gtVue App & lt/title & gt；& lt!-页面加载前导入->:& lt；!-导入CSS-& gt；& ltlink href =/CSS/chunk-4aa 69602 . bbd 44 efb . CSS rel = prefetch & gt；& lt!-导入js-& gt；& ltlink href =/js/app . FD cf0 f 46 . js rel = preload as = script & gt；& lt/head & gt；& ltbody & gt& ltdiv id = app & gt& lt/div & gt；& lt!-页面加载后导入->:& lt；script src =/js/app . FD cf 0 f 46 . js & gt；& lt/script & gt；& lt/body & gt；& lt/html & gt；当然也可以在开发者工具的控制台界面直接执行js。

1.2 输出使用window.alert()弹出警告框。使用document.write()方法将内容写到 HTML 文档中。使用innerHTML写入到 HTML 元素。使用console.log()写入到浏览器的控制台。

1.3 JS语法含义

;分号:表示一行语句的结束。

空单元格:多余的空单元格将被忽略。您可以在脚本中添加空来提高其可读性。

//表示注释

/* Start，end with */:表示多行注释。

其他符号如加减乘除和Java编程语言的含义几乎一样。

1.4数据类型

值类型(基本类型):String(字符串)，Number(数字)，Boolean，pair 空(null)，undefined，symbol。

var x；// x未定义dvar x = 5；//现在x是一个数var x = & # 34约翰& # 34；;//现在X是一个字符串，类似于python这里的var carname = & # 39沃尔沃XC60 & # 39;var x1 = 34.00//用小数点写出var x2 = 34//不用小数点写var x = true//布尔值var y = false引用数据类型:对象、数组、函数。

var cars =[& # 34；萨博& # 34；,"沃尔沃& # 34；,"宝马& # 34；];//数组，而python的list类似于console . log(cars[1])；cars . push(& # 39；b & # 39)cars . pop(& # 39；b & # 39)var person = { first name:& # 34；约翰& # 34；，姓氏:& # 34；Doe & # 34，id:5566 }；//对象，类似于python的字典。//可以用下面的形式添加一个key person.age = 18人[& # 39；爱& # 39；] = '女& # 39；;//备注:json字符串和对象可以转换成JSON str = JSON . stringify(person)；//可以将json对象转换成json对字符串JSON . parse(JSON str)；//可以将json字符串转换成json对象。//Function my func(params){ console . log(params)；}//调用my func(& # 39；你好& # 39；);

1.5变量

使用var定义变量

var a；a = 1；变量必须以字母开头。变量也可以以$和_符号开头(但我们不建议这样做)

变量名区分大小写(y和y是不同的变量)

1.6条件语句

If语句-仅当指定的条件为真时，使用该语句执行代码。如果…else语句-当条件为真时执行代码，当条件为假时执行其他代码。

如果如果…否则如果….else语句-使用该语句选择多个代码块中的一个来执行。

Switch语句-使用该语句选择多个代码块中的一个来执行。

如果(时间& lt10){ document . write(& # 34；& ltb & gt早上好

与Java一致

for (var i=0; i<10; i++){ console.log(i);}

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。

作者：美站资讯，如若转载，请注明出处：https://www.meizw.com/n/222753.html

网页三剑客是什么(网页制作三剑客是指)

相关推荐

发表回复