EmmetでHTML高速記述
下部で問題レベルを選択しEmmetを入力、採点を押下することでこのウィンドウに出力HTMLが表示されます ※本HTML内のemmet.jsは修正済みのバージョンですので採点基準が異なります
問題:
Lv1
Lv2
答案Emmet:
採点結果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div class="class_div1" id="id_div1">inner_div1</div> <div class="class_div2" id="id_div2">inner_div2</div> <div class="class_div3" id="id_div3">inner_div3</div> <div class="class_div4" id="id_div4">inner_div4</div> <div class="class_div5" id="id_div5">inner_div5</div> <hr /> <table> <tr class="row1"> <td class="col1">inner_column1</td> <td class="col2">inner_column2</td> <td class="col3">inner_column3</td> <td class="col4">inner_column4</td> <td class="col5">inner_column5</td> </tr> <tr class="row2"> <td class="col1">inner_column1</td> <td class="col2">inner_column2</td> <td class="col3">inner_column3</td> <td class="col4">inner_column4</td> <td class="col5">inner_column5</td> </tr> </table> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div class="header"> <ol> <li class="headers"> <h1>title1</h1> <h2>title2</h2> <h3>title3</h3> <h4>title4</h4> <h5>title5</h5> </li> </ol> </div> <div class="body"> <ul> <li class="bodies">Lorem ipsum dolor sit amet.</li> </ul> <input type="text" name="input_name" id="input_id" /> <input type="password" name="pass_name" id="pass_id" /> <p>before1<br />after1</p> <p>before2<br />after2</p> <p>before3<br />after3</p> <p>before4<br />after4</p> <p>before5<br />after5</p> </div> </body> </html>