H5学习---html,css---标签

16 篇文章 0 订阅

站点的作用

用来归纳一个网站上所有的网页、素材以及他们之间的联系
规划网站的所有内容和代码整合资源

创建站点的步骤

菜单栏中文件 -- 新建 -- web项目 -- 项目的命名(包含小写英文字母、数字、_,字母开头,不能有空格和特殊字符) -- 选择非C盘 -- 确定

站点中包含

css文件夹,用来放置css文件
img文件夹,用来放置图片
js文件夹,用来放置js文件
index.html,一般是网站的首页

web标准组成

结构html,xhtml
表现css
行为javascript(js)

组织

w3c:万维网联盟,制定结构html和表现css的标准
ECMA:制定js标准(DOM和ECMAScript)

HTML超文本标记语言

HTML文档结构

<!DOCTYPE html> html5的文档声明
<html></html>根元素,有且只有一个
根元素内部有
	<head></head>页面头部,一般放置页面的信息
	<body></body>页面主体内容,一般放置html标签
head内部有
	<meta charset="utf-8"> 编码方式,utf-8支持中英文及中英文状态的标点符号
	<title></title>网页标题

标签的分类

闭合标签,封闭类型标签<head></head>,成对出现
空标签,单标签,非封闭类型<meta/>

标签的属性

<div 属性="属性值" 属性="属性值"></div>
<img 属性="属性值" 属性="属性值"/>

html标签(元素、标记)

-- 用来构建页面
1.标题元素
	<h1></h1>一级标题
	<h2></h2>二级标题
	<h3></h3>三级标题
	<h4></h4>四级标题
	<h5></h5>五级标题
	<h6></h6>六级标题
	-- 一般情况下,h1用来装饰logo的,网页的标题可以使用h2
2.段落元素
	<p></p>
	用来放置一段描述性文本
3.div标签
	<div></div>
	容器 -- 划分页面不同的板块
4.列表元素
	-- 无序列表(新闻,导航,商品列表)
		<ul type="">
			<li></li>
			<li></li>
		</ul>
		给ul添加type属性改变列表的标识符:circle空心圆/square实心方块/disc实心圆
	-- 有序列表
		<ol type="1" start="3">
			<li></li>
			<li></li>
		</ol>
		给ol添加type属性改变列表的标识符:1数字/a小写字母/A大写字母/i小写罗马数字/I大写罗马数字
		给ol添加start属性改变起始数字
	-- 自定义列表(名词和解释,图文混排)
		<dl>
			<dt>名词</dt>
			<dd>解释</dd>
		</dl>
5.水平分割线
	<hr/>
***************以上1-5这几类标签独占一行,都是块级元素*****************

6.图片
	<img src="" title="" alt="">
	src引路径
	title鼠标移入图片时显示的文本
	alt图片未显示时显示的文本
	**面试题:title和alt属性的区别是什么
  - 路径
  	1.绝对路径 -- 完整的路径
  	2.相对路径
  		html与图片同级:直接写图片名
  		html与图片的文件夹同级:文件夹名字/图片名
  		../代表返回上一级
7.超链接
	<a href="" target=""></a>
	href引路径
	target="_self"默认值,代表当前页面打开html文件,当前页面被覆盖
	target="_blank"新的标签页中打卡html文件
	如果一个标题可点,应该标题去包a标签
		<h2>
			<a href="" target="">标题</a>
		</h2>
8.加粗
	<b></b> - bold
	<strong></strong>有突出强调的意思
9.下划线
	<u></u> - underline
10.倾斜
	<i></i> - italic
	<em></em>有突出强调的意思
11.删除线
	<s></s> - strike
	<del></del> - delete
12.span
	多用在一段文本中某一部分文本样式的更改,好处就是文本前后不换行
13.
	上标<sup></sup>
	下标<sub></sub>
14.文本换行<br>

转义字符

<:&lt;
>:&gt;
空格:&nbsp;
© :&copy;
注册:&reg;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值