HTML-JS-CSS基础
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; width: 50%; padding: 5px; text-align: center; } #div1 { border-width: 2px ; border-style: solid ; border-color: blue ; width: 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;