HTML + CSS + JavaScript速成

文章目录

HTML/CSS/JavaScript

HTML

Html HyperText Markup Language内容

  1. Html就是超文本标记语言的简写,是最基础的网页语言。
  2. Html是通过标签来定义的语言,代码都是由标签所组成。
  3. Html代码不用区分大小写。
  4. Html代码由开始结束。里面由头部分和体部分两部分组成。
  5. 头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载。
  6. 体部分是真正存放页面数据的地方。
  • 多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。

  • 想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。

  • 属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或公司规定书写规范。

  • 格式:<标签名 属性名=‘属性值’> 数据内容
    <标签名 属性名=‘属性值’ />

  • 操作思想:
    为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装的数据进行操作。
    标签就相当于一个容器。对容器中的数据进行操作,就是在再不断的改变容器的属性值。

font标签

  1. 字体标签:
    例:字体标签示例
    注:简单颜色可是直接写对应的英文,复杂颜色用16进制表示,表现形式#FF0000两个数为一组,按红,绿,蓝排列,如:#00FF00表示绿色。建议用工具选取。
  2. 标题标签:

     

    ……


    因为标题是文本中常用的内容,为了方便操作而定义的。其实就是某个字号和粗体的组合。

  3. 特殊字符:
    如果要在网页上显示一些特殊符号,比如< > & 等。因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊的方式来表示。
header 1 header 2
& lt; <
& quot;
& trade;
& gt; >
& reg; ®
& nbsp; 空格
& amp; &
& copy; ©
  1. 列表标签:

    :上层项目
    :下层项目
    例:
游戏名称
星际争霸
红色警戒
部门名称
技术部
培训部

列表中项目符号对应的标签

    :数字标签(a A 1 i I)
      :符号标签(○●■)
    • :具体项目内容标签。此标签只在

        • 中有效。
          通过type属性更改项目符号,如果想做出效果更好的列表,如:黑色圆点用图片表示,就用到CSS。

      font-01

      
      
      
      
      
      	冰冰
      
      
      
      

      font-011

       
      
      
      
      font_01
      
      
          
      	冰冰
      	
      	
      	

      标题

      标题

      标题

      标题

      标题
      标题
      <晨晨>

      图象

      1. 图像标签:
        例:
      ”图片说明文字”/
      

      align:属性定义图片的排列方式,border用来设置图像的边框。Src 连接一个文件
      2. 图像地图:
      应用:当要在图像中选取某一部分作为连接的时候。如:中国地图每个省所对应的区域。
      map标签要和img标签联合使用。Href是超连接

      图片说明文字
        
          
          
        
      

      image-01

      
      
      
      
      img_02
      
      
      	
         美女
      
      
      	
      	美图
      
      
      

      表格

      • 表格标签:


        组成:标题标签:

      • 单元格标签:

      • ,给表格提供标题。
        表头标签:
        ,一般对表格的第一行或者第一列进行格式化,就是粗体显示。并不常用。
        行标签:
        ,加载行标签的里面。可以简单理解为,先有行,在行中在加入单元格。
        格式:

        表格标题
        姓名 年龄
        张三 23

        效果:

        姓名 年龄
        张三 23
        表格标题
        姓名 年龄
        张三 23

        table-03

        
        
        
        
        table_03
        
        
        
        	
        姓名 年龄 美照
        冰冰 18

        超链接标签:

        两种用法:

        1. 超链接
          例:
        新浪
        
        
        1. 定位标记
          一般在本页面中使用,当网页内容过长,定位标记会比拖动滚动条方便快捷。
          注:定位标记要和超链接结合使用才有效。
          例:
        标记位置
        

        …… 返回标记位置 注:使用定位标记时一定在href值的开始加入#标记名。

        href-04

        
        
        
        
        超链_04
        
        
        	
        	haha
        	baidu
        	
        	ook
        
        
        

        表单标签:

        表单标签是最常用的标签,用于与服务器端的交互。
        :输入标签 :接收用户输入信息。
        其中的type属性指定输入标签的类型。

        • 文本框 text。输入的文本信息直接显示在框中。
        • 密码框 password。输入的文本以原点或者星号的形式显示。
        • 单选框 radio 如:性别选择。
        • 复选框 checkbox 如:兴趣选择。
        • 隐藏字段 hidden 在页面上不显示,但在提交的时候随其他内容一起提交。
        • 提交按钮 submit 用于提交表单中的内容。
        • 重置按钮 reset 将表单中填写的内容设置为初始值。
        • 按钮 button 可以为其自定义事件。
        • 文件上传 file 后期扩展内容,会自动生成一个文本框,和一个浏览按钮。
        • 图像 image 它可以替代submit按钮。



        form-table-06

        
        
        
        
        form_table_06
        
        
        	
        姓名:
        密码:
        性别:
        爱好: java 大数据 php
        上传文件
        普通按钮
        国籍
        个人介绍

        CSS

        • DHTML 是网页中 HTML、样式表和脚本的组合应用程序,增强网页的交互性
        • 样式分为行内样式、内嵌样式、外部样式
        • 样式表包括选择器和样式规则,选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类
        • 都是容器标签,
          是块级标签,可包含段落、标题等,是行级标签,不能包含段落、标题等,只能包含部分文字

        行内样式

        
        
        
        
        行内样式:通过style直接给某个具体的标签设置样式
        
        
        
        	

        冰冰真漂亮

        晨晨开心

        内嵌样式

        
        
        
        
        内部样式(内嵌样式)
        
         
         
         
         
         
         
         
         
          
          
          
          
        
        
        	

        冰冰1

        冰冰1

        冰冰1

        冰冰2 冰冰3 冰冰4 真热

        外部样式

        
        
        
        
        外部样式
        
        
        
        
        	

        该下课了,累了

        一会儿芳姐给大家发红包1000

        div:

        
        
        
        
        div:层
        
        
        
        
        美图

        这里是第一层包含图片,文字

        美图

        这里是第二层包含图片,文字

        JavaScript

        js小结

        • 网页中嵌入脚本有两种方式:使用

          哈哈

          基本语法

          
          
          
          
          js2:基本语法
          
          
          
          
          	
          
          
          

          流程控制语句和函数

          
          
          
          
          js3:流程控制语句和函数
          
          
          
          
          
          第一个数:
          第二个数:
          商:

          图片自动更新

          
          
          
          
          
          
          
          
          美女自动更新
          
          
          
          
          
          
          
          

          实例

          
          
          
          
          买美女
          
          
          
          
          低价拍卖美女
          

          移过来看看我啊

          漂浮的图片

          
          
          
          
          漂浮的图片
          
          
          
          
          

          鼠标获取

          
          
          
          
          鼠标获取onfocus释放onblur焦点
          
          
          
          
          
          
          卡号:

          密码:

          js中的数组

          
          
          
          
          js中的数组
          
          
          
          
          
          
          
          
          

          生成随机验证码

          
          
          
          
          生成随机的验证码,用户输入验证码,验证用户输入的是否正确
          
          
          
          输入验证码
          

          统计字数

          
          
          
          
          用户在文本域中输入多个字符,当点击按钮时分别统计字符串中大写字母,小写字母,
                            数字以及其他字符的个数并把统计结果显示在div中
          
          
          
          
          还剩下(100)个字
          
          

          标签与js分离

          
          
          
          
          标签与js分离
          
          
          
          
          
          
          

          js的工具类

          
          
          
          
          js的工具类
          
          
          
          
          
          
          
          
          

          你可能感兴趣的:(html,css,javascript)