HTML 笔记大全Word下载.docx
- 文档编号:15795671
- 上传时间:2022-11-16
- 格式:DOCX
- 页数:33
- 大小:32.88KB
HTML 笔记大全Word下载.docx
《HTML 笔记大全Word下载.docx》由会员分享,可在线阅读,更多相关《HTML 笔记大全Word下载.docx(33页珍藏版)》请在冰豆网上搜索。
4.标签不区分大小写。
5.有些标签没有结束标签,在标签内结束,<
hr/>
水平线。
HTML的核心思想(*****)
网页很多数据,不同的数据需要显示的效果不一样,这个时候需要使用标签把要操作的数据(包装起来),通过修改标签的属性值实现标签数据样式的变化。
一个标签相当于一个容器,想要修改容器内的样式,只需要改变容器的属性值,就可以实现容器内数据的样式变化。
HTML最常用的标签
2.文字标签和注释标签
*文字标签:
修改文字的样式
-<
font>
/font>
属性size:
文字的大小范围1-7超出默认为7。
color:
文字颜色两种表示:
1.英文单词:
redgreen。
2.使用16进制表示#ffffff
*注释标签:
!
--html的注释-->
。
3.标题标签,水平线标签和特殊字符
标题标签:
大小依次变小自动换行<
h1>
/h1>
h2>
/h2>
>
……
水平线标签:
属性:
**Size:
水平线粗细**Color:
颜色
代码<
hrsize=”5”color=”blue”/>
换2行。
特殊字符:
:
&
lt;
>
gt;
空格:
nbsp;
&
:
amp;
4.列表标签展示效果
dl>
传智播客<
dt>
传智播客<
/dt>
财务部<
dd>
财务部<
/dd>
学工部<
学工部<
人事部<
人事部<
/dl>
***<
表示列表范围
表示上层内容
表示下层内容
***………………………………………..
****<
ol>
/ol>
有序列表的范围
属性type:
设置排序方式1(默认)ai。
**在ol标签里面<
li>
具体内容<
/li>
代码:
人事部<
ul>
/ul>
属性type:
实心圆circle空心圆disc实心方块square,默认disc
5、图像标签(******)
imgsrc=”图片的路径”width=””height=””alt=”图片上显示的文字”/>
--src:
图片的路径
--width:
图片的宽度–height:
图片的高度–alt:
图片上显示的文字。
6、路径的介绍
**绝对路径:
完整的路径。
**相对路径:
一个文件相对于类外一个文件的位置。
**html文件和图片在同一个路径下,直接把名字写在路径下。
**图片在html下一层的路径,把后面的路径拿过来用。
**图片在html上一层的路径,../加上图片的名字。
../../表示上2层路径。
7、案例联系
*<
pre>
原样输出标签<
/pre>
8、超链接标签(*****)
***链接资源
ahref=”链接到资源的路径”>
顶部<
/a>
href:
链接的资源的地址,里面的如果是空链接时”#”表示。
target:
设置目标打开的方式,默认在当前页打开。
_blank:
在新的页面打开。
_self:
在当前页面打开。
***定位资源
***如果想定位资源:
定义一个位置
aname=”top”>
顶部<
**回到这个位置
ahref=”#top”>
回到顶部<
9、表格标签(*****重要的很******)
table>
表格的范围
属性:
border=”1”bordercolor=”blue”cellspacing=”0”width=”40”height=”40”.
border:
表格线bordercolor:
表格线颜色cellspacing:
单元格之间的距离。
tralign=”left”>
表示行<
/tr>
td>
在行标签的里面表示行里面的单元格<
/td>
在tr和td标签下属性:
显示方式align:
leftcenterright
th>
表格实现居中加粗标签<
/th>
***表格标题写着table里面
caption>
表格标题标签<
/caption>
tr>
***表示几行。
***表示每行的单元格。
/table>
表格技巧:
先数有几行有几行就有几个<
,在数每行有多少个单元格<
**合并单元格
跨行:
rowspan=”几行”
跨列:
colspan=”几列”
10、表单标签<
form>
表示定义一个表单的范围<
/form>
******form里面的属性
***action=”路径”数据跳到页面。
***method=”请求的方式”有以下2种。
1.get和post,默认是get。
2.get请求携带提交数据,安全性低,数据大小有限制。
Post相反。
*****enctype:
做文件上传需要设置这个属性。
**输入项:
可以输入内容和选择内容的部分。
必须加一个name属性。
必须有一个value属性值
--大部分的输入项使用<
inputtype=”输入项类型”/>
***普通输入项:
inputtype=”text”/>
***密码输入项:
inputtype=”password”/>
***单选输入项:
inputtype=”radio”/>
***文件输入项:
inputtype=”file”/>
上传用。
---在里面加属性:
name=””----Name属性值一定要一样
**实现默认选项checked=”checked”放在想选择的属性上。
***多选输入项:
inputtype=”checkbox”/>
----必须有一个value属性值。
***下拉输入项(不是在input标签里面的)。
selectname=”birth”name=”mingzi”>
optionvalue=”1992”>
1992selected=”selected”<
/option>
***选项
optionvalue=”1993”>
1993<
/select>
**实现默认选项selected=”selected”放在想选择的属性上
***文本域
textareacols=”20”rows=”10”>
/textarea>
***隐藏项(代码中有而在页面上不会显示)
inputtype=”hidden”/>
***提交按钮
inputtype=”submit”value=”按钮上的字”/>
?
输入项name的值=输入的值
***参数类似于key=value形式.
***图片提交按钮:
inputtype=”image“src=”图片路径”/>
**重置按钮(回到输入项的初始状态)
inputtype=”reset”value=”按钮上的字”/>
**普通按钮
inputtype=”button”value=”按钮上的字”/>
11、案例:
使用表单来实现注册页面。
-------使用表格实现页面效果。
-------超链接不想要她有结果href=”#”
-------如果表格里面的单元格没有内容,使用空格作为占位符&
nasp;
-------使用图片提交表单<
inputtype=”image”src=”图片的路径”/>
12、html中其他的常用标签的使用
b:
加粗
s:
删除线
u:
下划线
i:
斜体
pre:
原样输出
sub:
下标
sup:
上标
div:
自动换行显示块
span:
不会自动换行在一行显示块
p:
段落标签比br标签多换一行。
13、html的头标签的使用
*html两部分组成head和body
**在head里面的标签是头标签
**title:
表示游览器显示的内容。
**meta:
设置页面上的一些内容。
metaname=”keywords”content=”毕姥爷,熊出没,刘翔”>
**content:
内容的意思。
metahttp-equiv=”refresh”content=”3”;
url=”绝对定位的地址”/>
refresh:
刷新后面3表示内容刷新的时间为3秒.
**base标签:
设置超链接的基本设置
basetarget=”_blank”/>
**link标签:
引入外部文件
**明天css,可以使用link标签引入css文件。
14、框架标签的使用
frameset>
--row:
按照行进行划分
***<
framesetrows=”80,*”>
-cols:
按照列划分
framesetcols=”80,*”
frame>
-具体显示的页面
---<
framename=”lower_left”src=”页面目录路径”>
***使用框架标签的时候,不能写在body里面,使用框架标签,需要把body去掉。
例子:
framesetrows=”80,*”>
//把页面划分成上下2部分
framename=”top”src=”页面路径”>
//上面页面
framesetcols=”180,*”>
//把下面页面划分成左右2部分。
framename=”lower_left”src=”页面路径”>
//左边页面
framename=”lower_right”src=”页面路径”>
//右边页面
/frameset>
**如果在左边的页面设置超链接,让内容显示在右边的页面中
⏹设置超链接里面的属性,target值成名称
⏹<
ahref=”页面的地址”target=”right”>
超链接1<
15、a标签的扩展
-XX是网络资源
-当a标签里面访问网路资源的时候,必须要家一个协议http:
表示一个网路的公共协议。
-如果加上http协议之后,自动识别访问资源是一个网络资源。
-当浏览器里面找到相关协议,首先看这个协议是不是公共协议http。
-如果不是公共协议,回去本地电脑支持这个协议的应用程序。
1、css的简介
**css:
层叠样式表
**层叠:
一层一层的
***样式表:
很多属性和属性值
*使页面显示效果更加好
*css将页面内容和显示样式进行分离,提高了显示功能。
2、css和html的结合方式(4种结合方式)
*.在每个html标签上面都有一个
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 笔记大全 笔记 大全