前端之html

時間 2019-11-10

標籤前端 html 欄目 HTML 简体版

原文原文鏈接

import socket

sk=socket.socket()
sk.bind(('127.0.0.1'),8888)
sk.listen(5)

while true:
    conn,addr=sk.accept()
    data=conn.recv(4)
    conn.send(b"http/1.1    200    ok\r\n\r\n")
    conn.send(b"<h1>hello world</h1>")
    conn.close()

瀏覽器發送請求---->http協議---->服務端接收請求----> 服務端返回響應----->服務端把html文件內容發給瀏覽器----->瀏覽器渲染頁面

html是什麼？

一、超文本標記語言，是一種用於建立網頁的標記語言。
二、本質上是瀏覽器可識別的規則，咱們按照規則寫網頁，瀏覽器根據規則渲染咱們的網頁，對於不一樣的瀏覽器，對同一個標籤可能會有不一樣的解釋
三、網頁文件的擴展名：html或htmcss

html 是一種網頁標記語言，不是編程語言

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css樣式優先級</title>
</head>
<body>

</body>
</html>

幾個重要的屬性：
id:定義標籤的惟一ID，html文檔樹中惟一
class:爲html元素定義一個或多個類名，
style:規定元素的行內樣式（CSS樣式）html

使用

head內經常使用標籤

<title></title>    定義網頁標題
<style></style>    定義內部樣式表
<script></script>    定義js代碼或者引入外部js
<link/>    引入外部樣式表文件或網站圖標
<meta/>    定義網頁原信息

body 內經常使用標籤

<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>斜體</s>

<p>段落標籤</p>

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>


換行
<br>

水平線
<hr>

空格--->&nbsp

div span 標籤

div標籤用來定義一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的biao現python

span標籤用來定義行內元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。web

塊級元素和行內元素的區別：
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不須要另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是在專門爲定義CSS樣式而生的。編程

注意：

關於標籤嵌套：一般塊級元素能夠包含行內元素或某些塊級元素，可是行內元素不能包含塊級元素，只能包含行內元素。瀏覽器

P標籤不能包含塊級標籤，也不能包含P標籤。服務器

img標籤

<img    src='圖片的路徑'    alt='圖片未加載成功時的提示'    title='鼠標懸浮時提示的消息'    width='寬'    height='高'>

a 標籤，超連接標籤

http://www.baidu.com/stu/intro.html
        http://222.172.123.33/stu/intro.html

URL地址由4部分組成：
一、協議：http
二、域名或IP地址：www.baidu.com或222.172.123.33
三、站點中的目錄：stu
四、頁面名稱：into.html

<a href="http://www.oldboyedu.com" target="_blank" >點我</a>

target:
    _blank表示在新標籤頁中打開目標網頁
    _self 表示在當前標籤頁中打開目標網頁

列表

一、無序列表socket

<ul    type="disc">

<li>無序列表</li>
<li>無序列表</li>

</ul>


type屬性：
    disc    實心圓點，默認值
    circle    空心圓圈
    square    實心方塊
    none    無樣式

一、有序列表編程語言

<ol    type="1"    start=「2」>

    <li>列表</li>
    <li>列表</li>

</ol>


type屬性：
    1    數字列表，默認值
    A    大寫字母
    a    小寫字母
    I    大寫羅馬

    i    小寫羅馬

form表單

表單用於向服務端傳輸數據，從而實現用戶與web服務器的交互。post

input元素，input元素會根據不一樣的type屬性，變化爲多種形態

<input type="text"/>    單行輸入文本
<input type="password"/>    密碼輸入框
<input type="date"/>    日期輸入框
<input type="checkbox"    checked="checked"/>    複選框
<input type="radio"/>    單選框
<input type="submit"    value=「提交」/>    提交按鈕
<input type="reset"    value=「重置」/>    重置按鈕
<input type="button"    value=「普通按鈕」/>    普通按鈕
<input type="hidden"/>    隱藏輸入框
<input type="file"/>    文本選擇框

下拉框select 標籤

<form    action=""    method="post">
    <select    name="city"    id="city">
        <option    value="1">北京</option>
        <option    value="2"    selected="selected">上海</option>
        <option    value="3">廣州</option>
        <option    value="4">森真</option>
    </select>

</form>

textarea 多行文本

<textarea    name="memo"    id="memo"    cols="30"    rows="10">    默認文本    </textarea>
 屬性說明：
        name：名稱
        rows：行數
        cols：列數
        disabled：禁用

標籤的總結：

塊級元素：塊級大多爲結構性標記

<h1>.....</h1>標題一級
<h2>.....</h2>標題二級
<h3>.....</h3>標題三級
<h4>.....</h4>標題四級
<h5>.....</h5>標題五級
<h6>.....</h6>標題六級

<hr>    水平分割線

<p>....</p>段落

<ul>.....</ul>無序列表

<ol>......</ol>有序列表

<dl>.......</dl>定義列表

<table>......</table>表格

<form>.......</form>表單

行內元素：行內大多爲描述性標記
<span>.......</span>
<a>......</a>連接
<br>換行
<b>.......</b>加粗

<strong>.........</strong>加粗
<img>    圖片
<i>.......</i>斜體
<em>......</em>斜體
<del>.....</del> 刪除線
<u>......</u>下劃線
<input>.....</input>文本框
<textarea>.......</textarea>多行文本
<select>.....</select>下拉列表

#### 塊級元素
一、老是重新的一行開始
二、高度寬度都是可控的
三、寬度沒有設置的時候，默認爲100%
四、塊級元素中能夠包含塊級元素和行內元素


#### 行內元素
一、和其餘元素都在一行
二、高度寬度以及內邊距都是不可控的
三、寬高就是內容的高度，不能夠改變
四、行內元素只能行內元素，不能包含塊級元素

相關標籤/搜索

每日一句

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