HTML前端知识

一、课程介绍说明

1) HTML语言概念介绍
2) HTML语言代码编写

二、课程梳理回顾

1) 网络安全课程介绍 3个月时间
2) 网络安全法律法规
3) 网络安全基础知识 名词介绍
4) 网络安全病毒编写 bat批处理文件
5) 网络安全基础防护

三、HTML语言概念介绍

为了编写网页信息
1) HTML代码语言作用
2) HTML代码基本编写方法
3) HTML代码编写练习
windows系统特点: 识别文件类型时,会根据文件扩展名称进行识别

四、 HTML语言代码编写方法:

4.1 HTML元素概念

  • HTML元素就是预定义好的一些标签,不同标签有不同功能作用 </code></li> <li>HTML元素属性, 对指定元素进行扩展功能配置</li> <li>PS: 编写HTML代码信息时,文件中一定不能出现中文符号信息</li> </ul> <h3>4.2 HTML基本标签信息: 基本元素信息</h3> <ul> <li><code><p></p></code> --- 段落标签可以自动换行,段落之间会有间距</li> <li><code><hn></hn></code> --- 设置标题信息,一般标题信息的范围 是 <code>n=1~6</code></li> <li><code><br></code> --- 设置字符内容中换行信息</li> <li><code><!-- This is a comment --></code> --- 在指定代码位置添加注释说明信息, 注释信息不会显示在页面上</li> <li>元素属性:<code>align="center"</code> --- 设置字符信息居中显示center/局右显示right/居左显示left</li> </ul> <h3>4.3 HTML格式设置方法</h3> <ul> <li><code><strong></strong></code> --- 将指定字符串信息进行加粗处理</li> <li><code><pre></pre></code> --- 将代码编写的格式信息,呈现在页面上(主要可以控制换行和空格信息)</li> <li><code><address><address></code> --- 定义一些地址描述信息,主要会以斜体方式进行显示</li> <li><code><blockquote></blockquote></code> --- 表示对指定内容进行缩进显示</li> <li><code><del></del></code> --- 将指定信息删除, 用一个横线划除</li> <li><code><ins></ins></code> --- 将指定信息插入, 用下划线进行标记</li> </ul> <h3>4.4 HTML实体化介绍</h3> <ul> <li>如果想让一些特殊符号信息,直接在页面显示,就需要进行实体化处理</li> </ul> <h3>4.5 HTML超链接:</h3> <ul> <li><code><a href="http://www.microsoft.com/">This text</a></code></li> </ul> <p>将指定文件做超链接处理</p> <ul> <li><code><a href="lastpage.htm"><img border="0" src=".\images\next.gif"></a></code></li> </ul> <p>将指定图片做超链接处理</p> <ul> <li>标签属性:</li> </ul> <p><code>target="_blank"</code> : 在原有窗口链接时,新开启一个窗口进行显示</p> <h3>4.6 HTML框架:</h3> <ul> <li>将浏览器页面进行拆分出多个不断页面,便于对页面信息的编写</li> </ul> <p>利用框架可以将多个信息进行整合</p> <h3>4.7 HTML表格</h3> <ul> <li><code><table><table></code> --- 创建表格信息</li> <li><code><tr></code> --- 表格行信息</li> <li><code><td></code> --- 表格列信息</li> <li><code><th></code> --- 表格头部信息</li> <li>标签属性:<code>border</code> --- 设置表格边框 实现显示边框 虚线显示边框</li> </ul> <h3>4.8 HTML列表功能</h3> <ul> <li><code><ul></ul></code> --- 生成列表信息标签-无序</li> <li><code>type="square"</code> --- 无序列表前的一个符号信息</li> <li><code><ol></ol></code> --- 生成列表信息标签-有序</li> <li><code><dl></dl></code> --- 自定义列表内容信息</li> </ul> <p>作用说明: 编写菜单功能 编写目录结构功能</p> <h3>4.9 HTTML表单信息:</h3> <p>可以生成输入框内容,在输入框中可以填写信息,最后可以用于向后端服务进行提交</p> <ul> <li><code><form></form></code> --- 设置表单标签信息</li> <li><p><code><input type="text" name="user"></code> --- 设置表单输入框</p> <hr><p>作者:陈婷 </p><p>日期:2020年9月20日</p></li> </ul> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1327786703838060544"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 动态广告位2 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/104.htm" title="springmvc 下 freemarker页面枚举的遍历输出" target="_blank">springmvc 下 freemarker页面枚举的遍历输出</a> <span class="text-muted">杨白白</span> <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/freemarker/1.htm">freemarker</a> </li> <li><a href="/article/231.htm" title="实习简要总结" target="_blank">实习简要总结</a> <span class="text-muted">byalias</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> </li> <li><a href="/article/358.htm" title="Quartz——DateIntervalTrigger触发器" target="_blank">Quartz——DateIntervalTrigger触发器</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a> </li> <li><a href="/article/485.htm" title="Unix快捷键" target="_blank">Unix快捷键</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/Unix%EF%BC%9B%E5%BF%AB%E6%8D%B7%E9%94%AE%3B/1.htm">Unix;快捷键;</a> </li> <li><a href="/article/612.htm" title="获取Android设备屏幕的相关参数" target="_blank">获取Android设备屏幕的相关参数</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> </li> <li><a href="/article/739.htm" title="要做物联网?先保护好你的数据" target="_blank">要做物联网?先保护好你的数据</a> <span class="text-muted">蓝儿唯美</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE/1.htm">数据</a> </li> <li><a href="/article/866.htm" title="Java取模(求余)运算" target="_blank">Java取模(求余)运算</a> <span class="text-muted">随便小屋</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> </li> <li><a href="/article/993.htm" title="SQL注入介绍" target="_blank">SQL注入介绍</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/sql%E6%B3%A8%E5%85%A5/1.htm">sql注入</a> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a href="javascript:void(0)">设为首页</a> - <a href="javascript:void(0)">加入收藏</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.xml">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. <a href="http://www.beian.miit.gov.cn" rel="nofollow" target="_blank">京ICP备09083238号</a><br> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>