HTML 入门基础知识点

什么是HTML

HTML:HyperText Markup Language  --- 超文本标记语言.

*标记语言：指的是通过一组标签的形式描述事物的一门语言.

*超文本：比普通的文本更强大.

HTML的作用

HTML是用来制作页面(静态页面).

HTML在那些地方使用

在设计网站的页面的时候都要使用到HTML.

【HTML的使用】

HTML的文件的创建

一个HTML文件,扩展名是.html或者.htm结尾

* 01.html

Ø <font>标签:HTML中的字体标签.

使用：<font>文字</font>

*<font>标签的属性:

    * <标签 属性名=”属性值” 属性名=”属性值”></标签>

    * 属性:

        * color属性:字体颜色

            * 英文单词设置:black,red,green,blue...

            * 使用16进制数设置:#FFFFFF , #FFF

        * size属性:字体的大小

        * face属性:字体

nbsp

Ø 段落标签

<h1>一级标签</h1>

                   <h2> 二级标签</h2>    一共<h1>标签到<h6>标签:  h1 最大

Ø 段落标签：p标签

Ø 字体加粗标签：b标签

<b>黑马训练营</b>

Ø 字体斜体标签：i标签

<i>黑马训练营</i>

Ø 字体下划线：u标签

<u>黑马训练营</u>

Ø 居中标签：<center>标签

<center>内容</center>

<br>换行

<hr>水平线

Ø   空格

Ø 保存原有格式,不转义,包括空格等<pre>  <pre>

Ø 图片标签<img>

属性有:  src  图片的来源

           width      :图片的宽度.     100px     px代表像素

           height:图片的高度.    50px

           alt     :图片找不到显示的内容

图片引入问题

     相对路径:

如果在同一级,就可以直接写 文件名 或者  ./文件名

              <imgsrc="cs10006.jpg" />

              <imgsrc="./cs10006.jpg" />

            如果在上一级, 则写  . ./文件名

* <imgsrc="../cs10006.jpg" />

*如果引入的图片在html文件的下一级路径。

            * <imgsrc="img/cs10006.jpg" />

HTML 列表标签

     有序列表

<ol>

    <li></li>

</ol>

  有序列表中还有  start 属性,   仅针对数字有效

无序列表

<ul>

    <li></li>

</ul>

     

HTML:

*HTML的概述：

    * HTML：Hyper Text Markup Language.

    * HTML就是由一组标签所组成的.

*HTML的字体标签:

    * <font>标签:

        * 属性：color,size,face

*HTML的排版标签:

    * h标签：标题标签.

    * p标签：段落标签.

    * b标签：加粗标签.

    * i标签：斜体标签.

    * u标签：下划线标签.

    * br标签：换行.

    * hr标签：水平线.

*HTML的图片标签:

    * img标签:

        * 属性:

            * src属性:图片的路径.

            * 相对路径:  ./ 代表当前目录   ../上一级目录   

            * width,height,alt.

*HTML的超链接标签:

    * a标签:

       * 属性：

            * href:链接的路径.

            * target:链接打开的方式._self,_blank,_parent

*HTML的列表标签:

   　* 无序列表:<ul>

     * 有序列表:<ol>

*HTML的表格标签：

     * table标签:

         * tr标签：表格的行.

         * td标签：表格的列.

*HTML的表单标签：（*****）

     * form标签：

         * action属性：表单提交的路径

         * method属性：表单的提交的方式.

             * GET和POST：

                 * GET：地址栏上会显示提交的数据的信息,大小限制.

                 * POST：地址栏不会显示提交的数据的信息,没有大小限制.

    * <input>

        * type=”text”:文本框

        * type=”password”:密码框.

        * type=”radio”:单选按钮.

        * type=”checkbox”:复选框.

        * type=”file”:文件上传.

        * type=”hidden”:隐藏字段.

        * type=”submit”：提交按钮.

        * type=”reset”:重置按钮.

        * type=”button”:普通按钮.

        * type=”image”:图片按钮.

   * <select>:下拉列表.

   * <textarea>:文本区

*HTML的框架标签:

   *<frameset>

   *<frame>

CSS：

*CSS的概述：层叠样式表.

    * 修饰HTML的页面.使页面与样式分离.

*CSS的语法：

    * 选择器{属性名:属性值;属性名:属性值;...}

*CSS的引入方式：

    * 行内样式：在html元素上使用style属性设置

    * 内部样式：在html中使用<style></style>进行设置

    * 外部样式：定义一个css文件,在html中引入该文件.<linkhref=”” type=”” rel=””/>

* CSS的选择器：(****)

    * 元素选择器:

    * ID选择器：

    * 类选择器：

    * 后代选择器：

    * 子元素选择器：

*CSS的样式：

    * 文本

    * 背景

    * 字体

    * 列表

*CSS的盒子模型：

    * 内边距：padding

    * 边框：border

    * 外边距：margin

*CSS的悬浮和定位：

    * 悬浮：float属性设置悬浮.

    * 清除悬浮：clear属性清除.

    * 定位：position属性设置定位.

        * 使用left和top属性控制位置.

    * display属性：控制元素的显示方式：

       * block--显示的, none--隐藏的,inline--显示到一行.

JS:

*JS的概述：JavaScript运行在浏览器端脚本语言.

*JS的历史：由网景公司研发的.由ECMA组织统一标准:ECMAScript.

*JS的组成：ECMAScript，BOM，DOM.

*JS的语法：

    * JS的变量声明:

    * JS的数据类型：

        * 原始类型：undefined,   未定义类型

boolean   布尔类型

string  字符或者字符串

number  数字

null(Oject)

        * 引用类型：对象类型null

  

  * JS的运算符：

        * 与java中基本一致.有一个 === 类型与值都相同的情况下才会为true.

    * JS的语句：

        * 与Java中的语句一致.

*简单的表单校验：

    * 正则的校验：使用String的match方法和正则中的test方法.

超链接标签   < a >

属性;

    href   : 链接到路径

     target  :打开的方式

_self 在自身页面打开

_blank 新打开一个窗口

表格标签

<table>  表

<tr>  行

<td>   </td>     列  

  </tr>

</table>

属性:

    width    :表格宽度

    height   :表格高度

    border  :边框

    align     :表格水平位置:

        * left

        * center

        * right

<td>的属性:

    * colspan=”列数”

表单标签   < form>

    HTML中表单元素：

*<input type=”text”>       :文本框.

    * 常用属性:

       method   :请求的方式,get 和post,默认是get

                get和post的区别

                    post:不会显示在地址栏中,数据在请求体中

                  

get:1.显示在地址栏中,并且

2.get方式提交有大小限制

3.get方式数据在请求行中

      

  action  ;提交的路径,默认提交到当前页面

* name  :表单元素的名称.必须有name属性，然后后台才可以接收数据.

        * value  :文本框的默认值.

        * size     :文本框的长度.

        * maxlength:文本框输入的最大长度.

        * readonly:只读文本框.

*<input type=”password”>     :密码框.

    * 常用属性:

        * name  :表单元素的名称.必须有name属性，然后后台才可以接收数据.

        * value  :密码框的默认值.

        * size     :密码框的长度.

        * maxlength:密码框输入的最大长度.

        

*<input type=”radio”>            :单选按钮.

    * 常用的属性:

        * name  :表单元素的名称.必须有name属性，然后后台才可以接收数据.

        * value  :单选按钮的默认值.

        * checked:单选按钮默认被选中.

*<input type=”checkbox”>     :复选按钮. 加value=值

* 常用的属性:

        * name  :表单元素的名称.必须有name属性，然后后台才可以接收数据.

        * value  :单选按钮的默认值.

        * checked:单选按钮默认被选中.

*<input type=”button”>         :普通按钮.没有任何功能的按钮. 加value=值

*<input type=”submit”>          :提交按钮.

*<input type=”reset”>             :重置按钮.

*<input type=”file”>         :文件上传的表单项.

*<input type=”hidden”>         :隐藏字段.

*<input type=”image”>          :图片按钮

*<select>                               :下拉列表.

        <  select name=””

<option value=”篮球”>篮球 </option>

*<textarea>                           :文本域.

        row=”5”cols

单选按钮要  加value=””  手动设定值

<frameset>  框架标签  与body冲突,有了frameset就可以没有body

<frame  > src=”引用页面路径” ,切割了几块,几个frame,设置每一块的属性

         name=

    用来标记块,利用target 指向特定位置

rows 分割行     rows=”15%”

cols  分割列(左右)

<frameset rows="20%,*">

display  属性   inline  列表标签横排

           HTML 入门基础知识点

什么是HTML

HTML:HyperText Markup Language  --- 超文本标记语言.

*标记语言：指的是通过一组标签的形式描述事物的一门语言.

*超文本：比普通的文本更强大.

HTML的作用

HTML是用来制作页面(静态页面).

HTML在那些地方使用

在设计网站的页面的时候都要使用到HTML.

【HTML的使用】

HTML的文件的创建

一个HTML文件,扩展名是.html或者.htm结尾

* 01.html

Ø <font>标签:HTML中的字体标签.

使用：<font>文字</font>

*<font>标签的属性:

    * <标签 属性名=”属性值” 属性名=”属性值”></标签>

    * 属性:

        * color属性:字体颜色

            * 英文单词设置:black,red,green,blue...

            * 使用16进制数设置:#FFFFFF , #FFF

        * size属性:字体的大小

        * face属性:字体

nbsp

Ø 段落标签

<h1>一级标签</h1>

                   <h2> 二级标签</h2>    一共<h1>标签到<h6>标签:  h1 最大

Ø 段落标签：p标签

Ø 字体加粗标签：b标签

<b>黑马训练营</b>

Ø 字体斜体标签：i标签

<i>黑马训练营</i>

Ø 字体下划线：u标签

<u>黑马训练营</u>

Ø 居中标签：<center>标签

<center>内容</center>

<br>换行

<hr>水平线

Ø   空格

Ø 保存原有格式,不转义,包括空格等<pre>  <pre>

Ø 图片标签<img>

属性有:  src  图片的来源

           width      :图片的宽度.     100px     px代表像素

           height:图片的高度.    50px

           alt     :图片找不到显示的内容

图片引入问题

     相对路径:

如果在同一级,就可以直接写 文件名 或者  ./文件名

              <imgsrc="cs10006.jpg" />

              <imgsrc="./cs10006.jpg" />

            如果在上一级, 则写  . ./文件名

* <imgsrc="../cs10006.jpg" />

*如果引入的图片在html文件的下一级路径。

            * <imgsrc="img/cs10006.jpg" />

HTML 列表标签

     有序列表

<ol>

    <li></li>

</ol>

  有序列表中还有  start 属性,   仅针对数字有效

无序列表

<ul>

    <li></li>

</ul>

     

HTML:

*HTML的概述：

    * HTML：Hyper Text Markup Language.

    * HTML就是由一组标签所组成的.

*HTML的字体标签:

    * <font>标签:

        * 属性：color,size,face

*HTML的排版标签:

    * h标签：标题标签.

    * p标签：段落标签.

    * b标签：加粗标签.

    * i标签：斜体标签.

    * u标签：下划线标签.

    * br标签：换行.

    * hr标签：水平线.

*HTML的图片标签:

    * img标签:

        * 属性:

            * src属性:图片的路径.

            * 相对路径:  ./ 代表当前目录   ../上一级目录   

            * width,height,alt.

*HTML的超链接标签:

    * a标签:

       * 属性：

            * href:链接的路径.

            * target:链接打开的方式._self,_blank,_parent

*HTML的列表标签:

   　* 无序列表:<ul>

     * 有序列表:<ol>

*HTML的表格标签：

     * table标签:

         * tr标签：表格的行.

         * td标签：表格的列.

*HTML的表单标签：（*****）

     * form标签：

         * action属性：表单提交的路径

         * method属性：表单的提交的方式.

             * GET和POST：

                 * GET：地址栏上会显示提交的数据的信息,大小限制.

                 * POST：地址栏不会显示提交的数据的信息,没有大小限制.

    * <input>

        * type=”text”:文本框

        * type=”password”:密码框.

        * type=”radio”:单选按钮.

        * type=”checkbox”:复选框.

        * type=”file”:文件上传.

        * type=”hidden”:隐藏字段.

        * type=”submit”：提交按钮.

        * type=”reset”:重置按钮.

        * type=”button”:普通按钮.

        * type=”image”:图片按钮.

   * <select>:下拉列表.

   * <textarea>:文本区

*HTML的框架标签:

   *<frameset>

   *<frame>

CSS：

*CSS的概述：层叠样式表.

    * 修饰HTML的页面.使页面与样式分离.

*CSS的语法：

    * 选择器{属性名:属性值;属性名:属性值;...}

*CSS的引入方式：

    * 行内样式：在html元素上使用style属性设置

    * 内部样式：在html中使用<style></style>进行设置

    * 外部样式：定义一个css文件,在html中引入该文件.<linkhref=”” type=”” rel=””/>

* CSS的选择器：(****)

    * 元素选择器:

    * ID选择器：

    * 类选择器：

    * 后代选择器：

    * 子元素选择器：

*CSS的样式：

    * 文本

    * 背景

    * 字体

    * 列表

*CSS的盒子模型：

    * 内边距：padding

    * 边框：border

    * 外边距：margin

*CSS的悬浮和定位：

    * 悬浮：float属性设置悬浮.

    * 清除悬浮：clear属性清除.

    * 定位：position属性设置定位.

        * 使用left和top属性控制位置.

    * display属性：控制元素的显示方式：

       * block--显示的, none--隐藏的,inline--显示到一行.

JS:

*JS的概述：JavaScript运行在浏览器端脚本语言.

*JS的历史：由网景公司研发的.由ECMA组织统一标准:ECMAScript.

*JS的组成：ECMAScript，BOM，DOM.

*JS的语法：

    * JS的变量声明:

    * JS的数据类型：

        * 原始类型：undefined,   未定义类型

boolean   布尔类型

string  字符或者字符串

number  数字

null(Oject)

        * 引用类型：对象类型null

  

  * JS的运算符：

        * 与java中基本一致.有一个 === 类型与值都相同的情况下才会为true.

    * JS的语句：

        * 与Java中的语句一致.

*简单的表单校验：

    * 正则的校验：使用String的match方法和正则中的test方法.

超链接标签   < a >

属性;

    href   : 链接到路径

     target  :打开的方式

_self 在自身页面打开

_blank 新打开一个窗口

表格标签

<table>  表

<tr>  行

<td>   </td>     列  

  </tr>

</table>

属性:

    width    :表格宽度

    height   :表格高度

    border  :边框

    align     :表格水平位置:

        * left

        * center

        * right

<td>的属性:

    * colspan=”列数”

表单标签   < form>

    HTML中表单元素：

*<input type=”text”>       :文本框.

    * 常用属性:

       method   :请求的方式,get 和post,默认是get

                get和post的区别

                    post:不会显示在地址栏中,数据在请求体中

                  

get:1.显示在地址栏中,并且

2.get方式提交有大小限制

3.get方式数据在请求行中

      

  action  ;提交的路径,默认提交到当前页面

* name  :表单元素的名称.必须有name属性，然后后台才可以接收数据.

        * value  :文本框的默认值.

        * size     :文本框的长度.

        * maxlength:文本框输入的最大长度.

        * readonly:只读文本框.

*<input type=”password”>     :密码框.

    * 常用属性:

        * name  :表单元素的名称.必须有name属性，然后后台才可以接收数据.

        * value  :密码框的默认值.

        * size     :密码框的长度.

        * maxlength:密码框输入的最大长度.

        

*<input type=”radio”>            :单选按钮.

    * 常用的属性:

        * name  :表单元素的名称.必须有name属性，然后后台才可以接收数据.

        * value  :单选按钮的默认值.

        * checked:单选按钮默认被选中.

*<input type=”checkbox”>     :复选按钮. 加value=值

* 常用的属性:

        * name  :表单元素的名称.必须有name属性，然后后台才可以接收数据.

        * value  :单选按钮的默认值.

        * checked:单选按钮默认被选中.

*<input type=”button”>         :普通按钮.没有任何功能的按钮. 加value=值

*<input type=”submit”>          :提交按钮.

*<input type=”reset”>             :重置按钮.

*<input type=”file”>         :文件上传的表单项.

*<input type=”hidden”>         :隐藏字段.

*<input type=”image”>          :图片按钮

*<select>                               :下拉列表.

        <  select name=””

<option value=”篮球”>篮球 </option>

*<textarea>                           :文本域.

        row=”5”cols

单选按钮要  加value=””  手动设定值

<frameset>  框架标签  与body冲突,有了frameset就可以没有body

<frame  > src=”引用页面路径” ,切割了几块,几个frame,设置每一块的属性

         name=

    用来标记块,利用target 指向特定位置

rows 分割行     rows=”15%”

cols  分割列(左右)

<frameset rows="20%,*">

display  属性   inline  列表标签横排