html学习(一)

代码标签

< head >用于存放title、meta、base

双标签

<标签名> 内容 </标签名>

< body > 标签开始的地方
< /body >标签结束部分
/ 标签结束部分

单标签

<标签名 />
也称为空标签,例如:< br /> 换行

标签关系

< html >
< head >
< title > < / title >
< /head >
< body >
< /body>
< /html>

嵌套关系

也就是父子关系
< html >是根标签,是一切标签的父标签
< head>是< html>的子关系,以此类推。

并列关系

也就是兄弟关系,例如:< head >与< body>是并列关系

开发工具

在这里学习的是Sublime

在sublime软件中快速生成html骨架,可以用“html:5”按Tab键即可生成或者直接输入“!”按Tab键也可以生成骨架。
快速生成html骨架
< !DOCTYPE html> 表示到底使用的是哪个版本的html,在这里使用的是html 5
< meta charset=“UTF-8” >表达的是用的是那个字符集 gb2312简体中文,BIG5繁体中文,GBK同时包含简体和繁体两种,utf-8则是表示包括全世界所有的国家使用的字符。

html标签语义化

先确定语义的html,再选合适的CSS

常用的html标签

排版标签

标题标签

< hn> 标题内容 < /hn>
< h1> < h2> < h3> < h4> < h5> < h6>,其中< h1>是最重要的,常用语logo
标题标签

段落标签

< p >文本内容< /p>
段落标签

水平线标签

< hr />是单标签
水平线标签

换行标签

< br />是单标签
换行标签
与段落标签相比,段落标签之间的距离比换行标签大一些。

div span标签

< div> 内容< /div>本身没有语义,只是在网页上开辟了一块区域。
< span> 内容 < /span>本事也没有语义,在已经开辟的区域上有一块透明的区域,只在span区域进行操作,div区域可不动。

文本格式化标签

< strong> < /strong>粗体
< em> < /em>斜体
< del> < /del>删除线
< ins> < /ins>下划线

	<strong>1.金秀贤</strong><br />
	<em>2.全智贤</em><br />
	<del>3.刘仁娜</del><br />
	<ins>4.朴海镇</ins><br />

文本格式标签

标签属性

使html标签有更多的属性,可以通过这个进行设置。
< 标签名 属性1=“属性值1” 属性2=“属性值2”…> 内容 < /标签名>
标签名与属性之间用空格隔开,属性与属性之间用空格隔开

	<hr width="500"  color="red"/>

水平线长度为500 颜色为红色

图像标签

< img /> 图像标签用于展示图像。

属性描述
scr图像路径(URL)
alt图像不能显示时的替换文本(文本)
title图标悬浮时显示的内容(文本)
width设置图片宽度(像素)
height设置图片高度(像素)
border设置图像边框的宽度(数字)

1.< img scr=" 图片URL" />在这里图片URL是在.html文件下同一个文件夹下的图片才能被获取到。

<img src="APP.jpg" />

插入图片url

2.< img scr=“图片URL” alt=“文本” />alt是当图片显示不出来时的提示文本。

<img src="APP1.jpg" alt="找不到图片" />  <br />

找不到图片的提示文本
3.< img scr=“图片URL” title=“文本” />title是当鼠标悬停在图片上时出现的文字。

<img src="APP.jpg" title="抖音" />  <br />

鼠标悬停展示文本
4.< img scr=“图片URL” title=“文本” width=“600” height=“400” />设置图片的大小。

<img src="APP.jpg" title="抖音" width="600" height="400" /> 

图片设置大小
5.< img src=“APP.jpg” title=“抖音” width=“600” height=“400” border=“10” /> < br />设置标签边框

<img src="APP.jpg" title="抖音" width="600" height="400" border="10" />  <br />

设置边框

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值