黑马程序员技术交流社区

标题: 【石家庄校区】 HTML篇 [打印本页]

作者: 天主子民 时间: 2018-1-23 15:47
标题: 【石家庄校区】 HTML篇
本帖最后由小石姐姐于 2018-1-24 16:02 编辑

【石家庄校区】 HTML篇

第1章       HTML篇
【HTML的概述】
      什么是HTML
            HTML:Hyper Text Markup Language  --- 超文本标记语言.
            * 标记语言：指的是通过一组标签的形式描述事物的一门语言.
            * 超文本：比普通的文本更强大.
      HTML的作用
            HTML是用来制作页面(静态页面).
      HTML在那些地方使用
            在设计网站的页面的时候都要使用到HTML.
【HTML的使用】
      HTML的文件的创建
            一个HTML文件,扩展名是.html或者.htm结尾
            * 01.html
      HTML的结构标签
            * 跟标签:<html></html>
                  * <head>  -- html的头标签
                  * <body>  -- html的体标签
---------------------------------------------------------------
【HTML的字体标签】
      <font>标签:HTML中的字体标签.
      使用：<font>文字</font>
      * <font>标签的属性:
         * <标签属性名=”属性值” 属性名=”属性值”></标签>
                  * 属性:
            * color属性:字体颜色
                        * 英文单词设置:black,red,green,blue...
                  * 使用16进制数设置:#FFFFFF , #FFF
                     * size属性:字体的大小
            * face属性:字体
--------------------------------------------------------------
【HTML的排版标签】
      标题标签：h标签<h1>...<h6>
            
            <h1>一级标题</h1>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
      标签：p标签
                     字体加粗标签：b标签
                     <b>黑马训练营</b>
                     字体斜体标签：i标签
                     <i>黑马训练营</i>
                     字体下划线：u标签
                     <u>黑马训练营</u>
                     居中标签：<center>标签
                     <center>内容</center>
                     <br>换行
                     <hr>水平线
--------------------------------------------------------------
【HTML的图片标签】
      图片标签:<img>
                  * 属性:
               * src       :图片的来源.
               * width       :图片的宽度.    100px    px代表像素
               * height:图片的高度.
               * alt       :图片找不到显示的内容.
      图片的引入的路径问题:
         * 路径：相对路径.
            * 如果引入的图片和html文件在同一级路径。
                     * 直接写文件名或者./文件名
                  <img src="cs10006.jpg" />
                  <img src="./cs10006.jpg" />
            * 如果引入的图片在html文件的上一级路径。
                        * <img src="../cs10006.jpg" />
                        * 如果引入的图片在html文件的上一级路径。
                              * <img src="../../cs10006.jpg" />
            * 如果引入的图片在html文件的下一级路径。
                        * <img src="img/cs10006.jpg" />
--------------------------------------------------------------
【HTML的列表标签】
      ol有序列表
            <ol>
                  <li></li>
            </ol>

      有序列表的属性:
         * type属性:
            * 1             ：数字类型
                     * a             ：英文类型
            * i             ：罗马字符
                        *  start属性：从哪开始（此属性只对数字有效
      ul无序列表
            <ul>
                  <li></li>
            </ul>
      无序列表的属性:
         * type属性
                     * disc       ：实心点.
                     * circle       ：空心圆
               * square ：方块.
--------------------------------------------------------------
【HTML的超链接标签】
      HTML的超链接标签：<a>
         * 属性:
                     * href       :链接的路径    href=http://www.baidu.com aa.htm
            * target       :打开的方式
                  * _self       :在自身页面打开
                  * _blank       :新打开一个窗口
      超链接的target属性:
         * _self:本页面打开
         * _blank：在一个新的窗口打开
         * _parent：
--------------------------------------------------------------
【HTML的表格标签】
      <table>
      <tr>
         <td></td>
         <td></td>
      </tr>
      </table>
属性:
width       :表格宽度
height       :表格高度
border       :边框
align       :表格水平位置:
      * left
      * center
      * right
<td>的属性:
* colspan=”列数”
* rowspan=”行数”
---------------------------------------------------------------
【HTML的表单标签（*****）】
      HTML的表单标签：<form>
         * 常用属性:
               * action属性:提交的路径.默认提交到当前页面
               * method属性:请求的方式.GET和POST.默认是GET.
                     （get安全性非常低，post安全性较高。）
      HTML中表单元素：
            * <input type=”text”>             :文本框.
         * 常用属性:
            * name       :表单元素的名称.必须有name属性，然后后台才可以接收数据.
            * value       :文本框的默认值.
            * size       :文本框的长度.
            * maxlength:文本框输入的最大长度.
            * readonly:只读文本框.
            * <input type=”password”>       :密码框.
         * 常用属性:
            * name       :表单元素的名称.必须有name属性，然后后台才可以接收数据.
            * value       :密码框的默认值.
            * size       :密码框的长度.
            * maxlength:密码框输入的最大长度.
            * <input type=”radio”>             :单选按钮.（应该手动的加一个value值）
         * 常用的属性:
            * 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>
               * <frame>
-----------------------------------------------------------------
【HTML5扩展的表单标签】.(*****h5不是所有浏览器都支持)
      <input type=”email”>
      <input type=”date”>
      <input type=”number”>
      <input type=”color”>
-----------------------------------------------------------------
-----------------------------------------------------------------

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

黑马程序员IT技术论坛 X3.2