HTML入门

最新推荐文章于 2023-05-03 22:19:26 发布
最新推荐文章于 2023-05-03 22:19:26 发布
阅读量234 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29784441/article/details/80947642
版权

HTML入门

概述

  • HTML/CSS/JS

C/S和B/S架构

  • C/S架构

    • client：客户端

    • server：服务器

  • B/S架构

    • browser：浏览器

    • server：服务器

工具

  • 编辑工具：notepad++

  • 测试工具：chrome

原理

  • 浏览器 => 服务器，发送请求，索要相关数据

  • 服务器 => 浏览器，返回数据(响应)，然后浏览器解析收到的数据，就会出现相应的效果

  • 组成：HTML、CSS、JS

HTML

  • 说明：超文本标记语言，所见即所得

  • 后缀：.html或.htm，统一使用.html

标签

  • 格式：

    • 双边：<标签名 属性1="值1" 属性2='值2' 属性3=值3>内容</标签名>

    • 单边：<标签名 属性1="值1" 属性2='值2' 属性3=值3 />

  • 特点：

    • 成对出现

    • 容错性强

    • 已经预定义

    • 全部小写，注意格式

  • 说明：标签就是HTML的组成部分

  • 01-first.html 
    <marquee direction="right" scrollamount='20' loop=1>今天是个好日子</marquee>

全局架构标签

  • 示例：

    <html>
 <!-- 注释 -->  <head></head>  <body></body> </html>

  • 说明：

    • html：所有的内容都要放在该标签中

    • head：存放头部，如：编码等

    • body：有效的内容，会出现在网页中

  • body属性:

    • text：字体颜色

    • bgcolor：背景色

  • 几乎每个标签都有的属性：

    • class、name、id、style

    • 可以在后面结合css及js使用

    • 02-global.html
<html>
    <!-- 注释 -->
    <head>
        
    </head>
    <body text="red" bgcolor="blue">
        这是页面的内容
    </body>
</html>

字符实体

  • 说明：在html中显示有特殊意义的内容，如：标签相关内容

  • 字符实体：用特定的一串字符代表某一个有特殊意义的字符

  • 示例：

    <：  &lt;
>:  &gt;
空格: &nbsp;
&： &amp；

  • 参考：http://www.w3school.com.cn

  • 03-shiti.html
  • <html>
    <head></head>
    <body>
        &lt;a&gt;百度一下&lt;/a&gt;
        sdhsk     jdksjaldj&nbsp;&nbsp;saldjasjdas
        &amp;
    </body>
</html>

     

常用标签(文本修饰)

  • h1 ~ h6：字体从大到小，表示标题，h1一个页面中最多一个，不要为了调整字体大小而使用。

  • 加粗：b、strong

  • 斜体：i、cite、em

  • 下划线：u

  • 中划线：s

  • 下标：sub

  • 上标：sup

  • 字体：font

    • size：大小

    • color：颜色

    • face：类型

  • 换行及空格：

    • br：换行标签，一段文本无论多长都不会换行，除非有用于隔断的空白

    • 空格：无论多少个空格，解析后都会变成一个

    • 回车：无论多少个，都会解析成一个空格

    • 04-wenben.html
<html>
    <head></head>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h6>六级标题</h6>
        
        正常字体
        <b>加粗字体</b>
        <strong>加粗字体</strong>
        <i>斜体</i>
        <cite>斜体</cite>
        <em>斜体</em>
        
        <u>鹅鹅鹅</u>
        
        <s>没用的东西</s>
        <br />
        内容<sub>下标</sub>
        内容<sup>上标</sup>
        <br />
        <font size="20" color="pink" face="宋体">这是一段需要修饰的文本</font>
        <br />
        asdh qwowiqrp iewp[peipeitopieptiepie [pwo[eoqw[oewpoeopwqpieoqo eiwueiouwqieuiwqueiuqwieuwiqueiwqueiuwiruy3reuwyiruefjsbjczn,nzksdlsjdaldjlajdlajkdlskaskdajdkjsadksahdjkashdjkshjdh sjkdajskhdklaljljwopwiouryutywey tiewiwotieytueyty
        
    </body>
</html>

常用标签(格式控制)

  • br：换行(单边标签)

  • p：段落

  • hr：分割线(单标标签)

  • marquee：滚动显示

  • pre：原样输出

  • ul：无序列表，每个元素都是li

    • type：disc(实心圆，默认)，circle(空心圆)，square(实心方块)

  • ol：有序列表，每个元素都是li

    • type：1、a、A、I

    • start：起始位置

    • 05-geshi.html
<html>
    <head></head>
    <body>
        女：在古代，姐的颜值可以撑起整个青楼<br />
        男：(若有所思)，你的意思是你长的像柱子
        <hr />
        <p>火箭（60-14）取得9连胜，队史首次单赛季达到60胜。詹姆斯-哈登只打了前三节，打出三双，贡献18分、15次助攻和10个篮板，埃里克-戈登22分，特雷沃-阿里扎14分，克林特-卡佩拉14分8个篮板，PJ-塔克12分。替补出场的杰拉德-格林得了25分7个篮板，周琦打了3分钟，得2分2个篮板，没有失误。火箭投中20记三分。[为周琦加油为火箭打call！篮球大师更多神迹等你来创造]</p>
        <p>老鹰（21-53）三连败，继续在东部垫底。陶里安-普林斯拿下了28分6个篮板，伊塞亚-泰勒26分，替补出场的泰勒-多西16分。【技术统计】</p>
        <hr />
        <pre>
        从今天开始，我们步入了新的阶段，进行学习
        主要的内容是前端，包括：html、css、js
        今天首先讲的时html，我对前端的认识加深了许多
        </pre>
    </body>
</html>
　　　　06-liebiao.html
<html>
    <head></head>
    <body>
        <ul type="disc">郑州市
            <li>二七区</li>
            <li>金水区</li>
            <li>中原区</li>
            <li>高新区</li>
        </ul>
        <ol type="I" start="3">
            <li>河南省</li>
            <li>河北省</li>
            <li>山东省</li>
            <li>山西省</li>
            <li>湖北省</li>
            <li>湖南省</li>
        </ol>
    </body>
</html>

 

练习：

  • 每个标签至少3遍

  • 建议：可以参考网页书写

  • 有精力可以预习(适当的学习几个常用标签)，a、img、video、table、form、input

统一资源定位符(URL)(重点)

超链接(重点)

  • 名称：a

  • 说明：超链接，可以完成点击跳转功能

  • 属性：

    • href：指定跳转地址

    • title：光标放上去时的提示信息

    • target：指定跳转打开的方式

      • _self：覆盖当前页面，默认的

      • _blank：在新页面中打开

      • _top：覆盖嵌套的最顶层打开页面

      • _parent：覆盖父级页面

    • name：设置锚点，用于跳转定位

      • 设置后就可以在其他a标签的href中指定该位置

      • 如：<a href="#p5"></a> <a name="p5">第5章</a>

      • 说明：不但可以在一个网页中跳转，还可以跨页面跳转。

      • 01-chaolianjie.html
<html>
    <head></head>
    <body>
        <a href="http://www.baidu.com" title="百度" target="_self">百度一下</a>
        <a href="http://www.baidu.com" title="百度" target="_blank">百度一下</a>
        <a href="#p5">第5章</a>
        <p><a name="p1">第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p>
        <p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p>
        <p><a name="p5">第5章</a><a href="#p1">返回第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p>
        <p><a>第8章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p>
        <p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p>
    </body>
</html>

     02-maodian.html

<a href="01-chaolianjie.html#p5">去第5章</a>

多媒体标签

  • img：图片(重点)

    • src：指定图片资源位置

      • 相对路径：只写文件名或者指定目录下的文件等

      • 绝对路径：使用/开头，或者指定完整URL

    • width：设置宽度

    • height：设置高度

    • title：设置提示信息，图片加载失败是也会显示

  • audio：音频

    • controls：控制按钮

    • loop：是否循环播放

    • autoplay：是否自动播放

  • video：视频

    • 属性与audio一致，但是多出来一些

    • 多出来：width、height

    • 同时设置宽高，不成比例的地方会显示空白

    • 03-duomeiti.html
<html>
    <head>
        <meta charset="utf-8" />
        <title>多媒体测试</title>
    </head>
    <body>
        <img src="http://img3.xiazaizhijia.com/walls/20160708/mid_2f172c09d079701.jpg" width="300px" height="200px" title="美女"/>
        <br />
        
        <audio src="小苹果.mp3" controls loop></audio>
        <br />
        
        <video src="搞笑视频.mp4" controls width="200px" height="300px"></video>
    </body>
</html>

表格(table)

  • 说明：类似于excel的格式

  • table：表格标签，所有表格的东西都要放在其中

    • border：边框尺寸

    • width：宽度

    • height：高度

    • align：对齐方式(left、center、right)

    • bgcolor：背景色

    • bordercolor：边框颜色

  • tr：表格中的一行

    • bgcolor：背景色

    • align：水平对齐方式(left、center、right)

    • valign：垂直对齐方式(top、middle、bottom)

  • td：一行中的一列，也就是一个单元格

    • rowspan：行合并

    • colspan：列合并

  • th：与td相似，但是会加粗，用于强调，设置表头

  • caption：表的标题，用于描述整个表格的用途

  • 04-table.html
<html>
    <head>
        <title>表格</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <table border="1" bordercolor="red" width="500px" height="300px" align="center" cellspacing="0" cellpadding="10" bgcolor="blue">
            <caption>学生信息统计表</caption>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr align="center">
                <td colspan="2">1</td>
                <td align="right" rowspan="2">3</td>
            </tr>
            <tr valign="middle">
                <td>4</td>
                <td>5</td>
            </tr>
        </table>
    </body>
</html>

分帧(iframe)

  • 说明：就是一个页面中包含另一个页面

  • 属性：

    • frameborder：有无边框(0、1)

    • scrolling：滚动条(no、yes、auto)

    • name：指定名字，可以用于a标签跳转的目标

    • width、height、src

05-iframe.html

<html>
    <head>
        <title>分帧iframe</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <a href="http://www.baidu.com" target="test">百度一下</a><br />
        <iframe name="test" src="06-test.html" width="800px" height="600px" frameborder="1" scrolling="yes"/>
    </body>
</html>

06-test.html

<p>这是一个新页面</p>

分帧(frameset)

  • 说明：替代body定义网页框架，而且可以指定尺寸或比例

  • frameset：分帧结构

    • rows：上下分配尺寸，可以通过像素，也可以设置百分比，*表示其他剩余部分

    • cols：左右分配尺寸，用法同上

    • noresize：禁止重新设置大小

    • frameborder：是否显示每一帧的边框

    • border：帧的边框宽度

    • bordercolor：边框的颜色

  • frame：每一帧，可以添加一个页面

  • noframes：针对不支持framset的浏览器的设置

  • 07-frameset.html
<html>
    <head>
        <title>分帧frameset</title>
        <meta charset="utf-8" />
    </head>
    <frameset rows="100, *" noresize frameborder="1" border="20" bordercolor="red">
        <frame src="http://www.baidu.com" />
        <frameset cols="20%, *">
            <frame src="http://www.163.com" />
            <frame src="http://www.sohu.com" />
        </frameset>
        <noframes>
            <body>大哥，你的浏览器有点low啊</body>
        </noframes>
    </frameset>
</html>

08-frameset.html

<html>
    <head>
        <title>分帧测试</title>
        <meta charset="utf-8" />
    </head>
    <frameset rows="50, *">
        <frame src="08-top.html" />
        <frameset cols="20%, *">
            <frame src="08-left.html" />    
            <frame src="08-right.html" name="right" />    
        </frameset>
    </frameset>
</html>

08-left.html

<html>
    <head>
        <title>left</title>
        <meta charset="utf-8" />
    </head>
    <body bgcolor="green">
        <a href="http://www.baidu.com" target="right">百度一下</a><br />
        <a href="http://www.sohu.com" target="right">搜狐新闻</a>
    </body>
</html>

08-right.html

<html>
    <head>
        <title>right</title>
        <meta charset="utf-8" />
    </head>
    <body bgcolor="blue">
    
    </body>
</html>

08-top.html

<html>
    <head>
        <title>top</title>
        <meta charset="utf-8" />
    </head>
    <body bgcolor="red">
    
    </body>
</html>

表单(form)(非常重要)

  • 说明：收集用户信息，经常用于用户的注册、登录等场景

  • form：表示表单标签，所有要提交的数据都必须放在其中

    • action：指定提交的地址

    • method：指定提交的方式，get、post、put、delete

      • get：提交时参数会出现在URL中

      • post：提交时参数不会出现在URL中

  • input：输入框，表单中的最重要的组成部分

    • type:

      • text：普通文本，默认

      • password：密文文本

    • name：设置input的名字，否则无法提交数据

09-form.html

<html>
    <head>
        <title>表单</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <form action="09-test.html" method="post">
            用户名:<input type="text" name="username" /><br />
            密&nbsp;&nbsp;&nbsp;码:<input type="password" name="password" /><br />
            <input type="submit" />
        </form>
    </body>
</html>

09-test.html

<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        登录验证中...
    </body>
</html>

练习：

  • 写一个3*3的表格，需要有标题、表头、内容显示，要求合并1和4，8和9

  • 写一个分帧页面，点击有联动的效果，功能不限

  • 写一个表单，能使用post方法进行提交

    • 自学input的其他类型和新的标签

    • 完成：用户名、密码、性别(单选)、爱好(复选)、省份(下拉)、简介(文本域)、提交按钮

    • 若想对齐，可以将上面的内容放在表格中


编程小僧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML入门标签
10-11
比较详细的HTML标签，常用到的标签都包括在内了。新手可以看看
html入门学习.zip
01-01
html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html...
web前端学习26（锚点链接）
weixin_51249285的博客
10-28 4394
文章目录4.7.2 链接分类 4.7.2 链接分类 锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。 在链接文本的href属性中，设置属性值为#名字的形式，如< a href="#two">第2集< /a> 点完这个链接就会跳转到某个位置 找到目标位置标签，里面添加一个id属性=刚才的名字，如: < h3 id=“two”>第2集介绍< /h3> 到目标位置添加id属性，就可以跳转到这个位置 例： 锚点定位.html <!D
HTML锚点链接
W2279567793的博客
04-14 2万+
HTML锚点链接 什么是锚点链接：锚点链接是超链接的一种，形式和超链接有所不同，利用锚点链接主要就是为了在一个页面中更加方便的跳转到某个位置。使用的场景就是在一个过长的页面中方便用户能够跳转到自己想去的相应位置 锚点链接的具体使用场景： 我是头部 去底部 <a href="#" name="top"></a> 1.跳转到当前页面的指定位置 方法一 1.设置一个锚点链接我是锚点一；（注意：href属性的属性值最前面要加#） <a href="#miao">去找锚点
锚点链接
AshesO的博客
09-07 2027
文章目录前言一、锚点链接二、使用步骤总结 前言 直到今天为止，学习前端已经十多天的时间，目前的进度是已经将HTML和CSS基本熟悉，了解了HTML5和CSS3的部分语法，移动端刚刚起头。基本是紧贴着网络课程的进度。 在十多天前初次接触博客，但苦于没有时间钻研，不懂得如何写博客，所以没有写下去。在今天，我担心以前学过的知识淡忘，又想起了博客这个交流平台，想对所学的知识做一个总结，巩固记忆。 个人写博客是为了记录自觉是比较难记忆的知识。 一、锚点链接 锚点链接是通过对<a>指定到达的 id
锚点链接...
weixin_30652271的博客
06-19 252
html锚点(mao dian)--特殊的超链接 锚点(anchor)：其实就是超链接的一种，一种特殊的超链接 普通的超链接，<a href="路径"></a>是跳转到不同的页面 而锚点，<a href="路径"></a>可以在同一个页面中不同的位置间跳转 可以看到，跳转到锚点的超链接跟普...
html 超链接之锚点
菜鸟自学博客
09-04 3万+
什么是锚点：锚点就是定位器！ 不跨页锚点 1.设置锚点 <a name="one">第一章</a> 2.设置启动定位器的开关 <a herf="#one">点我跳转第一章 </a> 跨页锚点 1.设置锚点 <a name="one">第一章</a> 2.设置启动定位器的开关 <a herf="要跳转的页面名称.ht...
HTML入门（详细）
qq_63525426的博客
05-03 1万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 21万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
Html入门练习
道亦无名
06-28 2万+
开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 - 等标签进行定义的。 2、HTML 段落 HTML 段落是通过 标签进行定义的。 3、HTML 链接 HTML 链接是通过 标签进行定义的。 4、HTML 图像 HTML 图像是通过 标签进行定义的。 5、HTML 元素 HTML 元素指的是从开始标签
HTML 入门资料Demo
01-23
HTML 入门手册(一)：https://shuaici.blog.csdn.net/article/details/135680716 HTML 入门手册(二)：https://shuaici.blog.csdn.net/article/details/135698613 HTML 英文全称 " HyperText Mark-up Language " , ...
学习html入门
12-24
简单的HTML入门，超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
HTML入门学习及笔记.zip
01-01
HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记...
android手机应用源码Imsdroid语音视频通话源码.rar
05-20
android手机应用源码Imsdroid语音视频通话源码.rar
营销计划汇报PPT，市场品牌 推广渠道 产品 营销策略tbb.pptx
05-20
营销计划汇报PPT，市场品牌 推广渠道 产品 营销策略tbb.pptx
JavaScript_超过100种语言的纯Javascript OCR.zip
05-20
JavaScript
JavaScript_跨平台React UI包.zip
05-20
JavaScript
node-v16.17.0-headers.tar.xz
最新发布
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
html入门基础知识
10-08
HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它由一系列的标签组成，这些标签被用来定义和呈现网页的内容和结构。HTML中的基本概念包括标签、元素、属性和文本内容。 标签是用尖括号括起来的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值