HTML-JS-CSS基础

时间 2019-11-16

标签 html css 基础栏目 HTML 繁體版

原文原文链接

HTML-JS-CSS基础

一、html

hyper text markup language，超文本标记语言，所见即所得。web开发中用于展现功能的部分，浏览器可对其进行渲染。产生各类可视化组件，好比表格、图片、按钮等。javascript

<!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两种类型：css

inlinehtml

行内元素，和其余元素在同一行，好比a、img等。java
blockweb

块元素，本身独立占用一行，好比div、p等。浏览器

1.1 html常见元素

bodyapp

tablepost

<table border="0px solid blue"
      cellpadding="0px" 
  cellspacing="0px" 
  style="border-collapse: collapse">
  <tr>
    <td style="border:1px solid blue"></td>
  </tr>
</table>

imgthis
```
<img src="1.jpg">
```

aspa

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

二、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>

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