在前端中的html基礎知識

這次帶給大家在前端中的html基礎知識 ，使用前端中html基礎知識的注意事項有哪些，下面就是實戰案例，一起來看一下。

HTML基本知識

學習html首先我們先看看HTML本質：

web框架本質

我們在學習socket，我們建立一個socketserver，然後運行起來，有一個client客戶端要連接socket服務端，連接上之後，如果兩邊都沒有close，就一直不斷開，可以不斷的進行請求。

那我們說一個網站，我們在伺服器端運行我們的網站，所有的客戶端就可以透過瀏覽器訪問我們寫的網站，所以我們用的iis,apache等它們本質上就是一個socket服務端，而我們開啟的瀏覽器就是client端，進行資料傳輸。

我們如果基於TCP,客戶端和服務端連線之後，只要兩邊不close，也都可以一直不斷的存取互動。但是網站瀏覽器瀏覽和這個是不一樣的。瀏覽器訪問了服務端，服務端給我們數據，瀏覽器得到了數據之後，連接就立刻斷開了，如果還想要拿數據，還得再次建立連接。即一次請求，一次回應，一次斷開。

我們下面寫一個socket服務端：

 1 import socket 2  3 def handle_request(client): 4     buf = client.recv(1024) 5     client.send(bytes("HTTP/1.1 200 ok\r\n\r\n",encoding="utf-8")) 6     client.send(bytes("Hello,Charles",encoding="utf-8")) 7  8  9 def main():10     sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)11     sock.bind(('localhost',8000))12     sock.listen(5)13 14     while True:15         connection,addr = sock.accept()16         handle_request(connection)17         connection.close()18 19 if name == 'main':20     main()

我們運行之後用瀏覽器訪問起來：

 

所以伺服器的本質根源就是這20行程式碼，建立socket連線。

其實我網站的顯示內容本質上也就是一大堆的字串，我們在send函數中發送了hello,clarles，在網站上就顯示了那個內容，如果我們加上一些標籤比如

<h1 id="Hello-Charles">Hello,Charles</h1>

 那麼瀏覽器中顯示的就是如下：

#那所以客戶端和伺服器端進行互動的時候，服務端回傳的永遠是字串，這個字串之所以我們在瀏覽器上能看到上圖的樣式，那是因為瀏覽器把這個字串進行了解析。瀏覽器認識這種格式。

所以我們要學的html其實就是一套瀏覽器認識的規則，這就是html本質。

而我們開發者要做的就是：

1.學習html規則|（充當模板的作用）

2.從資料庫中取得數據，然後替換到html檔的指定位置,這個事情以後就由web框架來做 

html標籤知識

 註解：

標籤分類：

1.自閉合標籤：

2.主動閉合標籤：

 head內的標籤

meta

 1.頁面編碼（告訴瀏覽器是什麼編碼）

#2.刷新與跳轉：

頁面預設30s刷新一次

3.關鍵字：給搜尋引擎的

4.描述：描述網站內容

5 .X-UA-Compatible:專為IE設定的

title

网页头部信息：

Link 

1.css 

2.icon:网站图标

 

 

Style

在页面中写样式

例如：
 

Script

1.引进文件

2.写js代码

...

 body内的标签

标签一般分为两种：块级标签 和 行内标签

行内标签：a、span、select 等

块级标签：p、h1、p 等

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

空格：     小于号：>    大于号：<

1.p和br

p表示段落，默认段落之间是有间隔的！

br 是换行

<p>1231<br>32132</p>
<p>123132132</p>
<p>123132132</p>

2.H 标签

h1

3.input系列:

a.text文本框： ，显示效果：

b.password密码框:输入的密码是点,显示效果：

c. submit提交按钮:,显示效果：

 用于表单的提交

d.button按钮:,显示效果：

 仅仅只是一个按钮，没有办法进行表单的提交

e. radio单选框：,

name属性如果都相同，则互斥

value属性用于后台获取选择的值

        

            

请选择性别：

        男：         女：                       

f.checkbox多选框：

<p>爱好</p>篮球：<input>足球：<input>排球：<input>网球：<input><p>技能</p>
 python：<input>
 php：<input>

 效果:

如果需要默认选中的话：加一个属性：checked="checked"

g.file上传文件：

如果你要用上传文件功能，你再form表单中一定要加一个属性：enctype='multipart/form-data' 

h:reset内容重置:

4.textarea多行文本:

<span style="color: #ff0000">asdfasdf</span>

多行文本的默认值写在中间

5.select下拉框：

<select>
      <option>北京</option>
       <option>上海</option>
       <option>南京</option>
       <option>广州</option>
       <option>深证</option></select>

 显示效果：

参数解释：

• size设置一次显示多少个值

• multiple可以多选，按住control键

• selected="selected"：默认选择的值

分组显示：optgroup，但是这些江苏省，湖南省没有办法选中

<select>
     <optgroup>
             <option>宿迁</option>
             <option>苏州</option>
     </optgroup>
     <optgroup>
             <option>湘潭</option>
             <option>长沙</option>
     </optgroup></select>

 效果如图：

6. a标签

作用：

• 跳转

• 锚点 :href="#某个标签的id"标签的ID不允许重复

nbsp;html>
    <meta>
    <title>Title</title>
    <a>第一章</a>
    <a>第二章</a>
    <a>第三章</a>
    <a>第四章</a>
    <p>第一章内容</p>
    <p>第二章内容</p>
    <p>第三章内容</p>
    <p>第四章内容</p>

这个就是一个锚的效果：点击第一章，跳转到本页面的第一章位置；点击第二章，跳转到本页面的第二个位置 

7.img标签

注意：默认img标签，有一个1px的边框，在使用的时候应该先用border:0；把边框去掉

8.列表 

nbsp;html>
    <meta>
    <title>Title</title>
    

        
• asdf
        
• asdf
        
• asdf
    

    

        
1. asd
        
2. asd
        
3. asd
    

    

        

asdf

            

asdf12

            

asdf12

        

asdf

            

asdf12

            

asdf12

    

显示效果如图：

9.表格：

nbsp;html>
    <meta>
    <title>Title</title>
    

                                                                                                                      

主机名	ip	端口号
localhost	192.168.1.1	8080

                                                                                                                                                                                                            

主机名	ip	端口号
localhost	192.168.1.1	8080

效果显示：

要注意代码的规范性！！

合并单元格：

nbsp;html>
    <meta>
    <title>Title</title>
    
    

                                                                                                                                                                                                                                                                                                                                                                                              

表头1	表头2	表头3	表头4
1	1	1
2	2	2	2
3	3	3

 行合并用：rowspan       列合并用：colspan

效果显示：

10.label标签：用于点击文字，使得关联的标签获得光标

<label>用户名：</label><input>

用id把input 和 label进行关联，原本如果只是写一个label和一个input，我们在点击用户名的时候，input没有被选中，如果用for关联了input里的id之后，我们点击“用户名”的时候也就选中input输入框

11.fieldset: 在一个框中然后插入标题

nbsp;html>
    <meta>
    <title>Title</title>
    

        

登录

        用户名：             
        密    码：                  

显示效果：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

知名的网站前端布局分析

关于前端的css基本知识

以上是在前端中的html基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！