在前端中的html基礎知識
- php中世界最好的语言原創
- 2018-03-19 11:59:391908瀏覽
這次帶給大家在前端中的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 style='background-color:red'>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代码
< script type="text/javascript" > ...
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属性用于后台获取选择的值
<form> <p> <p>请选择性别：</p> 男：<input type="radio" name="gender" value="1"/> 女：<input type="radio" name="gender" value="2"/> </p> <input type="submit" value="提交"/> </form>
f.checkbox多选框：
<p>爱好</p>篮球：<input type="checkbox" name="hobby" value="1"/>足球：<input type="checkbox" name="hobby" value="2"/>排球：<input type="checkbox" name="hobby" value="3"/>网球：<input type="checkbox" name="hobby" value="4"/><p>技能</p> python：<input type="checkbox" name="skill" value="python"/> php：<input type="checkbox" name="skill" value="php"/>
效果:
如果需要默认选中的话：加一个属性：checked="checked"
g.file上传文件：
如果你要用上传文件功能，你再form表单中一定要加一个属性：enctype='multipart/form-data'
h:reset内容重置:
4.textarea多行文本:
多行文本的默认值写在中间
5.select下拉框：
<select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2" selected="selected">上海</option> <option value="3">南京</option> <option value="4">广州</option> <option value="5">深证</option></select>
显示效果：
参数解释：
size设置一次显示多少个值
multiple可以多选，按住control键
selected="selected"：默认选择的值
分组显示：optgroup，但是这些江苏省，湖南省没有办法选中
<select name="city2" size="5"> <optgroup label="江苏省"> <option>宿迁</option> <option>苏州</option> </optgroup> <optgroup label="湖南省"> <option>湘潭</option> <option>长沙</option> </optgroup></select>
效果如图：
6. a标签
作用：
跳转
锚点 :href="#某个标签的id"标签的ID不允许重复
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <p id="i1" style="height:600px;">第一章内容</p> <p id="i2" style="height:600px;">第二章内容</p> <p id="i3" style="height:600px;">第三章内容</p> <p id="i4" style="height:600px;">第四章内容</p></body></html>
这个就是一个锚的效果：点击第一章，跳转到本页面的第一章位置；点击第二章，跳转到本页面的第二个位置
7.img标签
注意：默认img标签，有一个1px的边框，在使用的时候应该先用border:0；把边框去掉
8.列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <ul style="background-color: red"> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul> <ol style="background-color: green"> <li>asd</li> <li>asd</li> <li>asd</li> </ol> <dl style="background-color: yellow"> <dt>asdf</dt> <dd>asdf12</dd> <dd>asdf12</dd> <dt>asdf</dt> <dd>asdf12</dd> <dd>asdf12</dd> </dl></body></html>
显示效果如图：
9.表格：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table border="1"> <tr> <td>主机名</td> <td>ip</td> <td>端口号</td> </tr> <tr> <td>localhost</td> <td>192.168.1.1</td> <td>8080</td> </tr> </table> <!--最规范的写法，有表头，有内容--> <table border="1"> <thead> <tr> <th>主机名</th> <th>ip</th> <th>端口号</th> </tr> </thead> <tbody> <tr> <td>localhost</td> <td>192.168.1.1</td> <td>8080</td> </tr> </tbody> </table></body></html>
效果显示：
要注意代码的规范性！！
合并单元格：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--最规范的写法，有表头，有内容--> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="2">1</td> <td>1</td> </tr> <tr> <td rowspan="2">2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> </tbody> </table></body></html>
行合并用：rowspan 列合并用：colspan
效果显示：
10.label标签：用于点击文字，使得关联的标签获得光标
<label for="username">用户名：</label><input id="username" type="text" name="user">
用id把input 和 label进行关联，原本如果只是写一个label和一个input，我们在点击用户名的时候，input没有被选中，如果用for关联了input里的id之后，我们点击“用户名”的时候也就选中input输入框
11.fieldset: 在一个框中然后插入标题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <fieldset> <legend>登录</legend> <label for="username">用户名：</label> <input id="username" type="text" name="user"><br> <label for="password">密 码：</label> <input id="password" type="text" name="pwd"> </fieldset></body></html>
显示效果：
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是在前端中的html基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！