HTML网页的基本结构及基本功能

一、HTML网页的基本结构
1、HTML——超文本标记语言,浏览器解析html标记后,展示内容
2、H5——HTML5(目前流行比较火)
3、网页的基本结构
  3.1静态网页的拓展名htm或html
  3.2新建网页的步骤:
1、新建文本文档,更改拓展名为htm或html
2、编写网页的基本结构,并报春
3、双击html文件,在浏览器中运行
  3.3网页的基本结构
    <html>
      <head>
        <title>网页的标题</title>
        <body>网页显示的内容</body>
       </head>
    </html>
4、HTML语言的特点
     标记,大部分的都是成对存在
不区分大小写 H5区分大小写
浏览器解析HTML标记
二、使用相关的标签进行排版
1、网页的标题
  <title></title>
2、标题标签
  <h1>....<h6>数字越大 标题越小
3、段落标记——<p>[/P]可以有也可以没有
4、换行——<br/> [/]可以有野可以没有
5、水平线——<hr/>
6、字体加粗<strong></strong> 斜体<em></em>
7、HTML中的注释和特殊的符号--P15页
  注释:<!-- -->
  特殊符号 空格&nbsp; 大于号&gt; 小于号&lt;
  引号&quot;版权符号&copy;

三、在网页上插入图片
 <img src="图片地址" alt ""替换的文字
title ""鼠标悬浮停留时的文字 width ="宽" height"高"/>
ps:src属性必须有 其他的属性可以有可以没有
图片路径:相对路劲和绝对路径
1、相对路径,不出现有磁盘名字的路径
../表示上级目录
../../表示目录的上一级目录
2.绝对路径,有磁盘名字的路径
C:\Documents and Settings\Administrator\桌面
***网页中使用相对路径
四、超链接
1、通用语法:
<a href=路径target="-self丨blank"(前是当前页面打开,
后是新建宽口打开>超链接上的显示的文字</a>
2、作用:页面导航

3、锚链接P23.24
  1>先设置锚记
  <a name="锚记名" </a>
  2>超链接访问当前页面中的锚记?
  <a href="#锚记名”></a>
4、打开邮件发送邮件
  <a href="mailto:邮箱名“>点我发送邮件</a>

时间: 2024-10-21 20:59:59

HTML网页的基本结构及基本功能的相关文章

HTML网页的基本结构及基础功能

一.HTML网页的基本结构1.HTML--超文本标记语言,浏览器解析html标记后,展示内容2.H5--HTML5(目前流行比较火)3.网页的基本结构 3.1静态网页的拓展名htm或html 3.2新建网页的步骤:1.新建文本文档,更改拓展名为htm或html2.编写网页的基本结构,并报春3.双击html文件,在浏览器中运行 3.3网页的基本结构 <html> <head> <title>网页的标题</title> <body>网页显示的内容&l

关于网页脚本代码结构的再思考

在很多说法中,总是建议将我们的javascript脚本加载在网页的最后,并用外部文件的形式,然而事实并不是这样,外挂的文件最好不要太多,脚本结构代码本身才是值得我们思考的问题.我们需要重新思考我们撰写的脚本的执行力,并把更优秀的javascript开发思路融入到我们的开发中. 我在读完了几篇关于javascript和jQuery的性能优化的文章之后,才恍然大悟,我以前所做的很多代码结构优化,最终只是让乌徒帮显得臃肿,于是重新设计脚本代码的结构,无论怎么样,乌徒帮现在的网页打开显得更加流畅了. 1

Asp.Net Core中利用Seq组件展示结构化日志功能

在一次.Net Core小项目的开发中,掌握的不够深入,对日志记录并没有好好利用,以至于一出现异常问题,都得跑动服务器上查看,那时一度怀疑自己肯定没学好,不然这一块日志不可能需要自己扒服务器日志来查看,果然,很多东西没掌握,至此,花点时间看了下日志的相关操作.利用日志服务来查看日志数据. 本文地址:https://www.cnblogs.com/CKExp/p/9246788.html 本文Demo的地址:https://gitee.com/530521314/LogPanel.git 一.日志

Linux系统目录结构说明及功能介绍

Hello,大家晚上好!今天将给大家分享Linux系统中目录结构及各个目录的功能:本次的内容大纲如下: 1.Windows文件系统和Linux文件系统区别 2.Linux系统中目录结构说明及各个目录功能介绍 3.根文件系统子目录功能简单介绍 4.内容总结 一.Windows文件夹结构和Linux文件夹结构区别 先给大家上两张图片,如下:  图一.Windows系统截图 图二.Linux系统截图 第一副图片是在我们经常使用的Windows系统下截取而来:我们已经非常习惯C盘.D盘--的观念,对于第

JS动态更新HTML5 APP页面的结构(包括功能和布局)

HTML5 APP开发算是越来越流程了.当然,开发这样的HTML5 APP有什么好处呢.笔者认为:可以通过后台JS动态更新HTML5 APP页面的结构,是一大优势. 那如何实现该功能呢. 首先,得知道其原理:为什么可以通过后台JS就可以更新前台APP. 接着,得知道操作步骤是怎样的. 详细内容,可以查看如下链接: HTML5 APP 实现后台JS更新APP前端页面功能 HTML5 APP开发之动态调整页面布局 如需要源码,请@我 (一份完整的源代码,收费1元)

部门下拉框的树状结构展示小功能的实现

在OA项目中部门管理模块中,添部门需要选择上级部门,此时如果直接将所有的部门从数据库中查询出来,让用户选择是可以的,但是显示出来的效果,不是很友好,这样会导致用户体验不好,因此在这里,我们可以一个小技巧来实现一个好的显示效果,那就是简单的树状结构,如图: 改进前: 改进后: 这是页面的显示效果,因此很有可能大家会从jsp页面下手,但是仔细想想这样会较为麻烦,比较标签的操作不是web后台程序员擅长,同时在jsp中实现该功能并不容易,因此可以考虑在给jsp发送数据之前就将其排序完成,此时就涉及到遍历

借用JQuery在网页中实现分隔条的功能

在C/S系统中有专门的分隔条控件,很方便实现,但在Asp.net中却没有.本文介绍了一种使用JQuery技术实现分隔条的功能. Javascript代码如下,将该代码保存成JS文件后在HTML中引用. jsplit 1 jQuery.noConflict(); 2 jQuery.fn.extend({ 3 jsplit: function (j) { 4 return this.each(function () { 5 j = j || {}; 6 j.Btn = j.Btn || {}; 7

[2016-01-13][html][网页的基本结构]

html, body { font-size: 15px; } body { font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; line-height: 1.6; color: ; background-color: ; margin: 0; padding: 16px 20px; } h1, h2, h

SpringBootSecurity学习(10)网页版登录之记住我功能

场景 很多登录都有记住我这个功能,在用户登陆一次以后,系统会记住用户一段时间,在这段时间,用户不用反复登陆就可以使用我们的系统.记住用户功能的基本原理如下图: 用户登录的时候,请求发送给过滤器UsernamePasswordAuthenticationFilter,当该过滤器认证成功后,会调用RememberMeService,会生成一个token,将token写入到浏览器cookie,同时RememberMeService里边还有个TokenRepository,将token和用户信息写入到数