刘国斌 77331283
###课程介绍
- web前端
- html 搭建页面结构和页面内容
- css 美化页面
- JavaScript 给页面添加动态的显示效果和动态内容
- jQuery js框架
- 数据库
###HTML
- Hyper Text Markup Language(超文本标记语言),超文本指不仅仅是纯文本还包括字体样式颜色大小,和多媒体相关(图片、音频、视频)
- 学习HTML主要学习的就是有哪些标签,标签有哪些属性,标签和标签之间的嵌套关系
####创建一个HTML
- 新建文件-》other-》搜索html
###body里面常用的标签
####文本标签
-
h1-h6 文本标题 align=“left/right/center”
-
p 段落标签
-
hr 水平分割线
-
br 换行
####列表标签 -
无序列表
<ul type="circle"> <!-- unordered 无序 list列表 --> <li>刘备</li><!-- list 列表 item项--> <li>貂蝉</li> <li>孙尚香</li> </ul>
-
有序列表
<ol type="1" start="5" reversed="reversed"><!-- ordered有序 list列表 --> <li>打开冰箱门</li> <li>把大象装进去</li> <li>关上冰箱门</li> </ol>
-
定义列表 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>
- 列表嵌套:有序列表和无序列表可以任意无限嵌套
###分区标签(元素)
- 作用:
- 可以对页面中的元素进行复用
- 可以对页面中的多个元素进行统一管理
-
div: 独占一行
-
span: 共占一行
-
一般页面开发都会把页面分为三大区:
<div>头部</div> <div>体部</div> <div>脚部</div>
-
h5标准中新增了几个分区元素
头部
正文
-
分区标签默认没有显示效果,可以理解成是装标签的容器。
###标签(元素)分类
- 块级元素: 独占一行 包括:div,h1-h6,p ,hr
- 行内元素: 共占一行 包括:span, b和strong,i和em,del和s,u
- 行内元素的空格折叠现象,只能识别一个空格,
如果需要多个空格 则用 取代空格
####常见的特殊字符
- 空格:
- <: <
-
: >
- 换行:
####图片标签 img
- 常用属性:
- src: 图片的路径
- 相对路径:访问站内资源时使用相对路径
- 和页面在同一目录:直接写图片名
- 在页面的上一级目录:…/图片名
- 在页面的下级目录:文件夹名/图片名
- 绝对路径:访问站外资源时使用,绝对路径以http开头,称为图片盗链,可以节省自己网站资源,但是存在找不到图片的风险
- 相对路径:访问站内资源时使用相对路径
- alt: 当图片不能正常显示的时候显示的文本
- title: 当鼠标在图片上悬停时显示的文本
- 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”