第1章 HTML篇* font:字体
* disc:实心点
* square:正方形,方块
* target:目标,指标
* width:宽度
* border:边框
* align:排列,[JavaWeb]水平位置
* span:跨度
* button:按钮,[JavaWeb]没有任何功能的按钮
* submit:提交
* reset:重置
* hidden:隐藏
* image:图片
* type:类型
* style:风格
* solid:实心的
* decoration:装饰,[JavaWeb]下划线
* italic:斜体字
* weight:重量
* frame:框
HTML的概述

• 什么是HTML
  
  • HTML:Hyper Markup Language --- 超文本标记语言
  • 标记语言:指的是通过一组标签的形式描述事物的一门语言
  • 超文本:比普通的文本更强大
    
• HTML的作用
  
  • HTML是用来制作页面(静态页面),展示页面
    
• HTML在哪些地方使用
  
  • 在设计网站的页面的时候都要使用HTML
    
  
  

HTML的使用

• HTML的文件的创建
  
  • 一个HTML文件,扩展名是.html或者htm
  • 01.html
    
• HTML结构标签
  
  • 根标签:
    
    • --html的头标签
    • --html的体标签
      
  
  

HTML的图片标签

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

HTML的列表标签

有序列表

<ol>    <li></li></ol>

无序列表

<ul>    <li></li></ul>HTML的超链接标签

• 超链接标签:<a>
  
  • 属性:
    
    • href:链接的路径
    • target:打开的方式
      
      • _self:在自身页面打开
      • _blank:新打开一个窗口
      • _parent:
        
  
  

HTML的表格标签<table>    <tr>        <td></td>        <td></td>    </tr></table>

• <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="username" value="" size="20" maxlength="6" >
    
    • 常用属性
      
      • 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>
    
  
  

HTML的框架标签

• 框架标签:,标签与body标签是冲突,有frameset就没有body
  
  • 属性:
    
    • rows
    • cols
      
  • 使用<frame>标签，frame代表切分的每个部分
  • 特殊字符:
    
    • 空格:
    • < : <
    • > : >
      
  
  

常用标签
* <div>
* <span>
* <ul>
* <a>
* <i>:倾斜,图片

```单词记忆

背景相关   
背景颜色 background-color:red;   
背景图片 background-image:"url(xx.png)";   
背景重复 background-repeat:no-repeat;   
背景位置 background-position   
背景缩写 background:color image repeat position

边框   
边框样式 border-style:none/solid   
边框宽度 border-width   
边框简写 border-1px solid black

文本   
左右对齐 text-align:center/left/right   
去除下划线 text-decoration:none   
上下居中 line-height=100px;height=100px

字体   
字体大小 font-size:12px   
字体:font-family:"微软雅黑"   
字体加粗:font-weight:400px   
字体样式:font-style:normal/italic   
简写:font:style weight size family.常用的是font:size family   
颜色:color:red

列表   
去除小圆点:list-style:none

```

总结的太棒了