The following editor will bring you a summary of front-end HTML knowledge points (recommended). The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look

1. Overview of html

htyper text markup language Hypertext Markup Language

Hypertext: It means that the page can contain pictures, links, and even non-text elements such as music and programs.

Markup language: A language composed of tags (tags).

Web page == HTML document, parsed by the browser, used to display

Static web page: static resources , such as xxx.html

Dynamic web page: The html code is dynamically generated by a certain development language based on user requests

The following is a tree structure diagram of the html file

The concept of tags:

•It is composed of a pair of words wrapped in angle brackets. For example: *All tags The words in cannot begin with a number.

•Tag is not case-sensitive. and . Lowercase is recommended.

•Tag is divided into two parts: start tag and end tag . The part between the two tags is called the tag body.

•Some tag functions are relatively simple. Just use one tag. This kind of tag is called self Closure and tag. For example:

---

•Tags can be nested. But they cannot be cross-nested. < a>

Attributes of the tag:

•Usually appear in the form of key-value pairs. For example name="alex"

•Attributes can only appear in opening tags or closing tags.

•Attribute names are all lowercase. *Attribute values ​​must be wrapped in double quotes or single quotes. For example name="alex"

•If the attribute value is exactly the same as the attribute name, just write the attribute name directly. For example, readonly

2. Introduction to the main head tag

•The composition of the meta tag: the meta tag has two attributes, they are the http-equiv attribute and the name attribute. Different attributes have different parameter values. These are different The parameter values ​​realize different web page functions.

1 The name attribute is mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly used by search engine robots to find information and classify information.

2 http-equiv, as the name suggests, is equivalent to the file header function of http. It can return some useful information to the browser. Information to help display web page content correctly and accurately. The corresponding attribute value is content. The content in content is actually the variable value of each parameter.

//(Note the quotation marks at the end, which are in front of the seconds. and the end of the URL)

•

•

3. Body tag

Basic tags:

: The value range of n is 1~6; from large to small. Used to represent the title.

: Paragraph tag. The wrapped content is wrapped and there is a blank line between the upper and lower content.

: bold tag.

: for Add a center line to the text.

: The text becomes italic.

^{and _{: Superscript and subscript.}}

:Line break.

---

:Horizontal line

Block-level tags and inline tags

Block-level tags:

Inline tags:< ;input>_{^{<span></p> <p><strong>##Characteristics of block elements<span style="color:#ff0000"></span></strong></p>① Always starts on a new line; <p></p>② Height, line height, margins and padding can all be controlled; <p></p>③ The default width is that of its container 100% unless a width is set. <p></p> <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: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如//m.sbmmt.com/</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">fileObj</span>.chunks() <span class="attribute-value"></span></p>## for line in iter_file: </li> <li><p>## f.write(line) <span class="attribute"></span><span class="attribute-value"></span> f.close() </p></li> <li>## return HttpResponse('ok') <p></p> </li> <li>name: Form submission The key of the item. Note the difference with the id attribute: the name attribute is the name used when communicating with the server; and the id attribute is the name used by the browser. This attribute is mainly for the convenience of client programming, and in <p>## Used in #css and javascript. </p> </li>value: The value of the form submission item. For different input types, the usage of the value attribute is also different: <li><p>type="button", "reset", "submit" - defined on the button The displayed text</p></li>type="text", "password", "hidden" - Define the initial value of the input field<li><p>type="checkbox", "radio", "image" - Define the value associated with the input </p></li>checked: radio and checkbox are checked by default </ol> <p>readonly: read-only. text and password</p> <p>disabled: work for all inputs used. </p> <p><select> Drop-down selection label attributes: </p> <p>name: key of form submission item.</p> <p>size: number of options</p> <p>multiple: multiple</p> <p><option> Attributes of each item selected in the drop-down: value: The value of the form submission item. selected: selected The drop-down selection is selected by default </p> <p><optgroup> Add groups for each item </p> <p><textarea> Text area name: the key of the form submission item. cols: how many columns the text area has by default rows: how many rows the text area has by default </p> <p><label></p> <p>      <label for="www">Name</label></p>                                                                                                                                                                                      ##<fieldset><p> ; <legend>Log in</legend></p> ; <input type="text"><p></fieldset></p> <p>The above article The summary of front-end HTML knowledge points (recommended) is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home. </p><p>The above is the detailed content of Summary of HTML knowledge points. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="How to add rounded borders to div elements" href="http://m.php.cn/faq/356044.html">How to add rounded borders to div elements</a></span><span>Next article：<a class="dBlack" title="How to add rounded borders to div elements" href="//m.sbmmt.com/m/faq/356063.html">How to add rounded borders to div elements</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="//m.sbmmt.com/m/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="//m.sbmmt.com/m/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="//m.sbmmt.com/m/"><b class="icon1"></b><p>Home</p></a></li><li><a href="//m.sbmmt.com/m/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="//m.sbmmt.com/m/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="//m.sbmmt.com/m/login"><b class="icon5"></b><p>My</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="//m.sbmmt.com/m/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="//m.sbmmt.com/m/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</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="//m.sbmmt.com/m/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="//m.sbmmt.com/m/" >Home</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/course.html" >Course</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/xiazai" >Download</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/game" >Game</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/dic.html" >Dictionary</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:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " 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></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>}}