黑马程序员技术交流社区

标题: [石家庄校区] HTML 入门基础知识点 [打印本页]

作者: 中国好邻居 时间: 2018-1-17 15:57
标题: [石家庄校区] HTML 入门基础知识点
本帖最后由小石姐姐于 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

Ø 段落标签

<h2> 二级标签</h2> 一共<h1>标签到<h6>标签: h1 最大

Ø 段落标签：p标签

Ø 字体加粗标签：b标签

<b>黑马训练营</b>

Ø 字体斜体标签：i标签

<i>黑马训练营</i>

Ø 字体下划线：u标签

<u>黑马训练营</u>

Ø 居中标签：<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>

</ol>

有序列表中还有 start 属性, 仅针对数字有效

无序列表

<ul>

</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=””

*<textarea> :文本域.

row=”5”cols

单选按钮要加value=”” 手动设定值

<frameset> 框架标签与body冲突,有了frameset就可以没有body

<frame > src=”引用页面路径” ,切割了几块,几个frame,设置每一块的属性

name=

用来标记块,利用target 指向特定位置

rows 分割行 rows=”15%”

cols 分割列(左右)

display 属性 inline 列表标签横排

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

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