第一天

总结:

  1. h1-h6 p 段落 hr br
  2. 有序 ol li 无序 ul li 定义列表 dl dt dd
  3. 块级元素：独占一行，h1-h6 p hr div
  4. 行内元素：共占一行, em和i strong和b u del和s span
  5. 块级分区元素：div header nav article footer
  6. 行内分区元素：span
  7. 特殊字符： 空格：&nbsp   小于号:<  &lt    大于号:>  &gt
  8. 图片 <img alt="图片不能正常显示的时候显示此内容" src="路径" width/height="100px / 50%" title="鼠标悬停时显示的内容">
  9. 图片地图

细节:

文本标签:

  1. h1-h6 内容标题标签，内容独占一行 属性：align=left/right/center
  2. p 段落标签 内容独占一行
  3. hr 水平分割线
  4. br 换行

代码实现:

<!-- 文档声明,告诉浏览器使用哪个版本的标准解析此页面,

此写法是最高版本h5的写法 -->

<!DOCTYPE html>

<html><!-- 除了声明所有的标签都在html标签内部 -->

    <head><!-- 头:里面的内容是给浏览器看的 -->

        <!-- 告诉浏览器页面的字符集 -->

        <meta charset="UTF-8">

        <!-- 页面标题,显示在浏览器的选项卡中 -->

        <title>文本标签</title>

    </head>

    <body><!-- 体:里面的内容是给用户看的 -->

        <h1 align="center">我是老大</h1>

        <h2 align="right">我是老二</h2>

        <h3>我是老三</h3>

        <h4>我是老四</h4>

        <h5>我是老五</h5>

        <h6>我是老六</h6>

        <hr>

        <p>我是段落标签1</p>

        <p>我是段落标签2</p>

        <p>我是段落标签3</p>

        开始学习HTML了<br>你开心吗?

    </body>

</html>

列表标签:

  1. ul 无序列表 子标签<li></li>
  2. ol 有序列表  属性:type=1/a/A/i/I  reverserd="reverserd"  start="10" 子标签<li></li>
  3. dl 定义列表 子标签:<dt></dt>   <dd></dd>
  4. 有序列表和无序列表之间可以相互嵌套

代码实现:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>列表标签</title>

</head>

<body>

    <h3>无序列表:</h3>

    <ul type="square"><!-- type="square/circle/disc"前面的小标记样式 -->

        <li>刘备</li>

        <li>貂蝉</li>

        <li>项羽</li>

        <li>狄仁杰</li>

        <li>吕布</li>

    </ul>

    <h3>有序列表:</h3>

    把大象关进冰箱需要几步?

    <ol reversed="reversed" start="10"><!-- 从10开始倒序 -->

        <li>打开冰箱门</li>

        <li>把大象装进冰箱</li>

        <li>关上冰箱门</li>

    </ol>

    <h3>定义列表</h3>

    <dl><!-- defined定义  list列表 -->

        <dt>凉菜</dt><!-- defined  title标题 -->

        <dd>大拌菜</dd><!-- defined  data数据 -->

        <dd>花毛一体</dd>

        <dd>拍黄瓜</dd>

        <dt>炒菜</dt>

        <dd>宫保鸡丁</dd>

        <dd>木须肉</dd>

        <dd>小炒肉</dd>

    </dl>

    <h3>列表嵌套:</h3><!-- 嵌套有两种方式 -->

    <ol>

        <li>ol1</li>

        <li>ol2

        <!-- 1.嵌套在<li></li>里面 -->

            <ul>

                <li>第二层1</li>

                <li>第二层2</li>

                <!-- 2.嵌套在<li></li>下面 -->

                    <ol>

                        <li>第三层1</li>

                        <li>第三层2</li>

                        <li>第三层3</li>

                    </ol>

                <li>第二层3</li>

            </ul>

        </li>

        <li>ol3</li>

    </ol>

</body>

</html>

特殊字符:

  1. 空格:&nbsp;
  2. <     :&lt;
  3. >     :&gt;

代码实现:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>特殊字符</title>

</head>

<body>

我爱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学习<br>

&lt;我爱学习&gt;

</body>

</html>

分区标签:

  1. 分区标签自身没有显示效果，可以充当容器的作用，用于包含多个功能相关元素，可以进行元素的整体控制。

  2. div：块级分区元素，独占一行

  3. span：行内分区元素，和其它行内元素共占一行

  4. 开发页面时通常会分为三大区

    头部

    体部

    脚部

  5. H5标准中新增的分区标签 作用和div一样 但是更直观

　　　　头部

　　　　导航

　　　　文章，正文脚部

代码实现:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>块级元素和行内元素</title>

</head>

<body>

<h3>分区标签</h3>

    <div>div1</div>

    <div>div2</div>

    <div>div3</div>

    <span>span1</span>

    <span>span2</span>

    <span>span3</span>

    <h3>H5新增分区标签</h3>

    <header>头部区域</header>

    <nav>导航区域</nav>

    <article>正文区域</article>

    <footer>脚步区域</footer>

</body>

</html>

图片img:

  • 路径分为两种：

  1. 相对路径： 访问站内资源使用相对路径 a.图片和页面同一目录，直接写图片名称 b.图片在页面的上级目录, ../图片名 c.图片在页面的下级目录, 文件夹名/图片名

  2. 绝对路径： 访问其它网站的资源使用绝对路径，以http开头，存在风险，如果目标图片路径发生改变则不能显示

  • 常用属性：

  1. alt: 当图片不能正常显示的时候显示此内容

  2. title： 当鼠标在图片上悬停的时候显示此内容

  3. width/height: 设置图片的宽度和高度，可以设置像素px或百分比%，如果只设置宽度则高度等比例缩放

  • 支持的图片格式： jpg/jpeg不支持透明色 png支持透明色 GIF动图

代码实现

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<!-- 当图片不能正常显示的时候显示此内容 -->

<!-- 图片路径

1.相对路径:显示站内资源使用相对路径

    a.图片和页面同一目录,直接写图片名称 a.jpg

    b.图片在页面的上级目录, ../water.jpg(上两级../../xxx)

    c.图片在页面的下级目录, abc/tiger.jpg

2.绝对路径:通常以http开头,访问站外资源使用绝对路径,

         访问站外资源也称为图片盗链

         目标图片路径发生改变,则不能正常显示

 -->

 <!-- 支持的图片格式:jpg/jpeg不支持透明色   png支持透明色  gif动图 -->

 <!-- title:鼠标悬停时显示的内容 -->

 <!-- width/height 值为像素px或百分比,

 如果只设置宽,则高度会等比缩放 -->

<img alt="这是一个美女" src="a.jpg">

<img alt="这是一片风景" title="这是标题" width="50%"  src="../water.jpg">

<img alt="这是一只老虎" width="50%" src="abc/tiger.jpg">

<img src="https://goss.veer.com/creative/vcg/veer/800water/veer-152360031.jpg">

</body>

</html>

图片地图:

  • 常用属性：
  1. shape： 形状，常用rect矩形 和 circle圆形
  2. coords：坐标 矩形四个值(x1,y1,x2,y2) 圆形三个值(x,y,半径)
  3. href: 值为路径，可以写相对路径和绝对路径，路径可以指向页面，也可以指向文件，如果浏览器支持打开此格式的文件则直接浏览（图片，pdf等）如果不支持打开则下载此文件

代码实现:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<img src="a.jpg" width="500px" usemap="#mymap">

<!-- 图像地图标签 -->

<map name="mymap" id="mymap">

<!-- area:区域  shape:形状  rect:矩形  coords:坐标

     对角线两个点的坐标(x1,xy1,x2,y2) -->

<area alt="文字介绍" shape="rect" coords="0,0,100,100" href="demo06.html">

<area alt="文字介绍" shape="circle" coords="200,200,100" href="../water.jpg">

</map>

</body>

</html>

回顾练习:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>回顾总结练习</title>

</head>

<body>

    <h1>这是h1</h1>

    <h2>这是h2</h2>

    <h3>这是h3</h3>

    <h4>这是h4</h4>

    <h5>这是h5</h5>

    <h6>这是h6</h6>

    <hr><!-- 水平分割线 -->

    <p>段落标签1</p>

    <p>段落标签2</p>

    <p>段落标签3</p>

    测试换行<br>测试换行

    <h3>无序列表</h3>

    <ul type="circle">

        <li>吃饭</li>

        <li>睡觉</li>

        <li>敲代码</li>

    </ul>

    <h3>有序列表</h3>

    <ol type="1" start="8" reversed="reversed">

        <li>HTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

        <li>JQuery</li>

    </ol>

    <h3>定义列表</h3>

    <dl>

        <dt>歌星</dt>

        <dd>周杰伦</dd>

        <dd>刘德华</dd>

        <dd>张学友</dd>

        <dt>影星</dt>

        <dd>周星驰</dd>

        <dd>成龙</dd>

        <dd>李连杰</dd>

    </dl>

    <h3>列表嵌套</h3>

    <ul>

        <li>我的订单</li>

        <ul>

            <li>全部订单</li>

            <li>待付款</li>

            <li>待收货</li>

            <li>待评价</li>

            <li>退货退款</li>

        </ul>

        <li>我的优惠券</li>

        <li>收货地址</li>

        <ul>

            <li>地址管理</li>

        </ul>

        <li>账号管理</li>

        <ul>

            <li>我的信息</li>

            <li>安全管理</li>

        </ul>

    </ul>

    <h3>分区标签</h3>

    <div>div1</div>

    <div>div2</div>

    <div>div3</div>

    <span>span1</span>

    <span>span2</span>

    <span>span3</span>

    <h3>H5新增分区标签</h3>

    <header>头部区域</header>

    <nav>导航区域</nav>

    <article>正文区域</article>

    <footer>脚步区域</footer>

    <h3>块级元素</h3>

    div,h1-h6,p,hr

    <h3>行内元素</h3>

    span,<em>斜体</em> <i>斜体</i>

    <strong>加粗</strong> <b>加粗</b>

    <u>下划线</u>

    <del>删除线</del> <s>删除线</s><br>

    <h3>图片标签</h3>

    <img alt="这是图片" title="图片" width="50%" src="../water.jpg" usemap="#mymap">

    <h3>图片地图</h3>

    <map name="mymap" id="mymap">

        <area shape="rect" coords="0,0,100,100" href="http://www.baidu.com">

        <area shape="circle" coords="150,50,50" href="http://www.baidu.com">

    </map>

</body>

</html>

从0开始接触html--第一天学习内容总结的更多相关文章

  1. PHP四个阶段目标以及第一阶段学习内容

    PHP课程体系主要分为四个阶段,第一阶段讲的是网页HTML和数据库MySQL,第一阶段要学会网页制作的基础知识,熟用各种基本标签,对数据库进行操作,各项考核都能够达标,拿出出众的项目展示. 在第二个阶 ...

  2. js第一天学习内容

    var a=12: var t=(- -a)-(a- -)+(a++)-(a++) console.log(a) t=-1: a=12: (- -a)=11-(a=11- -)=10+(a=10++) ...

  3. ACM第一阶段学习内容

    一.知识目录 字符串处理 ................................................................. 3 1.KMP 算法 .......... ...

  4. 20145206邹京儒《Java程序设计》第一周学习总结

    20145206 <Java程序设计>第1周学习总结 教材学习内容总结 1.三大平台:Java SE.Java EE与Java ME.Java SE是各应用平台的基础,分为四个主要的部分: ...

  5. 20145330孙文馨 《Java程序设计》第一周学习总结

    20145330孙文馨 <Java程序设计>第一周学习总结 教材学习内容总结 刚开始拿到这么厚一本书说没有压力是不可能的,开始从头看觉得很陌生进入不了状态,就稍微会有一点焦虑的感觉.于是就 ...

  6. 张旭升20162329 2006-2007-2 《Java程序设计》第一周学习总结

    20162329 2006-2007-2 <Java程序设计>第一周学习总结 教材学习内容总结 通过打书上的代码熟悉了Java编程的基本过程 教材学习中的问题和解决过程 1.因为我的虚拟机 ...

  7. 马凯军201771010116《面向对象程序设计（java）》第一周学习总结

    马凯军201771010116<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.co ...

  8. 周强201771010141《面向对象程序设计（java）》第一周学习总结

    周强201771010141<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com ...

  9. 刘志梅2017710101152.《面向对象程序设计（java）》第一周学习总结

    本人学号<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com http://ww ...

随机推荐

  1. 2016NOI冬令营day0

    上午写了一道题. 中午收拾好东西后兴高采烈地坐老司机开的出租车来到了美丽的南山中学!!!:) 志愿者太多了,弄得我们有点不好意思......:) 来到寝室,看到了传闻中的被子&空(kong4) ...

  2. 4 个技巧学习 Golang

    到达 Golang 大陆:一位资深开发者之旅. 2014 年夏天…… IBM:“我们需要你弄清楚这个 Docker.” 我:“没问题.” IBM:“那就开始吧.” 我:“好的.”(内心声音):”Doc ...

  3. POJO/VO/DTO等对象模型

    JavaBean 要想成为JavaBean,需要满足以下条件: 1,提供一个默认的无参构造函数. 2,需要被序列化并且实现了Serializable接口. 3,可能有一系列可读写属性伴随"g ...

  4. c/c++的typedef/using类型别名

    久而久之,发现c/c++的typedef给类型自定义别名的语法糖就保证设计的一致性而言,确实是个相当不错的特性,跟oracle pl/sql的rowtype或type一样,可惜java.mysql均不 ...

  5. 关于mysql连接抛出10038错误问题

    今天用Navicat Premium连接windows server 2003 mysql的时候, 抛出10038问题, 这种问题之前在rhel也出现过一次, 就是防火墙不允许连接kill掉了这个请求 ...

  6. QTQuick控件基础（2）

    import QtQuick 2.2import QtQuick.Controls 1.2import QtQuick.Window 2.1ApplicationWindow {    visible ...

  7. 洛谷 P2056 采花 - 莫队算法

    萧芸斓是 Z国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花.花园足够大,容纳了 n 朵花,花有 c 种颜色(用整数 1-c 表示) ,且花是排成一排的,以 ...

  8. 【第四章】 springboot + swagger

    注:本文参考自 http://www.jianshu.com/p/0465a2b837d2 swagger用于定义API文档. 好处: 前后端分离开发 API文档非常明确 测试的时候不需要再使用URL ...

  9. 51NOD 1066 Bash游戏

    1066 Bash游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题   有一堆石子共有N个.A B两个人轮流拿,A先拿.每次最少拿1颗,最多拿K颗,拿到最后1颗石子的 ...

  10. Unity 之 图片显示的真实大小

    图片放入Unity中自身的属性 在做帽子游戏的时候,看到这么一段代码 //获取保龄球的自身宽度 float ballWidth=ball.GetComponent<Renderer>(). ...