本帖最后由 小石姐姐 于 2018-1-18 11:13 编辑
HTML 入门基础知识点
什么是HTML
HTML:HyperText Markup Language --- 超文本标记语言.
*标记语言:指的是通过一组标签的形式描述事物的一门语言.
*超文本:比普通的文本更强大.
HTML的作用
HTML是用来制作页面(静态页面).
HTML在那些地方使用
在设计网站的页面的时候都要使用到HTML.
【HTML的使用】
HTML的文件的创建
一个HTML文件,扩展名是.html或者.htm结尾
* 01.html
Ø <font>标签:HTML中的字体标签.
使用:<font>文字</font>
*<font>标签的属性:
* <标签 属性名=”属性值” 属性名=”属性值”></标签>
* 属性:
* color属性:字体颜色
* 英文单词设置:black,red,green,blue...
* 使用16进制数设置:#FFFFFF , #FFF
* size属性:字体的大小
* face属性:字体
nbsp
Ø 段落标签
<h1>一级标签</h1>
<h2> 二级标签</h2> 一共<h1>标签到<h6>标签: h1 最大
Ø 段落标签:p标签
Ø 字体加粗标签:b标签
<b>黑马训练营</b>
Ø 字体斜体标签:i标签
<i>黑马训练营</i>
Ø 字体下划线:u标签
<u>黑马训练营</u>
Ø 居中标签:<center>标签
<center>内容</center>
<br>换行
<hr>水平线
Ø 空格
Ø 保存原有格式,不转义,包括空格等<pre> <pre>
Ø 图片标签<img>
属性有: src 图片的来源
width :图片的宽度. 100px px代表像素
height:图片的高度. 50px
alt :图片找不到显示的内容
图片引入问题
相对路径:
如果在同一级,就可以直接写 文件名 或者 ./文件名
<imgsrc="cs10006.jpg" />
<imgsrc="./cs10006.jpg" />
如果在上一级, 则写 . ./文件名
* <imgsrc="../cs10006.jpg" />
*如果引入的图片在html文件的下一级路径。
* <imgsrc="img/cs10006.jpg" />
HTML 列表标签
有序列表
<ol>
<li></li>
</ol>
有序列表中还有 start 属性, 仅针对数字有效
无序列表
<ul>
<li></li>
</ul>
HTML:
*HTML的概述:
* HTML:Hyper Text Markup Language.
* HTML就是由一组标签所组成的.
*HTML的字体标签:
* <font>标签:
* 属性:color,size,face
*HTML的排版标签:
* h标签:标题标签.
* p标签:段落标签.
* b标签:加粗标签.
* i标签:斜体标签.
* u标签:下划线标签.
* br标签:换行.
* hr标签:水平线.
*HTML的图片标签:
* img标签:
* 属性:
* src属性:图片的路径.
* 相对路径: ./ 代表当前目录 ../上一级目录
* width,height,alt.
*HTML的超链接标签:
* a标签:
* 属性:
* href:链接的路径.
* target:链接打开的方式._self,_blank,_parent
*HTML的列表标签:
* 无序列表:<ul>
* 有序列表:<ol>
*HTML的表格标签:
* table标签:
* tr标签:表格的行.
* td标签:表格的列.
*HTML的表单标签:(*****)
* form标签:
* action属性:表单提交的路径
* method属性:表单的提交的方式.
* GET和POST:
* GET:地址栏上会显示提交的数据的信息,大小限制.
* POST:地址栏不会显示提交的数据的信息,没有大小限制.
* <input>
* type=”text”:文本框
* type=”password”:密码框.
* type=”radio”:单选按钮.
* type=”checkbox”:复选框.
* type=”file”:文件上传.
* type=”hidden”:隐藏字段.
* type=”submit”:提交按钮.
* type=”reset”:重置按钮.
* type=”button”:普通按钮.
* type=”image”:图片按钮.
* <select>:下拉列表.
* <textarea>:文本区
*HTML的框架标签:
*<frameset>
*<frame>
CSS:
*CSS的概述:层叠样式表.
* 修饰HTML的页面.使页面与样式分离.
*CSS的语法:
* 选择器{属性名:属性值;属性名:属性值;...}
*CSS的引入方式:
* 行内样式:在html元素上使用style属性设置
* 内部样式:在html中使用<style></style>进行设置
* 外部样式:定义一个css文件,在html中引入该文件.<linkhref=”” type=”” rel=””/>
* CSS的选择器:(****)
* 元素选择器:
* ID选择器:
* 类选择器:
* 后代选择器:
* 子元素选择器:
*CSS的样式:
* 文本
* 背景
* 字体
* 列表
*CSS的盒子模型:
* 内边距:padding
* 边框:border
* 外边距:margin
*CSS的悬浮和定位:
* 悬浮:float属性设置悬浮.
* 清除悬浮:clear属性清除.
* 定位:position属性设置定位.
* 使用left和top属性控制位置.
* display属性:控制元素的显示方式:
* block--显示的, none--隐藏的,inline--显示到一行.
JS:
*JS的概述:JavaScript运行在浏览器端脚本语言.
*JS的历史:由网景公司研发的.由ECMA组织统一标准:ECMAScript.
*JS的组成:ECMAScript,BOM,DOM.
*JS的语法:
* JS的变量声明:
* JS的数据类型:
* 原始类型:undefined, 未定义类型
boolean 布尔类型
string 字符或者字符串
number 数字
null(Oject)
* 引用类型:对象类型null
* JS的运算符:
* 与java中基本一致.有一个 === 类型与值都相同的情况下才会为true.
* JS的语句:
* 与Java中的语句一致.
*简单的表单校验:
* 正则的校验:使用String的match方法和正则中的test方法.
超链接标签 < a >
属性;
href : 链接到路径
target :打开的方式
_self 在自身页面打开
_blank 新打开一个窗口
表格标签
<table> 表
<tr> 行
<td> </td> 列
</tr>
</table>
属性:
width :表格宽度
height :表格高度
border :边框
align :表格水平位置:
* left
* center
* right
<td>的属性:
* colspan=”列数”
表单标签 < form>
HTML中表单元素:
*<input type=”text”> :文本框.
* 常用属性:
method :请求的方式,get 和post,默认是get
get和post的区别
post:不会显示在地址栏中,数据在请求体中
get:1.显示在地址栏中,并且
2.get方式提交有大小限制
3.get方式数据在请求行中
action ;提交的路径,默认提交到当前页面
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
*<input type=”password”> :密码框.
* 常用属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.
*<input type=”radio”> :单选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
*<input type=”checkbox”> :复选按钮. 加value=值
* 常用的属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
*<input type=”button”> :普通按钮.没有任何功能的按钮. 加value=值
*<input type=”submit”> :提交按钮.
*<input type=”reset”> :重置按钮.
*<input type=”file”> :文件上传的表单项.
*<input type=”hidden”> :隐藏字段.
*<input type=”image”> :图片按钮
*<select> :下拉列表.
< select name=””
<option value=”篮球”>篮球 </option>
*<textarea> :文本域.
row=”5”cols
单选按钮要 加value=”” 手动设定值
<frameset> 框架标签 与body冲突,有了frameset就可以没有body
<frame > src=”引用页面路径” ,切割了几块,几个frame,设置每一块的属性
name=
用来标记块,利用target 指向特定位置
rows 分割行 rows=”15%”
cols 分割列(左右)
<frameset rows="20%,*">
display 属性 inline 列表标签横排
|