Tom学Java
Tom学Java

Web前端之HTML+CSS的知识总结

Html和CSS的关系

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

  1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

  2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

  3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

HTML篇

认识html

  • html不是一种编程语言，是一种标记语言。
  • 标记语言是由一套标识标签组成的
  • html使用标签来描述网页

html结构


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
	body>
html>

不成对出现的标签

html基本标签讲解

标签

—
仅仅用于标题文本，不要为了产生粗体文本使用它们

段落标签
标签 让文字产生加粗效果

  • 用于强调文本，强度更深，表示重要文本—>用于SEO优化
  • 只是视觉加粗效果—>单纯为了产生加粗

标签

  • em用于强调文本
  • i只是视觉斜体效果
  • 比强调更强

特殊符号：
 ; —->空格
>; —>大于号
<；—>小于号
"；—>引号
©;–>版权号

HTML基本标签

span 标签
            对被用来组合文档中的行内元素
          注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化

 标签
             文字的格式按源码的排版来显示，我们称之为预处理格式
 标签—>他有一个必不可少的属性 href
         target属性：
         _self(在原来页面打开)
         _blank（新窗口打开）
         _top（打开时忽略所有的框架）
         _parent（在父窗口中打开）
 
  
创建锚点和锚链接
         锚点也是一种超链接，是页面内进行跳转的超链接
                 第一步：创建锚点 
                第二步：使用创建好的锚点名称 内容
 
  
marquee标签
         可以创建一个内容滚动效果
 
  
<marquee direction="down" loop="4" οnmοuseοver=this.stop() οnmοuseοut=this.start()>marquee>

 
  
direction表示滚动方向，取值有（left,right,up,down,默认left）
 loop表示滚动循环的次数，默认为无限循环
 
  
 οnmοuseοver=this.stop()  οnmοuseοver=this.start()  scrollamout="1"(滚动速度)
 

 
  
表示当鼠标移上区域的时候停止滚动，鼠标移开继续滚动
 
  
img图片标签与路径
 
  
图片标签与路径：
 
  
     
   
  • 常见图片格式：jpg/Jpeg png(半/全透明都支持) gif(只支持全透明)
    •  
  
 
  
图片标签写法：
 
  
<img src=" " alt=" " width=" " height=" " />

 
  
图片四要素：
 src="" 图片路径
 alt="" 图片含义
 width=""图片宽度 和图片大小保持一致
 height=""图片高度 和图片大小保持一致
 title="" 标题
 
  
相对路径、绝对路径：
 
  
     
   
  • 相对路径：(Relative Path) 相对于该文件的路径；
    •  
   
  • 绝对路径：(Absolute Path) 从磁盘出发的路径；
    •  
  
 
  
列表
 
  
1、无序列表
 
     无序列表
     
  
       
   
    • 无序列表是一个没有顺序项目的列表，此列表项默认粗体圆点进行标识
      •  
  
     
  
    <ul>
   <li> li>
    <li> li>
     <li> li>
ul>
   

     
  
    2、有序列表
     有序列表也是一列项目，只是列表项目使用的是数字进行标记。 有序列表始于 
       标签。每个列表项始于 
    1. 标签。
       
  
      <ol>
             <li>内容一li>
             <li>内容二li>
             <li>内容三li>
 ol>

       
  
      列表符号
       
  
         
   
      • 无序列表-列表符号：
         type="circle"空心圆 type=“disc”实心圆 默认值 type="square" 方块符
        •  
   
      • 有序列表-列表符号
         1、type="A" A B C D
         2、type="a"a b c d
         3、type="1"1 2 3 4 默认值type=”I” I II III type=”i” i ii iii
        •  
  
       
  
      3、无序列表-嵌套
       
  
         <ul>

         <li>柚子
       
          <ul>
       
              <li>沙田柚li>
   
              <li>蜜柚li>
    
           ul>
    
         li>
      
         <li>荔枝li>
 
         <li>苹果li>
ul>
       

       
  
      4、有序列表-嵌套
       
  
      <ol>
      
         <li>茶
              <ul>
             		 <li>红茶li>
          			 <li>绿茶li>
       
             ul>
      
         li>
         <li>果汁li>
         <li>牛奶li>
ol>

       
  
      5、定义列表
       
  
         
   
      • 定义列表不仅仅是一列项目，而是项目及其注释的组合
        •  
   
      • 定义列表以 
         标签开始。每个定义列表项以 
        开始。每个自定义列表项的定义以 
         开始。
        •  
  
       
  
      <dl>
  <dt>pc网页制作dt>
  <dd>学习DIV+CSS JS JQ 项目实战/dd>
  <dt>手机网页制作dt>
  <dd>手机网页制作实战dd>
dl>

       
  
      dd是对dt的解释
       
  
      < dl>< /dl>用来创建一个普通的列表,
       < dt>< /dt>用来创建列表中的上层项目，
       < dd>< /dd>用来创建列表中最下层项目，
       < dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。
       
  
       <dl>

            <dt>中国城市dt> 
           		 <dd>北京 dd>
            	 <dd>上海 dd> 
            	 <dd>广州 dd>
            <dt>美国城市dt>
           		 <dd>华盛顿 dd>
            	 <dd>芝加哥 dd>
            	 <dd>纽约 dd>
        dl>

       
  
       
   
      dl是definition list的缩写
       dt是definition title的缩写
       dd是definition description的缩写
       
  
       
  
       
   
      list-style属性具有三个属性分量：
       list-style-position：设置列表项图标的位置，位于文本内或者文本外
       list-style-type： 设置列表项图标的类型
       list-style-image：使用图像设置列表项图标
       
  
       
  
      表单元素
       
  
      表单标签
                 表单是一个包含表单元素的区域，包括起来的都是表单的内容
       
  
      <form>
         <input type="text"/>
 form>
             

       
  
      html标签 - Action和确认按钮
       
  
         
   
      • 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
        •  
  
       
  
      <form action="html.do" method="get">    
  
                username:  <input type="text" name="user" />   
                form>

       
  
      标签常用type类型
       
  

       type="text"单行文本输入框
       type="password" 密码（maxlength=""）
       type="radio" 单项选择（checked="checked"）
       type="checkbox"多项选择
       type="button"按钮
       type="submit"提交 type="image"图片提交
       type="file"上传文件
       type="reset"重置
       type="hidden"隐藏
       
  
      标签
       
  
      <label>label>

       
  
       
   
      label 元素不会向用户呈现任何特殊效果。
       不过，它为鼠标用户改进了可用性。
       如果您在 label 元素内点击文本，就会触发此控件。
       就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
       
  
       
  
      <p>单向选择p>
   
            <label for="male">男：label><input type="radio" name="sex" id="male"/>
           
            <label for="nv">女：label>
           

       
  
      表单和表格标签：
       是文本域标签，可以在其中插入一段文字内容，它有两个常用属性rows和cols
       
  
         
   
      • rows表示这个文本域有多少行
        •  
   
      • cols表示这个文本域有多少列
        •  
   
      • 除了这两个属性它还有readonly（只读，文本域的内容无法改变，相当于协议）和title（鼠标放上提示）
        •