HTML知識點總結總結

下面小編就為大家帶來一篇前端之HTML知識點整理總結(推薦)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

一、html概述

htyper text markup language  即超文本標記語言

超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。

標記語言: 標記（標籤）構成的語言.

網頁==HTML文檔，由瀏覽器解析，用來展示的

靜態網頁：靜態的資源，如xxx.html

動態網頁：html程式碼是由某種開發語言根據使用者請求動態產生的

以下為html檔案的樹狀結構圖

標籤的概念：

•是由一對尖括號包裹的單字構成例如: *所有標籤中的單字不可能以數字開頭.

•標籤不區分大小寫. 和. 推薦使用小寫.

•標籤分為兩部分: 開始標籤 和結束標籤. 兩個標籤之間的部分我們叫做標籤體.

•有些標籤功能比較簡單.使用一個標籤即可.這種標籤叫做自閉與標籤.例如:

---

•標籤可以嵌套.但是不能交叉嵌套. < a>

標籤的屬性：　　

•通常是以鍵值對形式出現的. 例如name="alex"

•屬性只能出現在開始標籤或自閉和標籤中.

#•屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹例如name="alex"

•如果屬性值與屬性名稱完全一樣.直接寫屬性名即可. 例如readonly

二、head主要標籤介紹

•meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
 
1 name屬性主要用來描述網頁，與之對應的屬性值為content，content中的內容 主要是方便搜尋引擎機器人尋找資訊和分類資訊用的。

 

2 http-equiv顧名思義，相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的訊息，以幫助正確且精確地顯示網頁內容，與之對應的屬性值為content， content      中的內容其實就是各個參數的變數值。

//(注意後面的引號，分別在秒數的前面和網址的後面)

•

•

三、body標籤

基本標籤：

: n的值範圍是1~6; 從大到小. 用來表示標題.

#

:段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.

: 加粗標籤.

: 為文字加上一條中線.

: 文字變成斜體.
 
^{和_{: 上角標和下角表.}}

:換行.

---

:水平線

 

#區塊級標籤和內嵌標籤

區塊級標籤：

內嵌標籤：<

內嵌標籤：< ;input>_{^{<span><strong><span style="color:#ff0000"></span></strong>block（區塊）元素的特徵</p> <p></p>##① 總是在新行上開始；<p></p>② 高度，行高以及外邊距和內邊距都可控制；<p></p>③ 寬度缺省是它的容器的100%，除非設定一個寬度。 ###<p>④ 它可以容纳内联元素和其他块元素</p> <p><strong><span style="color:#ff0000">inline元素的特点</span></strong></p> <p>① 和其他元素都在一行上；</p> <p>② 高，行高及外边距和内边距不可改变；</p> <p>③ 宽度就是它的文字或图片的宽度，不可改变</p> <p>④ 内联元素只能容纳文本或者其他内联元素</p> <p>对行内元素，需要注意如下</p> <p>设置宽度width 无效。</p> <p>设置高度height 无效，可以通过line-height来设置。</p> <p>设置margin 只有左右margin有效，上下无效。</p> <p>设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。</p> <p><strong><span style="color:#ff0000">特殊字符：</span></strong></p> <p>< >；"；©®</p> <p>图形标签<img>：</p> <p>src: 要显示图片的路径.</p> <p>alt: 图片没有加载成功时的提示.</p> <p>title: 鼠标悬浮时的提示信息.</p> <p>width: 图片的宽</p> <p>height:图片的高 (宽高两个属性只用一个会自动等比缩放.)</p> <p>超链接标签<a>:　</p> <p>href:要连接的资源路径 格式如下: href="http://www.jb51.net"</p> <p>target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.</p> <p>name: 定义一个页面的书签.</p> <p>用于跳转 href : #书签名称.</p> <p><strong>列表标签:</strong></p> <p><ul>: 无序列表</p> <p><ol>:有序列表</p> <p>      <li>:列表中的每一项.</p> <p><dl> 定义列表</p> <p>      <dt> 列表标题</p> <p>      <dd> 列表项</p> <p>表格标签<table>：</p> <p><br>border: 表格边框.</p> <p>cellpadding: 内边距</p> <p>cellspacing: 外边距.</p> <p>width: 像素 百分比.（最好通过css来设置长宽）</p> <p><tr>: table row</p> <p>         <th>: table head cell</p> <p>         <td>: table data cell</p> <p>rowspan: 单元格竖跨多少行</p> <p>colspan:  单元格横跨多少列（即合并单元格）</p> <p><th>: table header <tbody>(不常用): 为表格进行分区</p> <p>表单标签<form></p> <p><br>表单用于向服务器传输数据。</p> <p>表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。</p> <p>表单还可以包含textarea、select、fieldset和 label 元素。</p> <p><strong><span style="color:#ff00ff">1、表单的属性</span></strong></p> <p>HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.</p> <p>action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如http://www.php.cn/</p> <p>method: 表单的提交方式 post/get 默认取值 就是 get（信封）</p> <p>get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.</p> <p>post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.</p> <p>get/post是常见的两种请求方式.</p> <p><strong><span style="color:#ff00ff">2.表单元素</span></strong></p> <p><input>     <br>type:     <br>text 文本输入框</p> <p>password 密码输入框</p> <p>radio 单选框</p> <p>checkbox 多选框 </p> <p>submit 提交按钮           </p> <p>button 按钮(需要配合js使用.) button和submit的区别？</p> <p>file 提交文件：form表单需要加上属性enctype="multipart/form-data"</p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"> <li><p>def index(request):   </p></li> <li><p>    print request.POST   </p></li> <li><p>    print request.GET   </p></li> <li><p>    print request.FILES   </p></li> <li><p>    for item in request.FILES:   </p></li> <li><p>        <span class="attribute">fileObj</span> = <span class="attribute-value">request</span>.FILES.get(item)   </p></li> <li><p>        <span class="attribute">f</span># = <span class="attribute-value">open</span>(fileObj.name, 'wb')   </p></li># # = <li>fileObj<p>.chunks()   <span class="attribute"></span><span class="attribute-value"></span>        for line in iter_file: 1  </p> </li> <li>##        f.close()   <p></p> </li> <li>    return HttpResponse('ok') 項目的鍵.注意和id屬性的區別：name屬性是和伺服器通訊時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在<p></p>css和javascript中使用的。 </li> <li>value: 表單提交項目的值.對於不同的輸入類型，value 屬性的用法也不同：<p>##type="button", "reset", "submit" - 定義按鈕上的顯示的文字</p> </li>type="text", "password", "hidden" - 定義輸入欄位的初始值<li><p>type="checkbox", "radio", "image" -定義與輸入相關聯的值</p></li>checked: radio 和checkbox 預設被選取</ol> <p>readonly: 只讀. text 和password</p> <p>disabled: 對所用input都好使. </p> <p><select> 下拉選標籤屬性：</p> <p>name:表單提交項目的鍵.</p> <p>size：選項個數</p> <p>multiple：multiple</p> <p><option> 下拉選取的每項屬性：value:表單提交項目的值.   selected: selected下拉選預設被選取 </p> <p><optgroup>為每一項加上分組</p> <p><textarea> 文字域name:表單提交項目的鍵. cols:文字域預設有多少列rows:文字域預設有多少行</p> <p><label></p> <p>     <label for="www">姓名</label></p>     <input id="www" type="text"><p></p>#<fieldset><p></p> <p></p> <p></p> <p></p> <p><fieldset></p> <p><fieldset><br>    <legend>登入</legend></p>    <input type="text"><p></fieldset></p> <p><br><br><br></p> <p>。前端之HTML知識點整理匯總(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。 </p><p>以上是HTML知識點總結總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>陳述：</span><div>本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="為div元素新增圓角邊框的操作方法" href="http://m.php.cn/zh-tw/faq/356044.html">為div元素新增圓角邊框的操作方法</a></span><span>下一篇：<a class="dBlack" title="為div元素新增圓角邊框的操作方法" href="http://m.php.cn/zh-tw/faq/356063.html">為div元素新增圓角邊框的操作方法</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><em><a href="http://m.php.cn/zh-tw/article.html" class="bBlack"><i>看更多</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/zh-tw/faq/348757.html" title="Html小知識總結" class="aBlack">Html小知識總結</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348804.html" title="如何快速學習HTML" class="aBlack">如何快速學習HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348873.html" title="html xhtml xml的區別" class="aBlack">html xhtml xml的區別</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348884.html" title="src與href屬性的差別" class="aBlack">src與href屬性的差別</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348902.html" title="關於HTML5和CSS替換使用" class="aBlack">關於HTML5和CSS替換使用</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/zh-tw/"><b class="icon1"></b><p>首頁</p></a></li><li><a href="http://m.php.cn/zh-tw/course.html"><b class="icon2"></b><p>課程</p></a></li><li><a href="http://m.php.cn/zh-tw/wenda.html"><b class="icon4"></b><p>問答</p></a></li><li><a href="http://m.php.cn/zh-tw/login"><b class="icon5"></b><p>我的</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/zh-tw/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/zh-tw/"><b class="icon1"></b><span>首頁</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/course.html"><b class="icon2"></b><span>課程</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/article.html"><b class="icon3"></b><span>文章</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/wenda.html"><b class="icon4"></b><span>問答</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/dic.html"><b class="icon6"></b><span>詞典</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/course/type/99.html"><b class="icon7"></b><span>手册</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/xiazai/"><b class="icon8"></b><span>下載</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/faq/zt" title="專題"><b class="icon12"></b><span>專題</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/zh-tw/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/" >首頁</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/article.html" class="hover">文章</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/wenda.html" >問答</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/course.html" >課程</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/faq/zt" >專題</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/xiazai" >下載</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/game" >遊戲</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/dic.html" >詞典</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>}}