前端标签介绍

前端三剑客:
html超文本标记语言 -->
超文本: 比普通的文本更强大更厉害.可以带图片,表格表单.音乐,视频,超链接
标记语言: 里面的代码是以标签带的形式书写.在网页显示.类似于一块块拼图
css层叠样式表 -->
美化网页内容(排版.颜色.大小.性能优化)
让网页看起来更好看,性能更好
JavaScript --> 编程语言/脚本语言 --> 主要做动态样式/前后端网页交互

学习内容: 前端三剑客 + jQuery + bootstrap

html里的代码称为标签.
标签分为两种:
1.单标签: 一般用来实现特定功能 <标签名>
<hr> 分割线
<br> 换行
<img> 图片
<link> 导入
2.双标签:一般是用来包裹内容.会有一个闭合符号/. 写在结束标签里 <标签名>内容</标签名>
a,b,p,span,strong,em,i,ul,div

网页的三大核心标签:
<html></html> : 网页的核心标签.网页内容都写它里面
<head></head> : 头标签.里面写的内容主要是给浏览器看的.网页信息.网页名字.属性设置
<body></body> : 身体标签 .给用户看的内容都写里面

写在head标签里的辅助标签:
<meta>: 元标签.主要写网页的说明信息.设置信息
<link>: 链接标签.用来连接外部文件(css)
<title>: 标题标签

写在body里的内容:
1.文本标签:
<h1> - <h6> 1-6级的标题标签
<p> 段落标签.自带换行
<span> 文本标签.没有语义性.不会换行.一般结合css加样式
<b>&<strong> 粗体标签
<i>&<em> 斜体标签
<u>&<ins> 下划线标签

2.功能标签
	<hr> 分割线
	<br> 换行

3.超链接a标签
	a标签的作用就是可以让网页跳转到一个指定的位置
		1.一个指定的网址(百度,B站,cxy521)
		2.当前页面的其他位置
		3.指定的文件
	<a href='跳转位置'>描述文本</a>
	可以通过给标签设置id.然后通过id锚点跳转到指定的位置
	<a href='#memeda'>点我mua一个</a>
	<p id = 'memeda'>么么哒</p>

	a标签打开网页的方式可以通过target值修改(一般不用改):
		1.在当前页面: _self
		2.在新建页面: _blank
	
4.图片标签:
	img的四要素
		src: 图片路径
		alt: 图片的描述
		width: 图片的宽
		height: 图片的高

	<img src='图片路径' alt='图片描述'>
	写案例的时候尽量用相对/网络路径

5.列表标签:
	在网页里面显示一些有关联性的数据
	有序/无序列表的子元素是li.内容是写在li里的.不要写在ul/ol里

	ul>li -- 无序列表 -- 默认样式为黑点
		<ul>
			<li></li>
			<li></li>
		</ul>

	ol>li -- 有序列表 -- 默认样式为数字.可以通过设置type属性修改
		<ol>
			<li></li>
			<li></li>
		</ol>

	dl>dt>dd -- 自定义列表.没有样式.但是dd带一个缩进.
		dl = 大容器
		dt = 小容器
		dd = 列表内容

		<dl>
			<dt>
				<dd></dd>
				<dd></dd>
				<dd></dd>
			</dt>
		</dl>
6.div盒子标签:
	div盒子本身没有语义性.主要作用是划分网页区域
	更好的实现布局: 左中右/上中下

盒子标签默认是没有宽高,颜色.是看不到的.需要开发人员设置样式才可以
	width: 宽度,常用单位为像素px
	height: 高度,常用单位为像素px
	background-color: 背景颜色
	margin: 外边距
	padding: 内边距
设置盒子居中:   margin 任意值 auto;

css:
层叠样式表 --> 让网页更好看,加特效做排版

html是写了个网页.css是找到网页里的内容.加特效:
	1.怎么找
	2.加什么样式

选择器 --> 找到标签的方式.
	*: 通配符选择器.选中所有的标签
	标签
	标签选择器: 选中指定的标签
	类名选择器: 给标签设置class类名.在样式表通过.class名 的方式指定
	id选择器: 给标签设置id名. 在样式表通过 #id名 的方式指定

样式表的写法:
	1.行内样式表 -- 把样式写到标签里.权重最高
	2.内部样式表 -- 把样式写到head标签里的style标签中
	3.外部样式表 -- 把样式写在专门的.css文件里.再通过link标签引入

文本样式:
	color: 字体颜色
	font-size:  字体大小
	font-family: 字体
	text-indent: 首行缩进
	text-align: 设置内容对齐
	line-height: 设置行高,文本的上下位置
	font-weight: 设置粗线
	font-style: 设置文本样式

背景样式:
	background
	background-color: 背景颜色
	background-image: 背景图片 url(图片路径)
	background-repeat: 背景内容是否重复
	background-position: 背景位置
	background-size: 背景大小 cover 等比例缩放

边框样式:
	border: 1px solid #096;
	border-weight: 边框粗细
	border-style: 边框样式
	border-color: 边框颜色
	border-radius: 边框圆角

	margin: 外边距
	padding: 内边距

	边框,内外边距都可以单独的写四个方向的值
		top-上 right-右 bottom-下 left-左
	比如 margin-left   padding-top   border-bootom

标签属性:
	1.块元素(block): 独占一行.有独立的宽高地盘.默认宽度为100%,高度为内容大小. div,p,h1-h6,ul,li,ol,dl
	2.行内元素(inline): 没有独立的地盘.宽高就是自身的大小.行内元素,都是挤在一起. span b img a 
	3.行内块元素(inline-block): 兼具了两者的优点特点

display: 类型转换
	display: 类型名;
	display:inline-block;
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值