【前端】HTML基礎學習

域名解析

域名 -- ip地址 -- 192.168.1.10
​
https://192.168.1.10:80  -- www.jd.com  -- DNS解析 {'www.jd.com':'192.168.1.10',}

請求和響應

請求:瀏覽器socket客戶端給服務端發信息
響應:服務端socket給客戶端回信息

 

標籤

Html標籤:超文本標記語言,就是標記用的.

必須是封閉的
<meta >
<h1></h1>  
標籤屬性 id='xx' asdfasfd='xxx'
<h1 id='xx' asdfasfd='xxx'>  
​

標籤分類

​
兩類:
 內斂標籤(行內標籤):不獨佔一行,內斂標籤只能嵌套內斂標籤   b\i\u\s\button\span\img\a
 塊級標籤(行外標籤):本身獨佔一行,能夠嵌套內斂標籤和某些塊級標籤   \h1-h6\br\hr\p\div
 p標籤:不能嵌套p標籤,也不能嵌套塊級標籤

head標籤中的標籤

<title></title> 定義網頁標題
​
<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> 

 

img標籤

圖片標籤
屬性 src='圖片路徑' 網絡地址的絕對路徑\本地相對路徑
示例:
 <img src="1.jpg" alt="這是個美女,請稍等.." title="美女" width="200" height="200">

a標籤 超連接標籤

屬性
href:超連接的地址
target:是否新建窗口
target="_self" 當前窗口打開某個路徑對應的html頁面
target="_blank" 新建窗口打開某個路徑對應的html頁面
示例:
 <a href="https://www.baidu.com" target="_blank">百度</a>

列表標籤

無序列表:    
<ul type="none">
        <li>太白</li>
        <li>alexdsb</li>
        <li>景女神</li>
    </ul>
有序列表:
    <ol type="a" start="2">
        <li>大壯</li>
        <li>B哥</li>
        <li>滅霸</li>
        <li>雪飛</li>
    </ol>

標題列表標籤

<dl>
  <dt>標題1</dt>
  <dd>內容1</dd>
  <dt>標題2</dt>
  <dd>內容1</dd>
  <dd>內容2</dd>
</dl>

 

特殊字符

空格: 
小於號:<
大於號:>
&符號:&
...

 

表格標籤(重點)

table
	cellpadding:文字和內邊框的距離
	cellspacing:內邊框和外邊框的距離
	border:邊框寬度

<table border="1" cellpadding="10" cellspacing="20">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>愛好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>B哥</td>
                <td>40</td>
                <td>炒雞蛋</td>
            </tr>
            <tr>
                <td>大壯</td>
                <td>38</td>
                <td>抽菸喝酒燙頭</td>
            </tr>
            <tr>
                <td>雪飛</td>
                <td>18</td>
                <td>大壯</td>
            </tr>
        </tbody>
    </table>

 

form標籤 表單標籤和input標籤 用戶輸入或者選擇使用的標籤

    action:指定數據提交路徑
    input標籤:
    	type屬性:控制輸入框的樣式的
    	name屬性:分組,攜帶數據的key   key:value
    	value:選擇框提交數據的時的值,輸入框的默認值
    input type屬性的值:
    	text	單行輸入文本	<input type=text" />
		password	密碼輸入框（不顯示明文）	<input type="password"  />
		date	日期輸入框	<input type="date" />
		checkbox	複選框	<input type="checkbox" checked="checked" name='x' />
		radio	單選框	<input type="radio" name='x' />
		submit	提交按鈕	<input type="submit" value="提交" /> #發送瀏覽器上輸入標籤中的內容，配合form表單使用，頁面會刷新
		reset	重置按鈕	<input type="reset" value="重置"  />  #頁面不會刷新，將全部輸入的內容清空
		button	普通按鈕	<input type="button" value="普通按鈕"  />
		hidden	隱藏輸入框	<input type="hidden"  />
		file	文本選擇框	<input type="file"  /> （等學了form表單以後再學這個）
    	
    	
    <form action="http://127.0.0.1:8001">

            用戶名:<input type="text" name="username" value="dazhuang">
            密碼:<input type="password" name="password" value="111">

            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="2">女

            <input type="checkbox" name="hobby" value="a"> 喝酒
            <input type="checkbox" name="hobby" value="b"> 抽菸
            <input type="checkbox" name="hobby" value="c"> 燙頭
            <input type="submit">
            <hr>
        	<input type="date">
        	<input type="button" value="普通按鈕">
        	<input type="reset">
        	<input type="hidden">
        	<input type="file">
    </form>
    
    form表單觸發提交數據的操做,必須寫在form表單標籤裏面,寫在外面就是普通的按鈕
    	<input type="submit">
    	<button>提交按鈕</button>
   
input標籤的其餘屬性
	checked默認選中
	 <input type="radio" name="sex" value="2" checked>女   #簡寫方式,當屬性名和屬性值相同時可簡寫
     <input type="checkbox" name="hobby" value="a"> 喝酒
     <input type="checkbox" name="hobby" value="b" checked="checked"> 抽菸
     <input type="checkbox" name="hobby" value="c" checked="checked"> 燙頭

	readonly  只讀 針對的是輸入框  text password
	disabled  不容許操做  全部的input均可以設置
設置了readonly的標籤,它的數據能夠被提交到後臺,設置了disabled的數據,是不能提交到後臺的

select標籤 下拉選擇框

單選
	<select name="city">
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
    </select>
多選:multiple
	<select name="city" multiple>
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
   </select>

 

label標籤

標識標籤的功能的

方式1:for:執行對哪一個標籤進行標識
效果:點擊label標籤中的文字,就能讓標識的標籤得到光標
<label for="username">用戶名</label>
<input id="username" type="text" name="username" value="dazhuang">
方式2:
        <label>
            密碼:<input type="password" name="password" value="111" disabled>
        </label>

 

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默認內容
</textarea>
name：名稱
rows：行數  #至關於文本框高度設置
cols：列數   #至關於文本框長度設置
disabled：禁用