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. HBase复制

    HBase复制是一种在不同HBase部署中复制数据的方法.它能够作为一种故障恢复的方法,并提供HBase层次的高可用性.在实际应用中,比如.能够将数据从一个面向页面的集群拷贝到一个MapReduce集 ...

  2. [转]线上GC故障解决过程记录

    排查了三四个小时,终于解决了这个GC问题,记录解决过程于此,希望对大家有所帮助.本文假定读者已具备基本的GC常识和JVM调优知识,关于JVM调优工具使用可以查看我在同一分类下的另一篇文章: http: ...

  3. C#实现大数相加

    在C#中,我们经常需要表示整数.但是,c#的基本数据类型中,最大的long也只能表示-9,223,372,036,854,775,808 到 9,223,372,036,854,775,807之间的数 ...

  4. Http post请求数据带中文参数问题

    Http请求参数带中文参数时,如{"userName":"用户名123","password":"123456"} 请求 ...

  5. Windows之Xmanager连接linux打开Oracle视图操作

    前提:安装Xmanager 能够百度Xmanager下载其破解版或者带注冊机的版本号,也能够官网下载.只是须要秘钥(建议下载企业版) 官网下载地址:http://www.netsarang.com/d ...

  6. 【RF库Collections测试】Create Dictionary

    Name:Create DictionarySource:Collections <test library>Arguments:[ *key_value_pairs ]

  7. 基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个立方体(5)

    在上篇文章中,我们介绍了VBO索引的使用,使用VBO索引可以有效地减少顶点个数,优化内存,提高程序效率. 本教程将带领大家一起走进3D--绘制一个立方体.其实画立方体本质上和画三角形没什么区别,所有的 ...

  8. ubuntu下code::blocks编译运行一个简单的gtk+2.0项目

    在具体的操作之前,首先需要安装一些必要的软件.ubuntu下默认安装了gcc,不过缺少必要的Header file,可以在命令行中输入下面的指令安装build-essential套件:sudo apt ...

  9. Android英文文档翻译系列(4)——PopupWindow

    public class PopupWindow extends Object //直接继承至Object java.lang.Object ↳ android.widget.PopupWindow  ...

  10. JS-提取字符串—>>普通方法VS正则表达式

    如下:“23nr qreq2 34fq4 4454gsr 45” [将这一串字符中的数字挑出来,当然人家作伴的不能被分开]. 一.普通方法: <script type="text/ja ...