标签介绍"/>
前端标签介绍
前端三剑客:
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.在当前页面: _self2.在新建页面: _blank4.图片标签: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: 宽度,常用单位为像素pxheight: 高度,常用单位为像素pxbackground-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: 设置文本样式背景样式:backgroundbackground-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,dl2.行内元素(inline): 没有独立的地盘.宽高就是自身的大小.行内元素,都是挤在一起. span b img a 3.行内块元素(inline-block): 兼具了两者的优点特点display: 类型转换display: 类型名;display:inline-block;
更多推荐
前端标签介绍
发布评论