整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它的起源可以追溯到1989年，当时一位名叫蒂姆·伯纳斯-李的物理学家在CERN（欧洲核子研究中心）工作时，他想寻找一种更好的方式来共享研究论文和其他信息。他开发了一种名为ENQUIRE的项目，可以通过超链接把相关的文档连接在一起。之后，他决定开发一种更具普遍性的系统，这就是HTML的起源。
HTML的发展历程可以分为以下几个阶段：
HTML已成为创建网页的标准语言之一，随着技术的不断进步和应用场景的不断扩大，HTML也在不断发展和演变。
HTML元素是在网页中创建结构的基本单位，它由开始标记和结束标记组成，并包含了中间的内容。HTML元素可以包含其他元素和标记，以此来构建复杂的网页结构。
HTML标记是一些特殊的代码，用于将文本转换成浏览器中呈现的网页内容。它们起到指示浏览器应该如何显示页面内容的作用。
以下是一些常见的HTML标记：
在每一个标签中，还可以添加一些属性来定义标记的特性，例如：
需要注意的是，在编写 HTML 代码时应遵守一定的语法规则，例如标签应该正确嵌套，属性值应该用双引号引起来等，这些都是为了保证页面的正确性和展示效果。
HTML表单是一个用于收集用户信息的交互性模块，它由一组表单元素和相应的表单控件组成。以下是一些常见的HTML表单元素和输入控件：
<form>
<!-- 输入控件 -->
</form><form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登录">
</form>
在这个例子中，我们创建了一个包含两个文本输入框和一个提交按钮的表单。第一个输入框是用于输入用户名的，第二个是密码输入框。type 属性指定了这两个输入框的类型，其中 type="text" 表示是文本输入框，type="password" 表示是密码输入框。name 属性用于指定此输入框的名称，后续在后台可以根据这个名称获取输入框中的值。id 属性用于指定此输入框的唯一标识符，通常与 for 属性一起使用。
<form>
<label for="fruit-select">选择一个水果：</label>
<select name="fruit" id="fruit-select">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
</form>
在这个例子中，我们创建了一个下拉列表用于选择水果。name 属性用于指定此下拉列表的名称，可以在后台根据此名称获取选择的值。每一个 <option> 元素包含了选项的文本和值。value 属性用于指定选项的值，当提交表单时，这个值将被发送到服务器。
<form>
<label for="comment">留言：</label>
<textarea id="comment" name="comment" rows="5" cols="50"></textarea>
</form>
在这个例子中，我们创建了一个多行文本输入框。rows 属性用于指定文本框的行数，cols 属性用于指定文本框的列数。这些属性只是用于设置文本框的尺寸，它不会限制用户输入的文字数量。
HTML表单和输入控件提供了一种方便的方式来收集用户的信息和数据。它们不仅可以用于注册页面和登录页面，还可以用于不同类型的数据收集和展示。
01CSS 实现多行文本“展开收起”
**引言：**
在Web前端开发中，文本内容的展示与交互常常扮演着至关重要的角色。特别是在信息爆炸的时代，合理有效地组织和展示文本信息显得尤为关键。本文将聚焦一种常见的交互效果——多行文本的“展开收起”，并详细探讨如何仅使用CSS实现这一效果。我们将通过实战代码剖析其原理，以期帮助读者更好地理解和应用这一技术，优化用户体验。
---
### **一、基础实现：CSS ellipsis和max-height**
**标题：** 初识`text-overflow: ellipsis`与`max-height`
在实现“展开收起”功能之前，我们先要了解如何用CSS实现多行文本省略的效果。以下是一个简单的例子：
```html
<div class="expand-collapse-text">
这是一段很长很长的文本，可能会超过显示区域，此时就需要截断显示...
</div>
<style>
.expand-collapse-text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* 行数 */
-webkit-box-orient: vertical;
line-height: 1.5em;
max-height: 4.5em; /* 根据行高设置最大高度 */
}
</style>
```
上述CSS代码设置了多行文本截断效果，当文本超过指定的行数时，多余的文本会被替换为省略号“...”。
---
### **二、进阶实现：“展开收起”按钮与状态切换**
**标题：** 结合JavaScript实现动态切换
接下来，我们将通过JavaScript动态改变CSS属性，实现文本的“展开”与“收起”功能。首先，我们需要一个按钮和相应的事件监听：
```html
<div class="expand-collapse-text" id="content">
这是一段很长很长的文本，可能会超过显示区域，此时就需要截断显示...
<button id="toggle-btn">展开</button>
</div>
<script>
const textContainer = document.getElementById('content');
const toggleBtn = document.getElementById('toggle-btn');
// 默认收起状态
textContainer.style.maxHeight = '4.5em';
toggleBtn.addEventListener('click', () => {
if (textContainer.style.maxHeight === 'none') {
textContainer.style.maxHeight = '4.5em';
toggleBtn.textContent = '展开';
} else {
textContainer.style.maxHeight = 'none';
toggleBtn.textContent = '收起';
}
});
</script>
```
上述代码中，我们首先获取到了文本容器和按钮元素，并设置文本容器的初始`max-height`。然后，为按钮添加点击事件监听器，根据`max-height`属性判断当前状态，切换文本容器的`max-height`值以及按钮的文本内容。
---
### **三、CSS动画与过渡效果**
**标题：** 添加过渡动画提升用户体验
为了让“展开收起”过程更加平滑，我们可以加入CSS过渡动画：
```css
.expand-collapse-text {
/* ...前面的样式不变... */
transition: max-height 0.3s ease;
}
```
这样，当`max-height`属性发生改变时，文本容器的高度会以0.3秒的过渡时间逐渐变化，形成平滑的展开或收起动画。
---
### **四、无障碍设计与辅助功能**
**标题：** 考虑无障碍访问与ARIA标签
为了提升无障碍访问体验，可以在按钮上添加`aria-expanded`属性，并随状态切换更新其值：
```html
<button id="toggle-btn" aria-expanded="false">展开</button>
```
在JavaScript中，同步更新`aria-expanded`属性：
```javascript
toggleBtn.addEventListener('click', () => {
// ...之前的逻辑不变...
// 更新aria-expanded属性
toggleBtn.setAttribute('aria-expanded', textContainer.style.maxHeight === 'none');
});
```
---
**结语：**
通过以上步骤，我们已经成功实现了纯CSS+JavaScript的多行文本“展开收起”功能，并且注重了过渡动画和无障碍设计的考量。这种交互效果在很多场合都非常实用，如新闻摘要、用户评论、产品详情等。掌握这一技术，不仅可以提升页面的交互体验，还能彰显出作为一名前端开发者对细节的关注和专业素养。持续优化和改进此类交互效果，将有助于我们更好地服务用户，提升产品的整体品质。
家今天好我是小月,为大家介绍一下建站的基础语音,喜欢的建站的朋友要认真阅读,这会对你有一定的帮助!!
DW使用；
搭建 一个站点；
首页文件名称：index.html
文件夹 style js
w3c 是一个组织，制定网页规范标准的组织；
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
声明网页的编码格式；
常用的编码格式；utf-8 国际通用标准，支持英文，中文，韩文，越南语
日语等等。。。；
gbk(gb2312)它是国标，支持中文简体繁体；跟后台有关；
字体：编辑， 首选参数 字体
列表 type修改列表符号；
布局，搭建一个网页结构；根据用户体验需求对内容进行合理规划；根据网络营销需求；
怎么布局；
表格布局
表格的最外层标记，<table> </table>
表格里面的行用<tr></tr>表示；一对tr表示一行；
一个单元格用<td></td>来表示；
表格里面有一个属性 边框 border 默认情况下，这个border="0"
ctrl alt a
单元格与单元格的缝 cellspacing 默认情况 不为0
跨行 rowspan 跨行，就是指一个单元格在垂直方向占领多行；
跨列 colspan 在水平方向占领多个单元格；
背景颜色 bgcolor
布局 table布局；现在不是主流， 但是在网页中还是会用到；现在主要用
div+css来进行网页布局；
为什么要用div+css呢？
简单一些；
² 代码相对table而言，div+css涉及到的代码行数更少；
² div+css网页布局有利于seo；做搜索引擎喜欢网站；
² div+css方便后期管理维护（css讲完之后再来理解；）
² 有利于浏览器的向后兼容；新的浏览器不能识别传统的一些布局标签，但是div+css
所涉及的标签浏览器能够很好的识别；
ie 5 6 7 8 9 10 11 12
CSS是什么？
有什么用？
CSS全称是 层叠样式表 Cascading Style Sheets 也叫样式 ，style
修饰，美化网页的；
table 表格，结构
如何在网页中实现CSS；CSS表现形式；
三种常见的表现形式（实现方式）；
每一种 行内式，
直接在html开始标签里面写上style="属性：属性值；属性：属性值；"
第二种写法： 内部嵌入式（嵌入式）
在<head></head>内部嵌入
<style>
css代码
html标签{属性：属性值；}
</style>
第三种表现形式；外部链接式（外链式）
把css样式单独放在一个style样式文件夹里面，然后在html页面中来调用这个css文件；
<link rel="stylesheet" type="text/css" href="style/yangshi.css"/>
以后大家都使用第三种表现式，外部链接式；
为什么要用第三种表现形式；
第一,w3c组织推荐使用第三种外链式；
第二，外部链接式实现了表现（html）与样式（css）相分离（有利于简化页面结构），
有利于后期维护修改等（选择器）；
第三，有利于搜索引擎优化（seo）
选择器
是什么？
有什么用？
p{color:red;} 它表示把所有的p标签里面的内容都变成红色；
作用：指定样式控制修饰的对象；
常用的基础选择器；
标签选择器；直接把html标签拿到css里面当选择器使用的称之为标签选择器；
类选择器；
给元素取名；
在开始标签里面写上 class="类名" ，注意，类名不要以数字开头；一般用英文小写开头；
在css里面写上 .类名{属性：属性值；属性：属性值；}
background:#09F; 背景颜色 这是在css里面的写法；
bgcolor 这是在html标签里面的写法；
text-align:center; 文字居中；
以上是今天的建站的内容，喜欢的小伙伴关注一下我每天都会更新这方面的知识！谢谢大家！
*请认真填写需求信息，我们会在24小时内与您取得联系。
