HTML第一天——浏览器、Sublime、标签、特殊符号

程序员文章站 2022-03-30 09:50:29

网页组成部分文字，图片，超链接，音频，视频常见浏览器IE，火狐，谷歌，safari（苹果），Opera浏览器内核　　　　作用：读取网页内容IE：　Trident火狐（Firefix）：　Gecko苹果（safari）：　webkit谷歌（chrome）/ Opera：　Blink移动端　安卓：　webkitweb标准结构：HTML样式：CSS行为：JS超文本标记语言</title&g...</div> <div class="content"> <h2> <a id="_0" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>网页组成部分</h2> <p>文字，图片，超链接，音频，视频</p> <h2> <a id="_2" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>常见浏览器</h2> <p>IE，火狐，谷歌，safari（苹果），Opera</p> <h2> <a id="%E3%80%80%E3%80%80%E3%80%80%E3%80%80_4" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>浏览器内核　　　　作用：读取网页内容</h2> <p>IE：　Trident<br> 火狐（Firefix）：　Gecko<br> 苹果（safari）：　webkit<br> 谷歌（chrome）/ Opera：　Blink</p> <p>移动端　安卓：　webkit</p> <h2> <a id="web_11" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>web标准</h2> <p>结构：HTML<br> 样式：CSS<br> 行为：JS</p> <h2> <a id="_15" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>超文本标记语言</h2> <pre><code class="prism language-css"><html> <head> <title> </title> </head> <body> </body> </html> </code></pre> <h2> <a id="_27" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>标签</h2> <p>标签分类：双标签，单标签<br> 标签关系：嵌套关系　　父子<br> 　　　　　并列关系　　兄弟</p> <h2> <a id="Sublime_31" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>Sublime</h2> <p>新建：Ctrl + N<br> 保存：Ctrl + S<br> 放大、缩小：Ctrl + 滚轮 / 加号、减号<br> 生成页面：“html:5” + tab<br> 　　　　　“!” + tab</p> <h2> <a id="DOCTYPE_html_37" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>!DOCTYPE html</h2> <p>意思：浏览器用H5解析页面</p> <h2> <a id="lang_39" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>lang</h2> <p>lang = “en”　　　　英文<br> lang = “zh-CN”　　中文</p> <h2> <a id="meta_42" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>meta</h2> <p>meta charset = “UTF-8”　　字符集<br> 　　　　　　　全球通用<br> gb2312　　简中<br> BIG5　　　繁中<br> GBK　　　简 + 繁</p> <h2> <a id="__48" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>标题标签</h2> <p>h1 —— h6<br> 一个页面　　h1 只能一次　　h2只能两次</p> <h2> <a id="_51" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>常用标签</h2> <p>段落　　　p<br> 水平线　　hr<br> 换行　　 br</p> <h2> <a id="_55" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>布局标签</h2> <p>div：没有语义，独占一行<br> span：没有语义，一行共存多个<br> 　　　（放特殊效果文字或小图标）</p> <h2> <a id="_59" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>其他标签</h2> <p>.　　　　　　强调<br> 加粗：　b　　string<br> 倾斜：　i　　 em<br> 删除线：s　　del<br> 下划线：u　　ins</p> <h2> <a id="%E3%80%80_%E3%80%80_66" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>图像标签　　单标签</h2> <pre><code class="prism language-css"><img src=<span class="token string">" "</span> alt title width height> </code></pre> <p>属性：alt　　　替换文本<br> 　　　title　　　悬停提示文本<br> 　　　width　　宽度<br> 　　　height　　高度</p> <h2> <a id="%E3%80%80_%E3%80%80_75" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>超链接　　双标签</h2> <pre><code class="prism language-css"><a href=<span class="token string">" "</span> target=<span class="token string">"_blank"</span>> </a> 跳转另起一个页面 </code></pre> <p>外部链接：http://…<br> 内部链接：… .html<br> 空链接：　 #<br> 图片、表格</p> <h2> <a id="_85" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>注释</h2> <p>html注释　　<！--　--><br> css　　　　　/*　*/<br> 快捷键：Ctrl + ?</p> <h2> <a id="_89" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>相对路径</h2> <p>同级路径：… .jpg<br> 下级路径：…/… .jpg<br> 上级路径：…/img/… .jpg</p> <h2> <a id="%E3%80%80%E3%80%80_93" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>锚点　　页面内部跳转</h2> <p>目标：id = "　"<br> 跳转按钮：href = "#　"</p> <h2> <a id="a_96" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>统一设置a打开方式</h2> <pre><code class="prism language-css"><base target = <span class="token string">"_blank"</span>> </code></pre> <h2> <a id="_101" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>特殊符号</h2> <pre><code class="prism language-css">&nbsp<span class="token punctuation">;</span> 空格 &lt 小于 &gt 大于 &copy 版权 </code></pre> <p>本文地址：https://blog.csdn.net/Aiello001/article/details/107206757</p> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/386869.html"> 华为发布十余款产品亮点不只是P20系列手机! </a> </p> <p> 下一篇： <a href="/article/386871.html"> element ui多选图片，一次性上传 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2294933.html" target="_blank" title="html iframe标签在手机UC浏览器中访问异常问题_html/css_WEB-ITnose"> <h2> html iframe标签在手机UC浏览器中访问异常问题_html/css_WEB-ITnose </h2> </a> </li> <li> <a href="/article/2259848.html" target="_blank" title="HTML5的video标签的浏览器兼容性增强方案分享"> <h2> HTML5的video标签的浏览器兼容性增强方案分享 </h2> </a> </li> <li> <a href="/article/2251353.html" target="_blank" title="HTML 5 标签、属性、事件及浏览器兼容性速查表附打包下载"> <h2> HTML 5 标签、属性、事件及浏览器兼容性速查表附打包下载 </h2> </a> </li> <li> <a href="/article/2248017.html" target="_blank" title="html5 浏览器支持如何让所有的浏览器都支持HTML5标签样式"> <h2> html5 浏览器支持如何让所有的浏览器都支持HTML5标签样式 </h2> </a> </li> <li> <a href="/article/2215718.html" target="_blank" title="HTML5的video标签的浏览器兼容性增强方案分享"> <h2> HTML5的video标签的浏览器兼容性增强方案分享 </h2> </a> </li> <li> <a href="/article/2206384.html" target="_blank" title="关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法"> <h2> 关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法 </h2> </a> </li> <li> <a href="/article/2188256.html" target="_blank" title="html5 浏览器支持如何让所有的浏览器都支持HTML5标签样式"> <h2> html5 浏览器支持如何让所有的浏览器都支持HTML5标签样式 </h2> </a> </li> <li> <a href="/article/2188306.html" target="_blank" title="HTML 5 标签、属性、事件及浏览器兼容性速查表附打包下载"> <h2> HTML 5 标签、属性、事件及浏览器兼容性速查表附打包下载 </h2> </a> </li> <li> <a href="/article/2188286.html" target="_blank" title="在IE6系列等老式浏览器中使用HTML5的新标签实现方案"> <h2> 在IE6系列等老式浏览器中使用HTML5的新标签实现方案 </h2> </a> </li> <li> <a href="/article/2172136.html" target="_blank" title="处理HTML5新标签的浏览器兼容版问题"> <h2> 处理HTML5新标签的浏览器兼容版问题 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>