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;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。