黑马程序员技术交流社区

标题: 【石家庄校区】第1章 HTML篇 [打印本页]

作者: 玩玩 时间: 2017-11-19 15:02
标题: 【石家庄校区】第1章 HTML篇
本帖最后由玩玩于 2018-5-5 21:04 编辑

第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的列表标签

有序列表

无序列表

<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

```

作者: 小石姐姐 时间: 2017-11-20 15:02
总结的太棒了

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2