HTML learning
1. Introduction to HTML (just understand it)
HTML (Hyper Text Markup Language):
HTML is the abbreviation of Hyper Text Markup Language and is the most basic web page language
HTML versions:
2.0 (IETF), 3.0 (W3C), 4.01 (W3C), 5.0 (W3C)
IETF: Internet Engineering Task Force
W3C: World Wide Web Consortium
Characteristics of HTML:
is a language defined by tags. Codes are composed of tags. Codes are not case sensitive.
starts with and ends with
It consists of two parts: the header part
and the body part
The head part is to add some auxiliary or attribute information to the HTML page, and the content inside it will be the most Load
first. The body part is where the page data is actually stored.
HTML tags:
Most tags have start tags and End tag . For example:
Paragraph
There are some tags that have only a single function or there is no content to be modified. They can end within the
tag. For example: line break
dividing line
can also be written as
slashes can be omitted
Attributes in HTML tags:
Want To perform richer operations on the content modified by tags, use the attributes in the tags
By changing the attribute values, more effect options are added
Use "=" between the attribute name and attribute value Connection
Attribute values can use double quotes, single quotes, or no quotes. Generally, double quotes (or company regulations writing standards) are used.
2. Header tag
<br> The title of the page</p>
<p class="sycode"> </p> <p class="sycode"> <base> Start<br> Target: The default target for all hyperlinks on the page <br> <br> </p> <p class="sycode"> <br> <meta> </p> Page description information <p class="sycode"> content ="Java,.Net,Android,iOS"> <br>See when crawling by spiders, it is related to search engine SEO<br> <strong> html; charset=utf-8"> Inform the browser of the content, type, and encoding of this page </strong> <meta http-equiv="refresh" content="3;url=http://www.maomao.com" >Refresh to a certain page after three seconds <br> <br> </p> <p class="sycode">3. Font<font></p> <h2> Font tag<font>: </h2> <p class="sycode">< font size=5 color=red><br>Font tag example<strong></font> FF0000 is a group of two numbers, arranged according to red, green and blue </strong> For example: #FF0000 means red, #00FF00 means green <strong> </strong> <br> <br> <br> Title tag <h1> , & Lt; h2 & gt; ... & lt; h6 & gt;: </p> The title is commonly used in the text. 🎜>4. List<dl><dt><dd><p class="sycode"> <br> No tags: </p> <p class="sycode"> Number tags: <br> > Symbol tag: <br> <br> not not been </p> <h2> </h2>
<p class="sycode"> <br> </p> <p class="sycode"> </p>
<h2>5、超链接<a></h2> <p class="sycode"> 链接标签<a>： <br> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span> <span style="font-size:18px;"> <a href="http://www.maomao.com" target="_blank">猫猫学编程</a></span></span></pre> href：要链接的地址 <br> target：显示位置 <br> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><a name="mark" /></span></pre> 在页面的某个位置做出标记 <br> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><a href="#mark">跳转到标记</a></span></pre> 点击链接跳转到标记位置 <br> <h2>6、图像<image></h2> <p class="sycode"> 图像标签<img>： <br> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="1.jpg" align="right" border="3" alt="图片说明文字" /> </span></pre> src: 图片路径 <br> align: 对齐方式 <br> border: 边框粗细 <br> <p class="sycode"> 图像地图<map>： <br> 在<img>标签中使用usemap属性，指定图像可以用作地图 <br> 使用<map>及<area>标签可以把图像的一部分作为超链接 <br> </p> <p class="sycode"> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="Sunset.jpg" alt="图片说明文字" usemap="#Map" /> <map name="Map"> <area shape="rect" coords="50,59,116,104" href="1.html" /> <area shape="circle" coords="118,203,40" href="2.html" /> </map></span></pre> <br> <h2>7、框架<frameset></h2> <p class="sycode"> 框架集合标签<frameset>： <br> <frameset>中可以放入多个<frame>框架，把页面分成几个部分 <br> <frameset>不能放在body中 <br> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><frameset rows="20%,*"> <frame src="1.html" name="top" /> <frameset cols="20%,*"> <frame src="2.html" name="left" /> <frame src="3.html" name="right" /> </frameset></frameset></span></pre> rows：框架集合每行的高度 <br> cols：框架集合每列的宽度 <br> src：框架中显示的页面 <br> name：框架的名字，可用做超链接的target <p class="sycode"> <br> </p> <p class="sycode"> 内联框架<iframe>： </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><iframe src="1.html">抱歉,您的浏览器无法显示iframe标签</iframe> <iframe src="2.html">抱歉,您的浏览器无法显示iframe标签</iframe></span></pre> 可以在页面中嵌入另一个页面 <br> src：要嵌入的页面 <br> innerHTML：如果浏览器无法显示iframe，则会显示该文本 <br> <h2>8、表格<table></h2> <p class="sycode"> 表格标签<table>： <br> <caption> 标题 <br> <tr> 表格中的一行 <br> <td> 放在<tr>中代表一个单元格 <br> <th> 类似<tr>通常用在第一行或最后一行 <br> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><table border="1" width="40%" > <!-- 40%会岁窗体大小变化 --> <caption>表格标题</caption> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr algin=”center”> <td>张三</td> <td>23</td> </tr></table></span></pre> <br> <p class="sycode"> 多行多列<td>： <br> colspan属性：控制一个单元格占多列 <br> rowspan属性：控制一个单元格占多行 </p> <p class="sycode"> <thead>、<tbody>、<tfoot>： <br> 三个标签都是放在table下，内部可以放tr标签 <br> <thead> 表头，通常用在第一行 <br> <tbody> 表体，表格中间的内容，可以有多个 <br> <tfoot> 表脚，通常用在最后一行 <br> <br> <br> </p> <h2>9、表单<form>重要<input></h2> <p class="sycode"> 表单标签<form>： <br> 内部可以包含文本框、单选、多选、下拉列表等表单项 <br> 可以把用户在页面中的输入和选择提交到一个地址 <br> 常用属性： <br> action：提交地址 <br> method：提交方式 </p> <p class="sycode"> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><form action="要提交的地址" method="get"> <input type="text" name="username"> <input type="password" name="password"> </form></span></pre> <br> <p class="sycode"> 输入项<input>： <br> 通过指定type属性可以定义不同的输入项： <br> text：普通文本框 <br> password：密码框 <br> radio：单选按钮 <br> checkbox：多选按钮 <br> file：文件 <br> hidden：隐藏字段 <br> submit：文本提交按钮 <br> image： 图片提交按钮 <br> reset：重置按钮 <br> button：普通按钮 <br> </p> <p class="sycode"> 下拉列表<select> <br> 默认为单选，multipe属性指定是否为多选 <br> size属性指定显示个数 <br> 内部用<option>标签指定其中选项 <br> </p> <p class="sycode"> 文本域<textarea> <br> rows属性指定行数 <br> cols属性指定列数 <br> 标签<label> <br> 可以用来方便点击或者设置快捷键 <br> <label><input type="radio"> 男</label> <br> <label for="user" accesskey="u">用户名(u)</label> <br> <input type="text" id="user" /> <br> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"> <form action="success.html" method="get"> <table width="50%" border="1" cellpadding="10" cellspacing="0"> <tr> <td>用户名：</td> <td><input id="user" name="username" type="text"></td> </tr> <tr> <td>密码：</td> <td><input name="password" id="pass"type="password"> </td> </tr> <tr> <td colspan="2" align="center"> <label><input type="radio" name="gender" value="male">男</label> <label><input type="radio" name="gender" value="female">女</label> </td> </tr> <tr> <td colspan="2" align="center"> <label><input type="checkbox" name="interest" value="smoke">抽烟</label> <label><input type="checkbox" name="interest" value="drink">喝酒</label> <label><input type="checkbox" name="interest" value="tangtou">烫头</label> </td> </tr> <tr> <td colspan="2" align="center"> <input type="file" name="portrait "> </td> </tr> <tr> <td>城市</td> <td> <select name="city"> <!--multiple="multiple" size="10" --> <option>-请选择城市-</option> <option value="bj">-北京-</option> <option>-广州-</option> <option>-成都-</option> <option>-上海-</option> </select> </td> </tr> <tr> <td>自我介绍</td> <td> <textarea name="rusume" rows="10" cols="30"> </textarea> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="注册"> <input type="image" src="../image/reg.gif"> <input type="reset" value="重填"> <input type="button" value="普通按钮" onclick="alert('你好！')"> </td> </tr> <label accesskey="u" for="user"></label><!-- 快捷键到指定id 仅ie支持 --> </table> <input type="hidden" name="xxx" value="ssss"> </form></span></pre> <br> <br> <br> <h2>10、注释<!-- --> 特殊字符</h2> <p class="sycode"> 特殊字符： <br> 一些特殊符号，比如< > & 等，在代码中会被浏览器识别并解释 <br> 所以用一些特殊的方式来表示 </p> <p class="sycode"> <br> </p> <p class="sycode"> </p> <p class="sycode"> 注释用<!-- 注释内容--> </p> <p class="sycode"> </p>
<h2> </h2> <br> </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="(10) Reasons and solutions for the failure of the ng-inlude directive to load the page_html/css_WEB-ITnose" href="https://m.php.cn/faq/275002.html">(10) Reasons and solutions for the failure of the ng-inlude directive to load the page_html/css_WEB-ITnose</a></span><span>Next article：<a class="dBlack" title="(10) Reasons and solutions for the failure of the ng-inlude directive to load the page_html/css_WEB-ITnose" href="https://m.php.cn/faq/275004.html">(10) Reasons and solutions for the failure of the ng-inlude directive to load the page_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/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="https://m.php.cn/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="https://m.php.cn/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="https://m.php.cn/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="https://m.php.cn/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><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><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>
