前端
简介
- html 结构层
- css 表现层
- js 行为层
html
-
行内元素
- a 超链接
- i 斜体
- em 斜体
- strong 加粗
- b 加粗
- img 图片标签
- span 文本标签
- 等
-
块级元素
- div 盒子标签
- p 文本
- ul li 无序列表
- ol li 有序列表
- h1 标题
- 等
-
行内元素的定义
- 不自动换行,不能设置宽高,只能依靠文本等将宽高撑开
-
块级元素定义
- 自动换行且可以设置宽高
-
改变块级元素以及行内元素的方法
- block将元素转换为块级元素
- inline将元素转换为行内元素
- inline-block既是块级元素,可以设置宽高,同时不用换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>文本</p>
<i>斜体</i>
<em>斜体</em>
<strong>粗体</strong>
<b>粗体</b>
<div>盒子标签</div>
<span>文字</span>
<a href="http://www.baidu.com">百度</a>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<img src="./1.png" alt="">
</body>
</html>
- 一些文本操作
- 首行缩进
- 文本溢出影藏
- 文本间距离
- 单词间距离等
- 代码中基本上注释详细了,就不多解释了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
p{
/* 首行缩进 */
text-indent: 2em;
width: 500px;
overflow: hidden;
display: -webkit-box;
/* cs3文本流 */
-webkit-box-orient: vertical;
/* 垂直排列 */
-webkit-line-clamp: 3;
}
i{
display: block;
overflow: hidden;
/* 溢出隐藏 */
white-space:nowrap;
/* 强制不换行 */
text-overflow: ellipsis;
/* 文本溢出省略 */
}
b{
letter-spacing: 10px;
/* 文字与文字或者字母间的距离 */
/* font-style: normal; */
/* 取消斜体 */
font-weight: normal;
/* 正常粗细 */
}
h1{
word-spacing: 5px;
/* 单词间的距离 */
display: inline-block;
}
</style>
<body>
<p>文本,是指书面语言的表现形式,从文学角度说,通常是具有完整、系统含义(Message)的一个句子或多个句子的组合。
一个文本可以是一个句子(Sentence)、一个段落(Paragraph)或者一个篇章(Discourse)。广义"文本":任何由书写所
固定下来的任何话语。
(利科尔) 狭义"文本":由语言文字组成的文学实体,代指"作品",相对于作者、世界构成一个独立、自足的系统。
</p>
<i>
文本,是指书面语言的表现形式,从文学角度说,通常是具有完整、系统含义(Message)的一个句子或多个句子的组合。
一个文本可以是一个句子(Sentence)、一个段落(Paragraph)或者一个篇章(Discourse)。广义"文本":任何由书写所
固定下来的任何话语。
(利科尔) 狭义"文本":由语言文字组成的文学实体,代指"作品",相对于作者、世界构成一个独立、自足的系统。
</i>
<br>
<b>文本,是指书面语言的表现形式,从文学角度说,通常是具有完整、系统含义(Message)的一个句子或多个句子的组合。</b>
<br>
<h1>I Love You</h1>
</body>
</html>
- 文本小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 360px;
height: 480px;
/* 居中 */
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
margin: auto;
background-color: cadetblue;
box-shadow: 13px -7px wheat;
/* 盒子阴影 */
}
p{
display: block;
float: right;
margin-right: 70px;
color: white;
width: 50px;
font-size: 50px;
font-weight: 600;
/* 字体加粗 */
line-height: 100px;
/* 设置行高,如果行高与高度一致,那么文本将居中排列 */
text-shadow: 12px -12px black;
/*文字阴影 */
}
</style>
<body>
<div>
<p>武林秘籍</p>
</div>
</body>
</html>
css
- css的三种使用方式
- 行内样式
- 内联
- 外链
- 优先级
- 行内>内联>外链
- 选择器
- id “#”+id名称
- class “.”+class名称
- 标签 标签名
js
- js主要是网页与用户间的桥梁
- 比如点击事件、表单验证等等
- js在一些css无法实现时使用
- 如轮播图
- js也可以可以改变css样式以及html中的内容