Задача 1. Используйте редактор форматированного текста
После простого исследования я обнаружил, что могу напрямую преобразовывать строку слов в «тег p», напрямую переключать режим кодирования и использовать интерфейсную технологию для выполнения задачи.
Прикрепите приведенный выше код эффекта:
<style>
.table tr:nth-child(odd){
background-color:yellow;
}
</style>
<p>CSDN任务三</p>
<table class="table">
<tbody><tr>
<td>c1</td>
<td>1</td>
</tr>
<tr>
<td>c4</td>
<td>2</td>
</tr>
<tr>
<td>c5</td>
<td>3</td>
</tr>
</tbody></table>
<button onclick="javascript:alert(1)">按钮，点击出弹框</button>
Задача 2: разработка WYSIWYG
Я использую «Markdown», а «Markdown» может преобразовывать документы в действительные документы XHTML или HTML, так что вот простая реализация эффекта.
Расширение блочной модели CSS
Компоновка блочной модели CSS
HTML-код раздела
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="new_file.css" />
</head>
<body>
<div class="box1 container">
<div class="color" style="height: 20%;">1</div>
<div class="color top" style="height: 76.8%;">2</div>
</div>
<div class="box2 container">
<div class="bottom" style="flex: 1;height: 30%;">
<div class="color three">3
<div class="seven">7</div>
</div>
</div>
<div style="display: flex;height: 66.8%;">
<div class="right" style="flex: 1;">
<div class="color">4</div>
</div>
<div style="flex: 2;">
<div class="color bottom" style="height: 50%;">5</div>
<div class="color" style="height: 45.3%;">6</div>
</div>
</div>
</div>
<div class="box eight">8</div>
<div class="box nine">9</div>
</body>
</html>
Код части CSS
@charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: yellow;
display: flex;
padding: 20px;
}
div {
height: 100%;
}
.box1 {
flex: 1;
margin-right: 20px;
}
.box2 {
flex: 2;
}
.color {
background-color: greenyellow;
}
.top {
margin-top: 20px;
}
.right {
margin-right: 20px;
}
.bottom {
margin-bottom: 20px;
}
.three {
position: relative;
}
.seven {
position: absolute;
width: 30%;
height: 80%;
top: 10%;
left: 4%;
}
.seven,
.eight,
.nine {
background-color: red;
}
.box {
width: 240px;
height: 160px;
}
.eight {
position: fixed;
top: -60px;
right: 50px;
}
.nine {
position: fixed;
right: 47.4%;
bottom: -50px;
z-index: -1;
}
Самооценочный тест
1. Чтобы элемент img можно было перетаскивать в HTML5, необходимо добавить атрибут draggable и установить значение true
2. В типе ввода HTML5 datatime-local можно выбрать селектор даты без часового пояса;
3. В блочной модели CSS маржа (расстояние между контейнером и контейнером), отступы (расстояние между контейнером и содержимым контейнера), граница границы, 4, событие клика по клику, событие изменения содержимого элемента onchange
, событие загрузки инициализации страницы onload, событие потери фокуса элементом onblur, элемент onfocus получает событие фокуса
5. Установите display: flex для контейнера, чтобы сделать контейнер эластичным контейнером
6. Циклы в JS: цикл for, цикл while, цикл do-while, цикл for-in, цикл for-of, цикл each()
7. Семантические тегизнак можно выделить。