0

0

认识HTML_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:34:33

|

1446人浏览过

|

来源于php中文网

原创

基本框架:

 1 <html>  2 <head>  3 <title>This Is Title</title> 4 </head> 5  6 <body> 7 <h1><!--一级标题--></h1> 8 <h2><!--二级标题--></h2> 9 <p>10 <!--段落-->11 </p>12 </body>13 </html>

注释:

  • 和告诉浏览器文件的内容是HTML
  • 被和包围的首部(head)告诉浏览器关于web页面的信息
  • head标记中放入title标记,title出现在浏览器窗口
  • 页面的主体包括和标记以及他们之间的所有内容,是浏览器中看到的部分
  • 元素 = 开始标记 + 内容 + 结束标记
  • style,CSS

     

    立即学习前端免费学习笔记(深入)”;

    AI Web Designer
    AI Web Designer

    AI网页设计师,快速生成个性化的网站设计

    下载

     1 <head>                     2     <title>This Is Title</title> 3          4     <style type="text/css"> 5                 body{ 6                     background-color: #eaf;     7                     margin-left: 20%; 8                     margin-right: 20%; 9                     border: 2px dotted black;10                     padding: 10px 10px 10px 10px;11                     font-family: sans-serif;12                 }13     </style>14 </head>

    注释:

  • style指定样式为CSS
  • background-color :背景色
  • margin-left,margin-right:左右外边距分别占页面的20%
  • border:页面周围边框为虚线,颜色为黑色
  • padding:在页面主体周围创建一些内边距
  • font-family:定义文本使用的字体
  •  

    立即学习前端免费学习笔记(深入)”;

    HT(hypertext)

     

    立即学习前端免费学习笔记(深入)”;

    1 <a href = "beverages/elixir.html" > elixirs </a>2 <a href = "http://www.cnblogs.com/JJ-kelion/" title = "Read His blogs" > cnblogs jj-kelion </a>3 <a href = "../index.html" > RETURN </a>4 <a target = "_blank" href="beverages/elixir.html"> <img  src="images/j.png" alt="认识HTML_html/css_WEB-ITnose" > </a>

    注释:

  • 使用从一个页面链接到另一个页面
  • 的属性指定了链接的目标文件
  • 元素的内容是链接的标签。默认的,这个标签有下划线,指示可以单击的
  • 文字和图像都可以用作链接的标签
  • 使用“..”可以链接到源文件的上一层文件夹的一个文件,".."代表父文件夹。
  • “/”用来分隔路径的图像
  • 示图:

    ,

     

    立即学习前端免费学习笔记(深入)”;

    1 <blockquote>2     Passing cars, 3     when you can't see, 4     A glimpse, 5 </blockquote>6 7 <p>8     <q> passing car </q>,when you can't see.9 </p>

    注释:

  • :双引号,短引号,作为现有段落的一部分
  • :较长引用,单独显示,为块元素

  • :换行符
  •  

    立即学习前端免费学习笔记(深入)”;

     

    立即学习前端免费学习笔记(深入)”;

     1 <ol> 2     <li> one </li> 3     <li> two </li> 4     <li> three </li> 5     <li> four thing  6         <ul> 7             <li> one </li> 8             <li> two </li> 9             <li> three </li>10         </ul>11     </li>12 </ol>

    注释:

    1. :ordered list  有序
    • : unordered list 无序
  • : 用来标识每个元素
    1. 或者
      • 总是要一起使用
      •  

        立即学习前端免费学习笔记(深入)”;

         

        URL

         

        立即学习前端免费学习笔记(深入)”;

         1 URL: 2     http://www.cnblogs.com/JJ-kelion/ 3          4     <a href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a> 5          6     <!--为标题的开始增加标记--> 7     <h2 id="chai"> Chai Tea </h2>   8     <!--用可用ID链接到元素--> 9     <a href="top.html/#chai" title="read chai"> Chai tea </a>10     <!--打开新窗口-->11     <a target="_blank" href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a>    

        注释:

      • URL:域名,用来唯一标识网站
      • 为了便于访问,在元素中使用title元素
      • 使用target属性在另一个浏览器窗口中打开链接。
      •  

        立即学习前端免费学习笔记(深入)”;

        使用图像:

         

        立即学习前端免费学习笔记(深入)”;

        幕后步骤:

      1. 浏览器从服务器获取文件“jj-kelion.html”
      2. 读取“jj-kelion.html”,发现有n个图像需要获取
      3. 从服务器逐个得到图像,从第一开始,显示完后,转向下一个图

      常用图片格式:

    2. JPEG
    3. PNG
    4. GIF
    5. 格式分析:

    6. JPEG:适合连续色调图像,可以表示千万种颜色,有损格式,不支持透明和动画
    7. PNG:适合单色和线条构成图,是一种无损格式,允许透明,
    8. GIF:最适合单色图和线条图,最多256种颜色,支持透明,无损格式,支持动画。
    9. 总结:

    10. JPEG和PNG擅长表示logo和文本图像;
    11. JPEG擅长照片
    12. 需要透明和多种颜色:选择PNG
    13.  

      立即学习前端免费学习笔记(深入)”;

       

      立即学习前端免费学习笔记(深入)”;

      认识HTML_html/css_WEB-ITnose

       

      立即学习前端免费学习笔记(深入)”;

      1 <img  src="images/jj.png" alt="认识HTML_html/css_WEB-ITnose" ><br>2 <img  src="http://www.cnblogs.com/JJ-kelion/images/corporate/ceo.jpg" alt="认识HTML_html/css_WEB-ITnose" ><br>3 <img src="images/jj.png" alt="a picture"><br>4 <img  src="images/jj.png"    style="max-width:90%"  style="max-width:90%" alt="认识HTML_html/css_WEB-ITnose" ><br>  <!--使用缩略图-->5 <a href="big picture"> <img src="small picture" alt="a picture">  </a>

      注释:

    14. src不只是用于相对链接,还可以放入URL
    15. 相同网站上的链接和图像,最好使用相对链接
    16. 如果图像未能显示,就会用alt属性指定的描述图像的文本代替图像
    17. 创建缩略图步骤:

      1. 为缩略图创建一个目录
      2. 将各个分辨率降低后的照片存入文件夹中
      3. 将页面中的各个认识HTML_html/css_WEB-ITnose元素的src设置为缩略版的
      4. 增加从缩略图到一个新页面显示大图的链接

       

      立即学习前端免费学习笔记(深入)”;

      HTML5

       

      立即学习前端免费学习笔记(深入)”;

      指南:

    18.   首行
    19. alt属性为必要的
    20. 指定字符编码,在首部中的首行,
    21. 验证代码工具:http://validator.w3.org
  • 相关文章

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    Golang 测试体系与代码质量保障:工程级可靠性建设
    Golang 测试体系与代码质量保障:工程级可靠性建设

    Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

    6

    2026.02.28

    Golang 工程化架构设计:可维护与可演进系统构建
    Golang 工程化架构设计:可维护与可演进系统构建

    Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

    6

    2026.02.28

    Golang 性能分析与运行时机制:构建高性能程序
    Golang 性能分析与运行时机制:构建高性能程序

    Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

    8

    2026.02.28

    Golang 并发编程模型与工程实践:从语言特性到系统性能
    Golang 并发编程模型与工程实践:从语言特性到系统性能

    本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

    14

    2026.02.27

    Golang 高级特性与最佳实践:提升代码艺术
    Golang 高级特性与最佳实践:提升代码艺术

    本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

    17

    2026.02.27

    Golang 测试与调试专题:确保代码可靠性
    Golang 测试与调试专题:确保代码可靠性

    本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

    2

    2026.02.27

    漫蛙app官网链接入口
    漫蛙app官网链接入口

    漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

    130

    2026.02.27

    deepseek在线提问
    deepseek在线提问

    本合集汇总了DeepSeek在线提问技巧与免登录使用入口,助你快速上手AI对话、写作、分析等功能。阅读专题下面的文章了解更多详细内容。

    8

    2026.02.27

    AO3官网直接进入
    AO3官网直接进入

    AO3官网最新入口合集,汇总2026年可用官方及镜像链接,助你快速稳定访问Archive of Our Own平台。阅读专题下面的文章了解更多详细内容。

    208

    2026.02.27

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    PHP基础入门课程
    PHP基础入门课程

    共33课时 | 2.2万人学习

    Vue3.0 极速入门教程
    Vue3.0 极速入门教程

    共55课时 | 5.8万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号