A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小石姐姐 于 2018-1-18 11:13 编辑

           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  列表标签横排


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马