1——web前端HTML基礎

時間 2019-11-29

標籤 web 前端 html 基礎欄目 HTML 简体版

原文原文鏈接

HTMLcss

什麼是HTML：超文本標記語言（HyperText Markup Language，簡稱HTML）html

HTML基本內容分爲頭部(head)和身體(body)兩部分編程

HTML基本模板瀏覽器

<!DOCTYPE html>標籤：做用：在html文件最前面進行聲明，定義文檔類型，告知瀏覽器用html何種規範去解析文檔服務器

經常使用的標籤post

由尖括號包裹單詞構成，eg：<html>,因此標籤不可能以數字開頭spa

標籤使用樣式：3d

1.開始標籤<a>標籤體</a>結束標籤code

2.自閉和標籤，eg：<br>,<hr>,<input>,<img>orm

塊級標籤和內聯標籤：

塊級標籤：<p>、<h1>、<table>、<ol>、<ul>、<form>、<div>

內聯標籤：<a>、<input>、<img>、<sub>、<sup>、<textarea>、<span>

塊級元素的特色：

　　總在新的一行上開始

　　高度，行高以及外邊距和內邊距均可以控制

　　它能夠容納內聯元素和其它塊元素

內聯元素特色：

　　和其餘元素在同一行上

　　高，行高以及外邊距和內邊距不可改變

　　寬度就是其文字或圖片寬度不可改變

　　內聯元素只能容納文本或者其它內聯元素

經常使用標籤之塊級標籤

標題標籤：通常用於文章的標題，有h1~h6

段落標籤：會把HTML文檔分割成若干段落

列表標籤：列表標籤分爲：無序列表和有序列表以及定義列表

div標籤：用於分化一個一個的區域

粗體/斜體標籤：

列表標籤：

div標籤基本格式：

img圖片標籤：用於向頁面中插入圖片

建立一個img文件夾將圖片拖入，src：圖片地址 alt：下載失敗時的替換文字 title：鼠標滑過圖片時顯示的提示文本

a標籤（超連接標籤）：

超連接標籤就是a標籤，通常用於網頁之間的跳轉還能錨點，進行跳轉

1.跳轉到其它頁面

"_blank":表示在新的頁面中打開

href:目標網址 title鼠標滑過顯示的文本 target：鏈接所顯示的文本

2.頁面內跳轉

span標籤：單純的文字標籤，只有配合css纔能有效果

特殊符號：網頁上一些比較特殊的符號

注：以‘&’開頭以‘；’結尾

表格：就是平時看到的二維表格像Excel之類

border:這裏指表格的邊框 solid：實體的邊線

width:表格的寬度

<table></table>：沒有加上css樣式時，在瀏覽器中是沒有表格線的

<table style="border-collapse：collapse;">（這裏將表格線變單線）

表單：蒐集用戶數據信息的各類表單元素的集合區域

action：指向服務器某個程序

method：post/get

input標籤：

1.name屬性：表單提交項的鍵，與id不一樣，name屬性是和服務器通訊時使用的名字，而id屬性是瀏覽器端使用的名字，該屬性主要方便客戶編程而在css和js中使用

2.value屬性：表單提交項的值

做業：

做業代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <form action="method=">
 9         用戶名: <input id="tar" type="text" name="usr" placeholder="請輸入用戶名"><br><br>
10         密&emsp;碼: <input type="password" name="psw" placeholder="請輸入密碼"><br><br>
11         <!--placeholder是增長用戶體驗用的-->
12         性&emsp;別: 13         <!--單選框-->
14         <input type="radio" name="gender" value="1">男 15         <input type="radio" name="gender" value="2">女 16         <input type="radio" name="gender" value="3">保密<br><br>
17         <!--多選框-->
18         愛&ensp;好: 19         <input type="checkbox" name="hobby" value="4">唱歌 20         <input type="checkbox" name="hobby" value="4">跳舞 21         <input type="checkbox" name="hobby" value="5">畫畫<br><br>
22 
23         上傳頭像: <input type="file" value="上傳"><br><br>
24 <!--下拉框-->
25         地址:<select>
26             <optgroup label="湖南省">
27                 <option>長沙市</option>
28                 <option>岳陽市</option>
29                 <option>婁底市</option>
30                 <option>邵陽市</option>
31             </optgroup>
32         </select><br><br>
33 
34         我的簡介: <textarea style="height:150px;width:200px;"
35         ></textarea><br><br>
36 
37         <input type="submit" value="提交">
38         <input type="button" value="重置"><br><br>
39 
40     </form>
41 </body>
42 </html>

相關標籤/搜索

每日一句

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