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 合理嵌套
这算是最基本的了，至于说嵌套原则还有很多