day01 html详解

 

1、html的简介

    1.1 什么是html？

        - HyperText Markup Language：超文本标记语言，网页语言

        ** 超文本：超出文本的范畴，使用html可以轻松实现这样操作

        ** 标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>

        ** 网页语言：

    1.2 第一个html程序。

        - 创建java文件.java

            ** 先编译，然后再运行（jvm）

        - html后缀是 .html .htm

            ** 直接通过浏览器就可以运行

        - 代码

            ** 这是我的<font size="5" color="red">第一个html程序！</font>

 

    1.3 html的规范（遵循）

        1、一个html文件开始标签和结束的标签 <html> </html>

            - 定义一个java方法 { }

        2、html包含两部分内容

            （1）<head> 设置相关信息</head>

            （2）<body> 显示在页面上的内容都写在body里面</body>

        3、html的标签有开始标签，也要有结束标签

            - <head></head>

        4、html的代码不区分大小写的

        5、有些标签，没有结束标签 ，在标签内结束

            - 比如 换行 <br/> <hr/>

    

    1.4 html的操作思想（******理解）

        网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），

        通过修改标签的属性值实现标签内数据样式的变化。

        一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。

 

html中常用的标签

2、文字标签和注释标签

    * 文字标签：修改文字的样式

        - <font></font>

        - 属性：

            * size: 文字的大小 取值范围 1-7,超出了7，默认还是7

            * color：文字颜色

                - 两种表示方式

                    ** 英文单词：red green blue black white yellow gray......

                    ** 使用十六进制数表示 #ffffff : RGB

                        - 通过工具实现不同的颜色 #66cc66

 

    * 注释标签

        - java注释几种？三种

        - html的注释 ： <!-- html的注释 -->

 

3、标题标签、水平线标签和特殊字符

    3.1 标题标签

        - <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>

        - 从h1到h6，大小是依次变小，同时会自动换行

    

    3.2 水平线标签

        - <hr/>

        - 属性

            ** size: 水平线的粗细 取值范围 1-7

            ** color: 颜色

        - 代码

            <hr size="5" color="blue"/>

 

    3.3特殊字符

        - 想要在页面上显示这样的内容 <html>:是网页的开始！

        - 需要对特殊字符进行转义

            * < &lt;

            * > &gt;

            * 空格：&nbsp;

            * & : &amp;

    

4、列表标签

    - 比如现在显示这样的效果

        传智播客

             财务部

             学工部

             人事部

    ** <dl> </dl>: 表示列表的范围

        ** 在dl里面 <dt></dt>: 上层内容

        ** 在dl里面 <dd></dd>：下层内容

    - 代码

        <dl>

            <dt>传智播客</dt>

            <dd>财务部</dd>            

            <dd>学工部</dd>

            <dd>人事部</dd>

        </dl>

    

    - 想要在页面上显示这样的效果

     1. 财务部

     2. 学工部

     3. 人事部

 

     a. 财务部

     b. 学工部

     c. 人事部

 

     i. 财务部

     ii. 学工部

     iii. 人事部

    

    ** <ol></ol> : 有序列表的范围

        - 属性 type：设置排序方式 1(默认) a i

     ** 在ol标签里面 <li>具体内容</li>

    - 代码

        <ol>

            <li>财务部</li>

            <li>学工部</li>

            <li>人事部</li>

        </ol>

    

    - 想要在页面上显示这样的效果

        特殊符号（方框） 财务部

        特殊符号（方框） 学工部

 

        ** <ul></ul> : 表示无序列表的范围

            属性： type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc

            在ul里面 <li></li>

        - 代码

            <ul>

                <li>财务部</li>

                <li>学工部</li>

                <li>人事部</li>

            </ul>

 

5、图像标签（*******）

    * <img src="图片的路径"/>

        - src: 图片的路径

        - width：图片的宽度

        - height：图片的高度

 

        - alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容

            ** 有些浏览器下不显示（没有效果）

6、路径的介绍

    * 分类：两类

    ** 绝对路径

        - C:\Users\asus\Desktop\0413\day01\code\a.jpg

        - http://www.baidu.com/b.jpg

 

    ** 相对路径

        - 一个文件相对于另外一个文件的位置

        - 三种写法：

            ** html文件和图片在同一个路径下，可以直接写文件名称

                - <img src="b1.jpg" alt="这是一个美女"/>

 

            ** 图片在html的下层目录

                在html文件中，使用img文件夹下面的a.jpg

 

                -- C:\Users\asus\Desktop\0413\day01\code\ 4.html

                -- C:\Users\asus\Desktop\0413\day01\code\ img\a.jpg

                *** 在html中使用图片 4.html和img在一个路径下

                    img\a.jpg

            

            ** 图片在html文件的上层目录

                

                --- C:\Users\asus\Desktop\0413\day01\ code\4.html

                --- C:\Users\asus\Desktop\0413\day01\ c.png

 

                *** html文件所在的目录和图片是一个目录

                    ** 图片和html文件是什么关系？

                        - 图片在html的所在目录的上层目录 day01

                    ** 怎么表示上层路径 ../

                    - ../: day01

                        -- ../c.png

                    ** 想要表示上层的上层 ../../

 

7、案例一：列表标签的使用（作业：完成剩余的部分）

 

8、超链接标签（******）

    * 链接资源(******)

        - <a href="链接到资源的路径"> 显示在页面上的内容 </a>

            ** href: 链接的资源的地址

            ** target：设置打开的方式 ，默认是在当前页打开

                -- _blank : 在一个新窗口中打开

                -- _self: 在当前页打开 （默认）

        - 当超链接不需要跳转到任何的地址时 在href里面加#

            - <a href="#">这是一个超链接2</a>

 

    * 定位资源

        ** 如果想要定位资源：定义一个位置

            <a name="top">顶部</a>

        ** 回到这个位置

            <a href="#top">回到顶部</a>

        

        ** 引入一个标签 pre：原样输出

    

9、表格标签（****重要的标签*****）

    * 可以对数据进行格式化，使数据显示更加清晰

 

    * <table></table>: 表示表格的范围

        - border：表格线

        - bordercolor：表格线的颜色

        - cellspacing：单元格直接的距离

        - width：表格的宽度

        - height：表格的高度

 

    ** 在table里面 <tr></tr>

        - 设置对齐方式 align： left center right

 

     *** 在tr里面 <td></td>

     - 设置显示方式 align： left center right

 

     *** 使用th也可以表示单元格

        - 表示可以实现居中和加粗

 

    * 代码

        <table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">

    

    * 画图分析表格的写法

        - 首先定义一个表格的范围使用table

            - 定义一行使用 tr

            - 定义一个单元格使用 td

    ** 操作技巧：

        - 首先数有多少行 ，数每行里面有多少个单元格

    

    ** 表格的标题

        <caption></caption>

 

    ** 合并单元格

        - rowspan：跨行

            ** <td rowspan="3">人员信息</td>

        - colspan：跨列

            ** <td colspan="3">人员信息</td>

 

10、表单标签（****今天最重要的标签****）

    * 可以提交数据到开心网的服务器，这个过程可以使用表单标签实现

 

    * <form></form>: 定义一个表单的范围

        - 属性

            ** action： 提交到地址，不写（默认提交到当前的页面）

            ** method: 表单提交方式

                - 常用的有两种 get和post，默认是get请求

 

            ** 面试题目： get和post区别

                1、get请求地址栏会携带提交的数据，post不会携带（请求体里面。在第七天时候讲http协议时候）

                2、get请求安全级别较低，post较高

                3、get请求数据大小的限制，post没有限制

            

            ** enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性（第22天时候讲文件上传）

 

    ** 输入项：可以输入内容或者选择内容的部分

        - 大部分的输入项 使用 <input type="输入项的类型"/>

 

        ******* 在输入项里面需要有一个name属性（必须）

 

        *** 普通输入项：<input type="text"/>

        *** 密码输入项：<input type="password"/>

 

 

        *** 单选输入项：<input type="radio"/>

            - 在里面需要属性 name

            - name的属性值必须要相同

            - 必须有一个value值

 

            **** 实现默认选中的属性

                -- checked="checked"

 

        *** 复选输入项：<input type="checkbox"/>

            - 在里面需要属性 name

            - name的属性值必须要相同

            - 必须有一个value值

 

            **** 实现默认选中的属性

                -- checked="checked"

        

        *** 文件输入项（在后面上传时候用到）

            - <input type="file"/>

        

 

        *** 下拉输入项（不是在input标签里面的）

            <select name="birth">

                <option value="1991">1991</option>

                <option value="1992">1992</option>

                <option value="1993">1993</option>

            </select>

 

            - 默认选择

                *** selected="selected"

        

        *** 文本域

            <textarea cols="10" rows="10"></textarea>

        

        *** 隐藏项（不会显示在页面上，但是存在于html代码里面）

            <input type="hidden" />

        

        *** 提交按钮

            <input type="submit"/>

            <input type="submit" value="注册"/>

            

            - file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html

             ?sex=on&love=on&love=on&birth=1991

            

            当在输入项里面写了name属性之后

            - file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html

            ?phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=

 

            - file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html?

            phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid=

 

            ** ?输入项name的值=输入的值&

            ** 参数类似于key-value形式

 

        *** 使用图片提交表单

            <input type="image" src="图片路径"/>

        

        *** 重置按钮： 回到输入项的初始状态

            <input type="reset"/>

        

        *** 普通按钮(和明天讲js在一起使用的)

            <input type="button" value=""/>

 

11、案例：使用表单标签实现注册页面

        - 使用表格实现页面效果

        - 超链接不想要他有效果 href="#"

        - 如果表格里面的单元格没有内容， 使用空格作为占位符 &nbsp;

        - 使用图片提交表单 <input type="image" src="图片的路径"/>

 

12、html中的其他的常用标签的使用

    b : 加粗

    s ：删除线

    u ：下划线

    i ：斜体

    

    pre ：原样输出

    

    sub : 下标

    sup : 上标

 

    p ：段落标签 比br标签会多换一行

    

    ====明天讲css时候会一直使用

    div ：会自动换行

    span：全部在一行显示

 

13、html的头标签的使用

    * html两部分组成 head和body

    ** 在head里面的标签就是头标签

 

    ** title标签：表示在标签上显示的内容

    ** <meta>标签：设置页面的一些相关内容

        - <meta name="keywords" content="毕姥爷，熊出没，刘翔"> 为该页面，提供关键字

         <meta http-equiv="refresh" content="3;url=01-hello.html" /> 可以设置页面定时跳转

    ** base标签：设置超链接的基本设置

        - 可以统一设置超链接的打开方式

         <base target="_blank"/>

    ** link标签：引入外部文件

        ** 明天css，可以使用link标签引入css文件

        

14、框架标签的使用（会用）

     <frameset>

        - rows:按照行进行划分

            ** <frameset rows="80,*"> 说明：按照行划分为两部分，上部分为80行，下部分为该页面余下的所有行数

 

        - cols:按照列进行划分

            ** <frameset cols="80,*"> 说明：按照列划分为两部分，左部分为80列，右部分为该页面余下的所有列数

    * <frame>

        - 具体显示的页面

            - <frame name="lower_left" src="b.html">

    

    *** 使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉

 

    * <frameset rows="80,*"> //把页面划分成上下两部分

     <frame name="top" src="a.html"> //上面页面

    
 

        <frameset cols="150,*"> //把下面部分划分成左右两部分

            <frame name="lower_left" src="b.html"> //左边的页面

            <frame name="lower_right" src="c.html"> //右边的页面

        </frameset>

    </frameset>

 

    * 如果在左边的页面超链接，想让内容显示在右边的页面中

        - 设置超链接里面属性 target值设置成名称

        - <a href="01-hello.html" target="right">超链接1</a>

 

15、a标签的扩展（了解）

    - 百度是网络资源

    - 当a标签里面访问网络资源时候，必须要加一个协议 http：表示一个网络的公共协议，

     如果加上http协议之后，自动识别访问资源是一个网络资源

 

    - 当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。

    如果不是公共协议，会去本地电脑找支持这个协议的应用程序。

 

16、今天内容的总结

    1、html操作思想（****）

        * 使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化

    2、font标签 属性：size 取值范围 1-7 color：英文单词，十六进制数 #ffffff

    3、标题标签 <h1></h1>.....<h6></h6> : 从h1到h6越来越小，自动换行

    4、注释 <!-- html的注释 -->

 

    5、列表标签

        ** <dl> <dt></dt> <dd></dd></dl>

        ** 有序 <ol><li></li></ol>

        ** 无序 <ul><li></li></ul>

    

    6、图像标签(******)

        <img src="图片的路径" width="" height="" alt=""/>

        ** alt:浏览器兼容性很差

    

    7、路径（相对路径）(****)

        ** 在同一级目录 ：直接写

        ** 在下一层目录： images/1.jpg

        ** 在上层目录： ../

    

    8、超链接标签（*****）

        <a href="路径">显示在页面上的内容</a>

        - 打开方式 target="_self _ blank"

            参数说明：_self : 在本页面打开

             _blank: 在一个新的窗口打开

        - 默认是在当前页面打开

    

    9、表格标签（*****）

        <table>

            <tr>

                <td></td>

                <th></th> //加粗和居中

            </tr>

        </table>

        - 技巧：先数有多少行，数每行里面有多少个单元格

    

    10、表单标签（*** 今天最重要的标签***）

        * <form></form>:

            - action: 提交到地址

            - method：提交方式 ：常用的有两种 get和post

            - get和post区别

 

            - enctype属性（上传时候使用）

        * 输入项

            * 输入项里面写name属性

            * 普通输入项 <input type="text"/>

            * 密码：password

            * 单选框：radio

            * 复选框：checkbox

            * 下拉框

                <select name="">

                    <option value=""></option>

                </select>

            * 文本域

                <textarea cols="" rows="" name=""></textarea>

            

            * 文件 file

 

            * 提交按钮 submit

            * 重置 reset

            * 使用图片提交 <input type="image" src=""/>

 

            * 隐藏项 hidden

            * 普通按钮 button

        

    11、div和span(******)

 

    12、框架标签（会用）

        

Day01 html详解的更多相关文章

  1. Typora下载及MarkDown语法详解

    写博客的重要性 作为一名程序员,写博客已经成了一项基本技能和素养.为什么要写博客?因为它能将我们学习的知识总结起来,提高我们对知识的深层次理解,还能将我们所学知识记录下来,以便于以后回忆.要想写博客, ...

  2. Linq之旅：Linq入门详解（Linq to Objects）

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

  3. 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）

    一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

  4. EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解

    前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...

  5. Java 字符串格式化详解

    Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...

  6. Android Notification 详解（一）——基本操作

    Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...

  7. Android Notification 详解——基本操作

    Android Notification 详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...

  8. Git初探--笔记整理和Git命令详解

    几个重要的概念 首先先明确几个概念: WorkPlace : 工作区 Index: 暂存区 Repository: 本地仓库/版本库 Remote: 远程仓库 当在Remote(如Github)上面c ...

  9. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

随机推荐

  1. [转]anchorPoint 锚点解析

    转自:http://blog.csdn.net/cjopengler/article/details/7045638 anchor point 究竟是怎么回事? 之所以造成不容易理解的是因为我们平时看 ...

  2. SharePoint 2013 一次性上传文件大小限制

    默认是250MB,最大一次上传文件不超过2G The defaut size is 250MB and maximun upload size is 2047MB. It's can't greate ...

  3. js 停止事件冒泡 阻止浏览器的默认行为

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标右键就会弹出context menu. ...

  4. 【Android开发】如何设计开发一款Android App

    本文从开发工具选择,UI界面.图片模块.网络模块.数据库产品选择.性能.安全性等几个方面讲述了如果开发一个Android应用.现在整理出来分享给广大的Android程序员. 开发工具的选择 开发工具我 ...

  5. Rollup 与 webpack的区别

    特性: webpack 拆分代码, 按需加载: Rollup 所有资源放在同一个地方,一次性加载,利用 tree-shake 特性来剔除项目中未使用的代码,减少冗余,但是webpack2已经逐渐支持t ...

  6. NodeJS-001-Nodejs学习文档整理(转-出自http://www.cnblogs.com/xucheng)

    Nodejs学习文档整理 http://www.cnblogs.com/xucheng/p/3988835.html 1.nodejs是什么: nodejs是一个是javascript能在后台运行的平 ...

  7. Map的key不变，value相加

    判断map中是否含有某个key,如包含则结果value相加,如不包含则新增. 直接上demo吧: package javademo; import java.util.HashMap; import ...

  8. socket网络编程【python】

    转自:http://www.jb51.net/article/19751.htm socket 是网络连接端点. 一.网络知识的一些介绍 socket 是网络连接端点.例如当你的Web浏览器请求www ...

  9. 说说NAND FLASH以及相关ECC校验方法

    Flash名称的由来,Flash的擦除操作是以block块为单位的,与此相对应的是其他很多存储设备,是以bit位为最小读取/写入的单位,Flash是一次性地擦除整个块:在发送一个擦除命令后,一次性地将 ...

  10. poj_3321 线段树/树状数组

    题目大意 一个果树(每个节点的分叉数目不固定)上有N个分叉点(包括最末的叶节点),则有N-1条边,将分叉点进行从1到N编号,每个分叉点上均可以结水果.开始的时候,每个分叉点都有一个水果,之后进行一系列 ...