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>

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

  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;

巴特西

HTML-JS-CSS基础

HTML-JS-CSS基础

1、html

1.1 html常见元素

2、CSS

2.1 使用方式

3、JavaScript

最新文章

热门文章