HTML-JS-CSS基础
1、html
hyper text markup language，超文本标记语言，所见即所得。web开发中用于展示功能的部分，浏览器可对其进行渲染。产生各种可视化组件，比如表格、图片、按钮等。
<!DOCTYPE html>
<html lang="en">
<head>
<title>this is title！</title>
<!-- 引用样式表文件 -->
<link rel="stylesheet" type="text/css" href="../css/mycss.css">
<!-- 引用java脚本文件 --->
<script type="application/javascript" src="../js/myjs.js"></script>
</head>
<body>
hello world !
</body>
</html>
html的元素分为inline和block两种类型：
-
inline
行内元素，和其他元素在同一行，比如a、img等。
-
block
块元素，自己独立占用一行，比如div、p等。
1.1 html常见元素
-
body
-
table
<table border="0px solid blue" cellpadding="0px" cellspacing="0px" style="border-collapse: collapse"> <tr> <td style="border:1px solid blue"></td> </tr> </table> -
img
<img src="1.jpg"> -
a
<a href="http://www.baidu.com">百度</a> -
h1~h6
<h1>1号标题</h1> <h6>6号标题</h6> -
div
<div> </div> -
form
<form action="/a/b" method="post"> </form> -
p
<p> </p> -
ul
无序列表，前面默认使用黑色圆点作为标记。
<ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul>
-
ol
有序列表，使用连续的数字作为标记。
<ol> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ol>
2、CSS
cascade style sheet，层叠样式表，是修饰元素的属性，控制外观。
2.1 使用方式
样式表的使用方式分为三种，依次为属性、头和外部文件。作用结果遵守就近原则，即最近的样式覆盖较远的样式。
-
style属性
<div style="border:1px solid blue"> </div> -
style头信息
<html> <head> <style type="text/css"> p{ border:1px solid blue ; } </style> </head> <body> <p> 这是段落标记！ </p> </body> </html> -
style文件
[mycss.css]
p { font-family: "宋体"; font-size: large; border: 1px solid red; 50%; padding: 5px; text-align: center; } #div1 { border- 2px ; border-style: solid ; border-color: blue ; 300px ; padding: 5px ; margin-top: 50px ; margin-bottom: 20px ; }[1.html]
<head> <!-- 连接外部样式文件 --> <link rel="stylesheet" type="text/css" href="../css/mycss.css"> </head>
3、JavaScript
java脚本语言可以用来操纵页面上的元素，动态修改属性、添加删除元素等操作。都是围绕文档进行的操作。
document.getElementById("div1").style.width = "100%";
document.getElementById("div1").style['width'] = "100%";
document.getElementsByTagName("button")[0].attributes[0].name;
document.getElementsByTagName("button")[0].attributes[0].value;