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 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>
  <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;