黑马程序员技术交流社区
标题:
【石家庄校区】Web笔记
[打印本页]
作者:
buluo
时间:
2017-11-19 22:45
标题:
【石家庄校区】Web笔记
本帖最后由 小石姐姐 于 2017-11-20 13:27 编辑
HTML
Hyper Text Markup language ---超文本标记语言
*标记语言: 指的是通过一组标签的形式描述事物的一门语言.
*超文本:比普通的文本更强大
HTML作用
HTML是用来制作页面(静态页面)
HTML在那些地方使用
再设计网站的页面的时候都要使用HTML
HTML的使用
HTML创建
HTML文件,扩展名是.html或者是.htm
*HTML结构标签
*根标签:<html></html>
*<head> --html的头标签 要展示的标题
*<body> --html的体标签 要展示的内容
*<title> 网站的名字
例:
<html>
<head>
<title>网站的名字</title>
<meta charset="utf-8">
</head>
<body>
要展示的内容
</body>
</html>
HTML的字体标签
<font>标签:HTML中的字体标签
<font>文字</font>
*<font>标签的属性
*<标签 属性名="属性值" 属性名="属性值"></标签>
*属性:
*color属性:字体颜色
*英文单词设置:black,red
*使用16进制数设置:#FF(红)FF(绿)FF(蓝),#F(红)FF
*size属性:字体大小
*face属性:字体格式
HTML排版标签
标题标签
h标签<h1>...<h6>
段落标签:p标签:文字分段
粗体标签:b标签 文字加粗
斜体标签:i标签 文字斜体
下划线标签:u
居中标签:center 过时
标签嵌套:
分割符<hr />
空格
<pre>把一段内容原封不动的显示出来
HTML的图片标签
属性;
*src :图片的来源
*width :图片的宽度(默认单位px 像素点)
*height :图片的高度
*alt :图片找不到显示的内容
图片引入的路径问题:
路径:相对路径
*如果引入的图片和HMTL文件在同一级路径
*直接写文件名或者./文件名
<img src="图片名">
<img src="./图片名">
*如果图片引入在HTM文件上一级
*<img src="../图片名">
*如果图片引入在HTM文件上一级
*<img src="img/图片名">
HTML的列表标签
有序列表
<ol>
<li></li>
</ol>
无序列表
<ul>
<li></li>
</ul>
HTML的超链接标签
HTML的超链接标签:<a>
*属性
*href :链接的路径
*target :打开的方式
*_self :在自身页面打开
*-blank :新打开一个页面
扩展
无序列表属性
<ul style=""list-style: none"> 去掉小圆点
无序列表的属性:
* type属性
* disc ：实心点.
* circle ：空心圆
* square ：方块.
有序列表的属性:
* type属性:
* 1 ：数字类型
* a ：英文类型
* i ：罗马字符
* start属性:从哪开始
超链接的target属性:
* _self
* _blank
* _parent
HTML的表格标签
<table>
<tr>
<td>1行1列</td>
</tr>
</table>
属性:
Width :表格宽度
Height :表格高度
Border :表格边框
Align :表格水平位置
*left :
*center :居中
*right :
<tr>
背景图片:background="路径"
<td>属性
*colspan :行合并
*rowspan :列合并
(重点)HTML的表单标签
HTML的表单标签:<from>
属性
action:提交的路径(默认提交到当前页面)
method:请求的方式(默认的是GET)
get:数据是不安全的,数据会显示地址栏中.get会有数据大小限制
post:数据安全,不会显示在地址栏中.post提交数据是没有大小限制
HTML中表单元素:
*<input type="text"> :(text)文本框
*常用属性:
*name :表单元素的名称,必须有name属性,然后后台才可以接收数据
*value :文本框的默认值
*size :文本框长度
*maxlength:文本框输入的最大长度
*readonly:只读文本框
*<input type="password">:密码框
*属性
*name :表单元素的名称,必须有name属性,然后后台才可以接收数据
*value :密码的默认值
*size :密码长度
*maxlength:密码输入的最大长度
*readonly:只读密码框
*<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"> :隐藏字段 (存的是ID)
*<input type="image"> :图片按钮
*<select name=""> :下拉列表
<option>--请选择--<option>
<option>--北京----<option>
<option>--上海--<option>
*<textarea> :文本域
扩展HTML5里的属性:
<input type="email">
<input type="date">
<input type="number">
<input type="color">
HTML的框架标签
框架标签:<frameset>,标签与body标签冲突,有frameset就可以没有body
属性:
*rows :横着切
*cols :竖着切
使用<frame>标签,frame代表切分的每个部分
扩展特殊字符
空格:
< :< 小于
> :> 大于
作者:
wheat
时间:
2017-11-19 23:27
整理的不错
作者:
王荣荣
时间:
2017-11-20 11:36
整理的很清晰
作者:
小石姐姐
时间:
2017-11-20 13:28
太棒了，加油
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
