###web前端###html

刘国斌 77331283

###课程介绍

• web前端
  1. html 搭建页面结构和页面内容
  2. css 美化页面
  3. JavaScript 给页面添加动态的显示效果和动态内容
  4. jQuery js框架
• 数据库

###HTML

• Hyper Text Markup Language（超文本标记语言）,超文本指不仅仅是纯文本还包括字体样式颜色大小，和多媒体相关(图片、音频、视频)
• 学习HTML主要学习的就是有哪些标签，标签有哪些属性，标签和标签之间的嵌套关系
  ####创建一个HTML

1. 新建文件-》other-》搜索html

###body里面常用的标签
####文本标签

1. h1-h6 文本标题 align=“left/right/center”

2. p 段落标签

3. hr 水平分割线

4. br 换行
   ####列表标签

5. 无序列表

    <ul type="circle"> <!-- unordered 无序 list列表 -->
    	<li>刘备</li><!-- list 列表 item项-->
    	<li>貂蝉</li>
    	<li>孙尚香</li>
    </ul>
   

6. 有序列表

    <ol type="1" start="5" reversed="reversed"><!-- ordered有序 list列表 -->
    	<li>打开冰箱门</li>
    	<li>把大象装进去</li>
    	<li>关上冰箱门</li>
    </ol>
   

7. 定义列表 dl dt dd

    <dl><!-- definition定义 list 列表 -->
    	<dt>凉菜</dt><!-- definition定义 term 标题 -->
    	<dd>老醋花生</dd><!-- definition定义 description描述 -->
    	<dd>花毛一体</dd>
    	<dd>东北大拉皮</dd>
    	<dt>炒菜</dt>
    	<dd>宫保鸡丁</dd>
    	<dd>木须肉</dd>
    </dl>
   

• 列表嵌套：有序列表和无序列表可以任意无限嵌套

###分区标签（元素）

• 作用：

1. 可以对页面中的元素进行复用
2. 可以对页面中的多个元素进行统一管理

• div: 独占一行

• span: 共占一行

• 一般页面开发都会把页面分为三大区：

    <div>头部</div>
    <div>体部</div>
    <div>脚部</div>
  

• h5标准中新增了几个分区元素
  

  头部
  
  
  正文
  
  
  脚部

• 分区标签默认没有显示效果，可以理解成是装标签的容器。

###标签（元素）分类

1. 块级元素： 独占一行 包括：div，h1-h6，p ，hr
2. 行内元素： 共占一行 包括：span， b和strong，i和em，del和s，u

• 行内元素的空格折叠现象，只能识别一个空格，
  如果需要多个空格 则用 取代空格
  ####常见的特殊字符

1. 空格：  
2. <: <

3. : >

4. 换行:
   
   ####图片标签 img

• 常用属性：

1. src： 图片的路径
   1. 相对路径：访问站内资源时使用相对路径
      1. 和页面在同一目录：直接写图片名
      2. 在页面的上一级目录：…/图片名
      3. 在页面的下级目录：文件夹名/图片名
   2. 绝对路径：访问站外资源时使用，绝对路径以http开头，称为图片盗链，可以节省自己网站资源，但是存在找不到图片的风险
2. alt: 当图片不能正常显示的时候显示的文本
3. title： 当鼠标在图片上悬停时显示的文本
4. width、height：两种赋值方式：1. 像素 2. 上级元素的百分比

• 支持的图片格式： jpg（jpeg）、png、gif
  ###图像地图map

###超链接 a
如果a标签不加href属性 则就是纯文本
href属性的作用和图像地图里面的作用一样
target="_blank" 在新的窗口中显示目标页面
如果a标签包裹的是文本则是文本超链接 如果是图片则是图片超链接
可以通过超链接实现页面内部跳转，如果跳转的目的地是文本没有标签则需要添加一个空的a标签作为锚点，如果目的地有标签则直接在标签中添加id不需要单独添加锚点

###表格标签table
table常用属性：border边框的粗细单位是像素 cellspacing单元格的间距 cellpadding单元格距内容的距离 width align
子标签：tr行 td列 属性：跨行rowspan 跨列colspan caption表格标题 th表头字体加粗并居中
分组标签： thead 头部 tbody 体部 tfoot 脚部 分组标签没有显示效果，提高代码的可读性，对多行进行统一管理

###form表单
表单是用于获取用户输入的各种信息，并将信息提交到服务器的控件
表单包括以下几种控件：文本框、密码框、单选、多选、下拉选、时间选择器、文件选择器、文本域等
控件介绍：
文本框： type=“text” placeholder=“占位符” value=“默认文本” maxlength=“最大长度” readonly=“只读”
密码框： type=“password”
单选： type=“radio” id=“id” checked="checked 默认选中"文本
多选： type=“checkbox 复选框” 文本
日期选择器 ：type=“date”
文件选择器：type=“file”
隐藏域：type=“hidden”
下拉选 ：< select >
< option>< /option>
< /select >
文本域 :< textarea rows=“3” cols=“20” name=“intro” placeholder=“说点什么”>
提交按钮：type=“submit”
重置按钮：type=“reset”
自定义按钮：type=“button”