黑马程序员技术交流社区

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

作者: xcxiao1992 时间: 2017-11-19 17:24
标题: 【石家庄校区】笔记HTML
本帖最后由小石姐姐于 2017-11-20 15:17 编辑

  ● 什么是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属性:字体
* 基本使用：
            <font>我是HTML!</font> <br/>
            <font color="red">我是HTML！</font><br/>
            <font color="#FF0000" size="1">我是小红！</font><br/>
            <font color="#00FF00" size="7">我是小绿！</font><br/>
            <font color="#0000FF" size="100">我是小蓝！</font><br/>
【HTML的排版标签】
  ● 标题标签：h标签<h1>...<h6>
            
            <h1>一级标题</h1>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
  ● 段落标签：p标签
            <p>
                     一段内容内容
            </p>
            <p>
                     一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
                     一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
            </p>

  ● 字体加粗标签：b标签
<b>黑马训练营</b>
  ● 字体斜体标签：i标签
<i>黑马训练营</i>
  ● 字体下划线：u标签
<u>黑马训练营</u>
  ● 居中标签：<center>标签
<center>内容</center>

HTML有标准:
* HTML4
* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
* HTML5:支持视频播放,支持CSS3,支持定位,扩展标签...
* <!DOCTYPE html>

<pre>标签：原生标签.
<hr/>标签：横线.

【HTML的图片标签】
图片标签:<img>
* 属性:
      * src       :图片的来源.
      * width       :图片的宽度.
      * height:图片的高度.
      * alt       :图片找不到显示的内容.
图片的引入的路径问题:
* 路径：相对路径.
      * 如果引入的图片和html文件在同一级路径。
                     * 直接写文件名或者./文件名
            <img src="cs10006.jpg" />
            <img src="./cs10006.jpg" />
      * 如果引入的图片在html文件的上一级路径。
         * <img src="../cs10006.jpg" />
      * 如果引入的图片在html文件的下一级路径。
         * <img src="img/cs10006.jpg" />

【HTML的列表标签】
  ● 有序列表
<ol>
<li></li>
</ol>
  ● 无序列表
<ul>
<li></li>
</ul>
【HTML的超链接标签】
HTML的超链接标签：<a>
* 属性:
      * href       :链接的路径
      * target       :打开的方式
         * _self       :在自身页面打开
         * _blank       :新打开一个窗口
无序列表的属性:
* type属性
      * disc       ：实心点.
      * circle       ：空心圆
      * square ：方块.

有序列表的属性:
* type属性:
      * 1             ：数字类型
      * a             ：英文类型
      * i             ：罗马字符
* start属性:从哪开始

超链接的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方式的区别?
               * GET       :数据会显示到地址栏中.GET方式提交是有大小的限制.
               * POST       :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
HTML中表单元素：
* <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>                               :文本域.

HTML5扩展的表单标签.(*****h5不是所有浏览器都支持)
<input type=”email”>
<input type=”date”>
<input type=”number”>
<input type=”color”>

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

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

作者: 小石姐姐 时间: 2017-11-20 15:20
继续努力哦

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

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