20201 1 6 HTML&CSS“重修”笔记

寒假开始。从健民老师的寒假指导先放一放,先重新系统性地学习HTML&CSS&Javastrip&AJax%JQuery,之后再研究健民老师的寒假作业。

HTML学习笔记

1、HTML基本标签。

段落标记  <p></p>

标题字 <h1~h6></h1~h6>

换行 <br>(独目标签)

水平线 <hr>(独目标签) 指定颜色属性(<hr color=”red”>),单引号和双引号都可以

预留格式 <pre></pre> 保留源码上的格式

粗体字 <b></b>

斜体字 <i></i>

插入字 <ins></ins> 有下划线

删除子 <del></del>有删除线

右上角加字 <sup></sup>

右下角加字 <sub></sub>

font字体标签 <font></font>,属性 color颜色,size字号

2、HTML实体符号

空格   大于 < 大于>

3、HTML表格

表格 <table></table> 边框 border=”1px”,(设置边框像素),width,宽度(可以写成百分比 的方式),height,高度(同宽度),align,对齐方式(center),cellspacing 属性规定单 元格之间的空间。cellpadding 属性规定的是单元边沿与单元内容之间的空间。

<tr></tr>

单元格 <td></td>

单元格合并。纵向合并,删除一个,在另一个单元格使用colspan=””属性,数字表示合 并的单元格数,行合并,删除下边的,上边的使用rowspan=””属性,数字表示合 并的单元格。

th标签 可以代替<td></td>单元格,内容会自动居中加粗。

Thead taody tfoot,分割table成三部分,为Javastrip的方便

4、背景颜色和背景图片

颜色 <body bgcolor=”red”><body>,背景图片 <body background=”图片文件路径”>,

图片 <imp src=”图片文件路径”></imp> (<imp src=”图片路径”/>)属性:width设置宽度, 高度等比例缩放,title 鼠标悬停提示文本,alt 图片加载失败的提示信息

图片漂浮于背景上方。

5、超链接

<a href=”资源链接路径”>***</a> 路径可以是连接本地路径,鼠标停留自动变成小手, 自动加下划线。图片可以做链接(标签嵌套,用imp)

Target属性,决定打开窗口的位置:”_self”(当前窗口),”_blank”,”_parent”(当前窗口父窗 ),”top”(当前窗口的顶级窗口).默认当前窗口,

<iframe src=”网址”></iframe>内部窗口

6、浏览器向服务器发送请求的两种方式:1、超链接 2、直接输入地址,本质上没有区别

7、列表

无序列表:

<ul type=”circle/square/disc”>

<li></li>(列表项)

<ul>

有序列表:<ol></ol>,type为序号的样式

8、Form表单

表单用来收集用户数据,并服务器发送请求(携带数据),没填写的提交空字符串

<form action=”填写url路径”>

表单项1

表单项2

</from>

请求提交按钮:<imput type=”submit” value=”按钮显示的文本”>name会提交过去,可 以传参,传value

重置表单按钮 type=”reset”

普通按钮:<imput type=”botton” value=”按钮显示的文本”>

文本框:<imput type=”text” name=”该属性表示提价数据的名称” value=”默认文本,可 有可无 ” />maxlength=”*”,控制最多输入几个字符

密码框:<imput type=”password” name=”该属性表示提价数据的名称” value=”默认文本, 可有可无 ”  />

单选 radiochecked表示默认选中,要写value

复选框 checkboxchecked表示默认选中,要写value

下拉  

<select>属性:size=””,表示下拉框显示的单元个数,multiple 支持多选

<option selected value=”**”>**</option> 默认选中为selected

<option value=”**”>**</option>

</select>

文本域  rowscols为行和列

file控件 传文件

Hidden控件 隐藏域  

readonlydisabled 表示只读,前者会提交,后者不会提交

9、ID属性

代表每个节点标签的身份证号,唯一性,为javastript服务,达到网页动态效果

10、divspan图层

每一个图层都是一个盒子

网页布局效果,更加灵活

现代化网页都是用divspan布局

默认div独自占用一行,span不会占,div可以嵌套divspan

CSS学习笔记

CSS 层叠样式表语言,用来修饰html,html的化妆品,依附在html上为html服务

1、html嵌入CSS的三种方式

A、内联定义

B、定义内部样式块对象

C、嵌入外部样式表对象

web开发中,第三种最常用,方便

内联定义

标签里使用style属性。语法:<标签 style=样式名 样式值;样式名 样式 值;样式名 样式值;”/>

定义内部样式块对象

直接定义style,<style type=””></style>

语法:

常见选择器:标签选择器,id选择器,类选择器。

A、标签选择器:标签名 { };

(作用于所有该标签)

B、id选择器 #id { }

(仅作用该ID的标签)

C、类选择器

给标签添加class属性,class可以相同。

格式:.class { }

嵌入(链入)外部样式表对象

定义CSS文件,链接外部的CSS文件,文件里可以使用各种选择器,类选择器优先级高,标签选择器较低,id选择器最高

<link rel=”stylesheet” type=”test/css”  href=”路径”/>

2、常见样式

隐藏:diaplay : none即可。(none 隐藏,blocK 显示)

文本装饰: text-decoratio。

今天总结的是前几天的笔记。

原文地址:https://www.cnblogs.com/fuxw4971/p/14243091.html