1. div css 這種效果咋做的
需要引入jQuery，HTML代碼如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
ul,
li,
p{
margin:0;
padding:0;
list-style:none;
}
.time{
width:10%;
height:110px;
background-color:beige;
text-align:center;
padding-top:60px;
margin-right:10px;
}
.timep{
font-size:26px;
color:skyblue;
}
.list{
width:100%;
height:200px;
margin-bottom:5px;
}
.time,
.content{
float:left;
}
.content{
width:80%;
border:1pxsolidtransparent;
}
.contentspan{
font-size:18px;
}
.content.intro{
font-size:22px;
margin-top:10px;
}
.hx{
border-bottom:1pxsolid#808080;
margin-bottom:42px;
}
.add{
height:100px;
background:darkgray;
text-align:center;
line-height:100px;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<liclass="list">
<divclass="time">
<pclass="year">
</p>
<pclass="date">
</p>
</div>
<divclass="content">
<h2>社區鄰居多，與您一起過六一！</h2>
<span>發布者：</span><spanclass="fbz">沈培</span>
<span>瀏覽次數：</span><spanclass="llcs">1</span>
<pclass="intro">我們都知道那個小小的人會長大，我們能做的不是永久事無巨細的幫助他，而是為他們不斷的創造足夠成長的空間...</p>
</div>
</li>
<pclass="hx"></p>
<liclass="list">
<divclass="time">
<pclass="year">
</p>
<pclass="date">
</p>
</div>
<divclass="content">
<h2>社區鄰居多，與您一起過六一！</h2>
<span>發布者：</span><spanclass="fbz">沈培</span>
<span>瀏覽次數：</span><spanclass="llcs">1</span>
<pclass="intro">我們都知道那個小小的人會長大，我們能做的不是永久事無巨細的幫助他，而是為他們不斷的創造足夠成長的空間...</p>
</div>
</li>
<pclass="hx"></p>
</ul>
<pclass="add">↓</p>
<scriptsrc="js/jquery.min.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="adddate.json"type="text/javascript"charset="utf-8"></script>
<scripttype="text/javascript">
varyear=newDate().getFullYear();
varmonth=newDate().getMonth()+1;
varday=newDate().getDate();
varstr=month+"-"+day;
$(".year").html(year);
$(".date").html(str);
//點擊一次就調用json里的一條數據
vari=0;
$(".add").click(function(){
for(vark=0;k<2;k++){
//創建一個li
vareleli=document.createElement("li");
//創建li裡面的兩個div
varelediv1=document.createElement("div");
varelediv2=document.createElement("div");
//創建p標簽
varelep1=document.createElement("p");
varelep2=document.createElement("p");
//創建h2標簽
vareleh2=document.createElement("h2");
//創建兩個span標簽
varelespan1=document.createElement("span");
varelespan2=document.createElement("span");
//創建一個p標簽
varelesp3=document.createElement("p");
//創建一個hr標簽
varelehr=document.createElement("hr");
//動態添加了li,並添加了class=list屬性
varnewli=$("bodyul").append(eleli).children().last().addClass("list");
//往li里添加兩個div
newli.append(elediv1).append(elediv2);
$("ulli:last").children().first().addClass("time");
$("ulli:last").children().last().addClass("content");
//往第一個div里添加兩個p標簽
$("ulli:lastdiv:first").append(elep1).append(elep2);
//給兩個p標簽添加class屬性分別是year和date,並賦值
$("ulli:lastdiv:first").children().first().addClass("year").html("2019");
$("ulli:lastdiv:first").children().last().addClass("date").html("08-27");
//獲取最後一個li中的最後一個div元素
$("ulli:lastdiv:last").append(eleh2);
//調用json里的數據作為標題
$("ulli:lastdiv:last").children().first().html(arr[i].title);
//添加兩個span
$("ulli:lastdiv:last").append(elespan1).append(elespan2);
$("ulli:lastdiv:last").children("span").first().addClass("fbz").html("發布者："+arr[i].author+
"");
$("ulli:lastdiv:last").children("span").last().addClass("llcs").html("瀏覽次數："+arr[i].manay);
$("ulli:lastdiv:last").append(elesp3);
$("ulli:lastdiv:last").children().last().addClass("intro").html(arr[i].content);
$("ul").append(elehr).children().last().addClass("hx");
i++;
}
})
</script>
</body>
</html>
adddate.json代碼如下：
vararr=[
{
"id":1,
"author":"小馬",
"title":"哈哈哈，這是一個標題1",
"manay":"20",
"content":"網路知道是由全球最大的中文搜索引擎網路自主研發、基於搜索的互動式知識問答分享平台。用戶可以根據自身的需求,有針對性地提出問題;同時,這些答案又將作為搜索結果1,..."
}
,
{
"id":2,
"author":"小皮",
"title":"哈哈哈，這是一個標題2",
"manay":"80",
"content":"網路知道是由全球最大的中文搜索引擎網路自主研發、基於搜索的互動式知識問答分享平台。用戶可以根據自身的需求,有針對性地提出問題;同時,這些答案又將作為搜索結果2,..."
},
{
"id":3,
"author":"小瓜",
"title":"哈哈哈，這是一個標題3",
"manay":"200",
"content":"網路知道是由全球最大的中文搜索引擎網路自主研發、基於搜索的互動式知識問答分享平台。用戶可以根據自身的需求,有針對性地提出問題;同時,這些答案又將作為搜索結果3,..."
},
{
"id":4,
"author":"小習",
"title":"哈哈哈，這是一個標題4",
"manay":"2000",
"content":"網路知道是由全球最大的中文搜索引擎網路自主研發、基於搜索的互動式知識問答分享平台。用戶可以根據自身的需求,有針對性地提出問題;同時,這些答案又將作為搜索結果4,..."
}
]
2. web前端中有哪些塊級
web前端的css中有塊級元素和行內元素。
常見塊級元素：
<address>...</adderss>
<center>...</center> 地址文字
<h1>...</h1> 標題一級
<h2>...</h2> 標題二級
<h3>...</h3> 標題三級
<h4>...</h4> 標題四級
<h5>...</h5> 標題五級
<h6>...</h6> 標題六級
<hr> 水平分割線
<p>...</p> 段落
<pre>...</pre> 預格式化
<blockquote>...</blockquote> 段落縮進 前後5個字元
<marquee>...</marquee> 滾動文本
<ul>...</ul> 無序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定義列表
<table>...</table> 表格
<form>...</form> 表單
<div>...</div>
HTML5新增塊級元素
<header>...</header>簽定義文檔的頁眉（介紹信息）。
<section>...</section>標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
<footer>...</footer>標簽定義文檔或節的頁腳。應當含有其包含元素的信息。頁腳通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等 等。可以在一個文檔中使用多個 <footer> 元素。聯系信息應該位於 <address> 標簽中。
<aside>...</aside>標簽定義其所處內容之外的內容。其內容應該與附近的內容相關。可做側欄。
<nav>...</nav>標簽定義導航鏈接的部分。
<main>...</main>標簽規定文檔的主要內容。其元素中的內容對於文檔來說應當是唯一的。它不應包含在文檔中重復出現的內容，比如側欄、導航欄、 版權信息、站點標志或搜索表單。在一個文檔中，不能出現一個以上的 <main> 元素。<main> 元素不能是以下元素的後代： <article>、<aside>、<footer>、<header> 或 <nav>。
<article>...</article>標簽規定獨立的自包含內容。元素的潛在來源：論壇帖子、報紙文章、博客條目、用戶評論。
<figure>...</figure>標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）
3. web前端學習HTML的格式標記都有哪些
<br>：換行標記，讓後面的信息顯示在下一行
<p>：段落標記
<center>：居中標記，讓段落或者文字相對於父標記居中顯示
<pre>：預格式化標記
<li> ：列表項目標記，每一個列表使用一個<li>標記
<ul>：無序列表標記
<ol>：有序列表標記
<hr>：水平分割線標記
<div>：分區顯示標記，也稱為層標記
<!--->：注釋標記，定義注釋。
以上就是HTML常用的格式標記。望採納！
4. hbuilder中hr是什麼
HBuilder是DCloud數字天堂推出的一款支持HTML5的Web開發IDE。
是為前端開發者服務的通用IDE，或者稱為編輯器，與vscode，sublime，webstorm類似，HBuilder的編寫用到了Java，C，Web和Ruby。HBuilder本身主體是由Java編寫。
它可以開發普通web項目，也可以開發DCloud出品的uni-app項目，5+App項目，wap2app項目，除了服務前端技術棧，它也可以通過插件支持php等其他語言。
5. 如何正確使用html基本標簽
H5e教育html5開發為您解答：
1. 文檔聲明：<!Doctype>
其實這跟 WCAG 根本上連不上什麼直接關系，但為了一個兼容性更好，特別是向後兼容的頁面，我推薦你這樣寫：
<!Doctype html>
2. 鏈接：<a>
互聯網的聯幾乎可以說是用 <a> 來實現的，作為一個頁面最常見的標簽。我們應該如何對待呢？
為關鍵鏈接添加 accesskey
除非萬不得已，不要去掉 focus 時虛線框
<a href="" title="" accesskey="M" rel="" hidefocus>Link</a>
3. 縮寫: <abbr>
對於用 HTML Tag 的正確使用，也是非常重要的，這有利於讀屏軟體使用者對於頁面結構的理解。特別是在 H1,H2,H3 等這些標簽的使用，濫用非常容易造成結構費解。當然，使用一般的標簽，再利用 CSS 來使視覺上形成對比這也是常人能辨識的。但讀屏軟體用戶呢。當然，這里只是順帶提起需要注意頁面標簽的使用方法，而 abbr 最重要的應該是應該添加一皮逗個 title 屬性對縮寫進行描述。比如：
<abbr title="Web Developer" >WD</abbr>
4. 大段引用: <blockquote>，一般引用: <cite>
有大段引用的時候，使用 <blockquote>，而行內引用則使用 <cite>，讓你的結構更加易讀：
<blockquote>
之前就一直想寫這樣的一篇文章，分享一下如何去創造一個可訪問性更世升好的頁面。今天的計劃里有一條把 HTML T ag 和 WCAG標准結合起來。我推薦你這樣去寫你的 HTML，讓某些人的生活可以更容易。
</blockquote>
<p>某A給我印象最深刻的一句話是，<cite>「做前端要有愛。不要動不動就有朩有地對各種人使用咆哮體」</cite>。</p>
5. 刪除：<del>
在紙上寫東西不能像在計算機上寫東西一樣，可以用撤銷鍵可以按，但當我們想要強調某些東西是被刪除的怎麼辦？那就是使用 <del> 標簽了。比如這樣：
<del>HTML上表示強調時，請使用 <b> 標簽</del>
HTML上表示強調時，請使用 <strong> 標簽
效果是這樣的：
HTML上表示強調時，請使用 <b> 標簽
HTML上表示強調時，請使用 <strong> 標簽
6. 定義列表：<dl>
去年帶著新人做支付寶前端博客的時候，他們給我印象最深刻的是很喜歡用 <dl>。當時在想，這些同學挺不錯的，對語義化的理解還不錯。我們還是比較少用到定義列表的。而是使用一般的 <ul> <ol> 這兩個。<dl> 也是應該慎用的，最好只使用在某些有「定義」意義的條目，如 w3school 的這個例子，對咖啡和牛奶的定義：
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
7. 無序/有序列表 <ul>/<ol>
列表，這個對於每個前端來說，都熟悉不過了。因為結構可以非常靈活地進行應用，在導航、列表、Tab 等，都經常要要用到。這個就無須多說了。但有一點還是需要明白的，不要相信什麼 <ul>/<ol> 是 <table> 的替代品。在我們常用的 HTML Tags 中，每個標簽都有自己的作用，誰都不是誰的替代品。
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
8. 表格: <table>
如果是一個表格，那就，就不要用段落來替代，更不要用列表。除非萬不得已，並且他們是可以轉換的。另外，表格中還有一些需要注意的點：
給 <table> 添加 summary 屬性，有些表格非常大，並不需要去讀完整個
添加 <tbody>，如果我沒記錯搜握老，如果沒添加的話，瀏覽器會自動為你添加
必要時使用 <col> <colgroup> 來控製表示的欄
<table summary="sofish's blog status">
<thead>
<tr>
<th>DATE</th>
<th>IP</th>
<th>PV</th>
</tr>
</thead>
<tbody>
<tr>
<td>2011.3.11</td>
<td>3000</td>
<td>8000</td>
</tr>
</tbody>
</table>
9. 格式化片段 <code>/<pre>
<code> 是指 computer code text, 而 <pre> 是指 preformatted text。<pre> 的范圍更廣，並且是塊狀元素，可能被使用來格式化各種文本，特別是代碼。使用沒有需要特別注意的，主要是語義上的正確使用，比如不要用 <pre> 來代替一般的 <p>。
<code>text-align:center</code>
<pre>
{ ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) }
</pre>
10. 換行: <br>
在現代網頁中，使用 <br> 的情況是非常少的。網頁中的留白，一般都是使用 CSS 的 padding 和 margin 來實現。這樣更精準，並用更容易控制。現在推薦的用法是，使用到一般的段落 <p> 中做簡單的換行，而不是用來控制頁面留白。
<p>我是一個段落。<br />
詩歌都會用換行的。
</p>
11. 分割線: <hr>
<hr> 具有非常好的語義作用。但他的視覺效果很難控制。之前就寫過這樣的文章關於<hr />在各瀏覽器中的問題。一般也都很少用。如果專門為讀屏軟體使用者提供單獨頁面的話，或許 <hr> 會大有用處。
<h3>標題一</h3>
<p>Lorem Ipsum is ...</p>
<hr />
<h3>標題二</h3>
<p>This is the entry of... </p>
12. 無語義標簽：<div>/<span>
其實 <div>/<span> 這兩個標簽是有語義的，都是 defines a section in a document。是的，和 HTML5 中的 <section> 其實是一樣的。只是，因為搜索引擎的的原因，搜索引擎認為它們是無語義標簽，因此他們成了 「無語義」 標簽。推薦用法是盡量使用其他來做為頁面框架的容器，比如布局、添加額外的視覺效果，而不是段落等的替代品。
<div id="container">
<div id="content">
</div>
<div id="sidebar">
<ul>
<li><span>God</span>, oh my zsh</span></li>
</ul>
</div>
</div>
13. 段落/標題: <p>,<h1>/<h2>/<h3>…
這幾個標簽幾乎可以說是一個頁面標簽等級結構中最重要的標簽。我們可以用一本書的結構來說明這幾個標簽，而我們構建一個頁面的時候，也應該有這樣的一種思想在腦中：
書的名稱：H1
書的每個章節標題: H2
章節內的文章標題: H3
章節的段落: P
小標題/副標題: H4/H5/H6
是的，當然還有引用 <blockquoute>，技術類書中提供的代碼 <pre class="code">，一些需要注意點的列表 <ul>，一些方便比較的表格 <table> 等。
<h1>LOGO</h1>
<h2>Title</h2>
<div class="entry">
<h3>Summary:</h3>
<p>lorem ipsum is ...<em>emphasize</em></p>
</div>
14. 強調: <em>/<strong>
<em> emphasize 的縮寫。而 <strong> 是 strong emphasize。可能很多剛入門前端的同學會對 <em>、<strong>、<cite> 、<i>、<b> 這幾個標簽的使用拿捏不準。<i> 和 <b> 基本上是被廢置的，相當於現在的 <em> 和 <strong>，一般情況下他們對於內容重要性的排序是這樣的：strong > em ≈ cite。
<strong>注意：</strong>別使用老掉牙的標簽，比如<cite>FONT、CENTER</cite>等，特別是 <em>FONT</em>。
15. 表單項: <input>/<textarea>/<select>
表單項是 HTML 中相對比較復雜的標簽，需要注意的點也比較多：
需要給每個表單項添加 <label> 對其進行描述，當不能使用 label 時，為表單項添加 title 屬性
當表單項是必填項的時候，使用 「*「 符號來標記
Flash 創建表單項一般是不會生成 <label> 的，請勾上 auto label 那個選項
<form method="post" action="http://sofish.de">
<fieldset><legend>My Form</legend>
<label for="firstname">* First name:</label> <input type="text" id="firstname" />
<label for="speech">Say something:</label>
<textarea id="speech" />
</textare>
<input type="submit" value="submit" title="submit button" />
</fieldset>
</form>
16. 圖片: <img>
對於圖片，盲人看不到。提供 alt 來表示替代文本。告訴他們這是一張什麼樣的圖。
<img src="http://sofish.de/favicon.ico" alt="幸福收藏夾的 favicon" />
17. 框架: <iframe>
盡量避免 <iframe>框架的使用，但當你需要使用的時候，最好提供一個 title 屬性對其進行描述。
<iframe src="http://sofish.de" title="幸福收藏夾" /></iframe>
18. 流媒體：<video>/<audio>/<object>/<embed>
媒體也是比較復雜的格式，處理起來比較麻煩。通常我們可以這樣做：
為視聽媒體提供相應的文本，包括相應的場景，比如演講中的鼓掌等有利有閱讀者感知現在氣氛的，都應該體現在演講文本中。其他的依此類推。
如果像交響樂這種不能提供具體描述的，可以進行簡單的說明
如果文本較長，不能在當前頁面展示，可以在媒體後提供一個鏈接到相應替代文本的鏈接
如果媒體中有可能會引起癲癇發作的，應做相應的說明
<audio src="mozart.mp4">莫扎特39號交響曲</audio>
19. 網頁標題：<title>
6. 在HTML代碼編輯時，為什莫用空元素<hr />畫出的水平線，前端不能對齊呢應如何對齊
你要發源碼，或者源碼截圖，光這個看不到原因，可能是你把 <hr />放到<ul>里的吧，<ul>本身默認是有內填充的！
7. 網頁前端裡面的HtmL的3個主要規范是什麼
標簽有開有關，成對出現。例如<div></div>，表示的是一個div標簽，<div>表示div標簽的開，而</div>則表示一個標簽的關。
在HTML5當中，也存在單標簽，即有開無關的標簽，但是大家使用到單標簽的種類並不多，主要包括<meta><link><img><input><hr>等。
代碼部分的中英文選擇方面，需要使用英文，並且均為小寫。
標簽和標簽時存在一定的關系的，有些標簽是父子關系（此處就是我們說的嵌套），有些是兄弟關系。在HTML當中為了表示層級關系，每個級別的標簽都要比上一個級別的標簽縮進一個tab的距離（一個tab——>按下一下tab鍵），註：每個tab鍵是4個空格寬度。
在書寫代碼時，還需要注意行號，由於編輯器的寬度原因，有些代碼會被擠下去，但是根據行號顯示，還是同一行。
簡單來說：
1 成對出現，有開有關
2 代碼英文小寫
3 合理嵌套
這算是最基本的了，至於說嵌套原則還有很多