黑马程序员技术交流社区

标题: 『黑马程序员济南』JavaEE就业笔记串讲--HTML [打印本页]
作者: 小鲁哥哥    时间: 2017-7-20 16:15
标题: 『黑马程序员济南』JavaEE就业笔记串讲--HTML
本帖最后由 小鲁哥哥 于 2017-7-20 16:41 编辑

『黑马程序员济南』JavaEE就业笔记串讲--HTML


HTML的概述
    HTML:Hyper Text Markup Language  --- 超文本标记语言.
    * 标记语言：指的是通过一组标签的形式描述事物的一门语言.
    * 超文本：比普通的文本更强大.
    HTML是用来制作页面(静态页面).
  在设计网站的页面的时候都要使用到HTML.

HTML的使用
  一个HTML文件,扩展名是.html或者.htm结尾，比如创建 hello.html
  * 根标签:<html></html>
    *<head>  -- html的头
    *<body>  -- html的体
写法：
  
[HTML] 纯文本查看 复制代码
<font>文字</font>
* <font>标签的属性:
    *<标签属性名=”属性值”属性名=”属性值”></标签>
    *属性:
       * color属性:字体颜色
           * 英文单词设置:black,red,green,blue...
           * 使用16进制数设置:#FFFFFF 或 #FFF
       * size属性:字体的大小
       * face属性:字体

HTML的排版标签
                  
                   <!--HTML的标题标签 -->
                   <h1>一级标题</h1>
                   <h2>二级标题</h2>
                   <h3>三级标题</h3>
                  
                    <p>                          
                            黑马程序员济南-黑马程序员济南-黑马程序员济南-黑马程序员济南-黑马程序员济南
                            黑马程序员济南-黑马程序员济南-黑马程序员济南-黑马程序员济南-黑马程序员济南
                   </p>
                   <p>
                            黑马程序员济南-黑马程序员济南-黑马程序员济南-黑马程序员济南-黑马程序员济南
                   </p>
  
[HTML] 纯文本查看 复制代码
<b>黑马程序员济南</b>
  
[HTML] 纯文本查看 复制代码
<i>黑马程序员济南</i>
  
[HTML] 纯文本查看 复制代码
<u>黑马程序员济南</u>
[HTML] 纯文本查看 复制代码
<center>黑马程序员济南</center>
注意：标签可以嵌套使用，标签要成对使用
[HTML] 纯文本查看 复制代码
<u><center>黑马程序员济南</center></u>

HTML的标准:
* HTML4
   
[HTML] 纯文本查看 复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
* HTML5:支持视频播放,支持CSS3,支持定位,扩展标签...
   
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<pre>标签：原生标签.
<hr/>标签：横线.

HTML的图片标签
        * src       :图片的来源.
        * width   :图片的宽度.
        * height  :图片的高度.
        * alt        :图片找不到显示的内容.
    *路径：相对路径.
       * 如果引入的图片和html文件在同一级路径。
       * 直接写文件名或者./文件名
              
[HTML] 纯文本查看 复制代码
<img src="hmjn10006.jpg"/>
              <img src="./hmjn10006.jpg"/>
       * 如果引入的图片在html文件的上一级路径。
           
[HTML] 纯文本查看 复制代码
<img src="../hmjn10006.jpg" />
       * 如果引入的图片在html文件的下一级路径。
           
[HTML] 纯文本查看 复制代码
<img src="img/hmjn10006.jpg" />

HTML的列表标签
无序列表<ul>:
    *type属性
       * disc     ：实心点.
       * circle   ：空心圆
       * square ：方块.
有序列表<ol>:
    *type属性:
       * 1             ：数字类型
       * a             ：英文类型
       * i              ：罗马字符
    *start属性:从哪开始

HTML的超链接标签
<a>属性:
       * href          :链接的路径
       * target       :打开的方式
           * _self        :在自身页面打开
           * _blank     :新打开一个窗口

HTML的表格标签
[HTML] 纯文本查看 复制代码
<table>

<tr>

   <td>黑马程序员济南</td>

   <td>黑马程序员济南</td>

</tr>

</table>
<table>属性:
   width        :表格宽度
   height       :表格高度
   border      :边框
   align :表格水平位置:
       * left
       * center
       * right
<td>属性:
    * colspan="列数"
    * rowspan="行数"

HTML的表单标签
         * action属性:提交的路径.默认提交到当前页面
         * method属性:请求的方式.GET和POST.默认是GET.
              ***** GET方式和POST方式的区别?
                  * GET :数据会显示到地址栏中.GET方式提交是有大小的限制.
                   * POST        :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
   * <input type=”text”>          :文本框.
     *常用属性:
       * name     :表单元素的名称.必须有name属性，然后后台才可以接收数据.
       * value     :文本框的默认值.
       * size        :文本框的长度.
       * maxlength:文本框输入的最大长度.
       * readonly:只读文本框.
   * <input type=”password”>        :密码框.
     *常用属性:
       * name     :表单元素的名称.必须有name属性，然后后台才可以接收数据.
       * value     :密码框的默认值.
       * size        :密码框的长度.
       * maxlength:密码框输入的最大长度.
      
   * <input type=”radio”>                 :单选按钮.
     *常用的属性:
       * name     :表单元素的名称.必须有name属性，然后后台才可以接收数据.
       * value     :单选按钮的默认值.
       * checked:单选按钮默认被选中.
   * <input type=”checkbox”>         :复选按钮.
    * 常用的属性:
       * name     :表单元素的名称.必须有name属性，然后后台才可以接收数据.
       * value     :单选按钮的默认值.
       * checked:单选按钮默认被选中.
   * <input type=”button”>              :普通按钮.没有任何功能的按钮.
   * <input type=”submit”>              :提交按钮.
   * <input type=”reset”>                 :重置按钮.
   * <input type=”file”>                    :文件上传的表单项.
   * <input type=”hidden”>              :隐藏字段.
   * <input type=”image”>               :图片按钮
   * <select>                                        :下拉列表.
   * <textarea>                                    :文本域.

HTML的框架标签
<frameset >标签与body标签是冲突,有frameset就可以没有body.
* 属性:
    *rows
    *cols
使用<frame>标签，frame代表切分的每个部分.

特殊字符的标签：
空格:              
<       :<
>       :>

作者: qidianlu    时间: 2017-7-21 11:20
very good
作者: k1453711238    时间: 2017-8-2 23:06
多谢大哥分享啊,希望持续更新啊
作者: java1001    时间: 2019-10-24 18:13
谁能告诉我们先学习xml 还是先学习html
都要学习吗



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2