1. ul을 사용하여 뉴스 정보 목록을 추가합니다.
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> p标签</title> 6 </head> 7 <body> 8 9 10 </body> 11 </html>
웹을 탐색하면 웹 페이지에 많은 정보 목록이 있음을 알 수 있습니다. , 아래와 같이 뉴스 목록, 사진 목록과 같은.
뉴스 목록
사진 목록
이 목록은 ul-li를 사용하여 만들 수 있습니다. 태그 완료. ul-li는 순서 없이 정보를 나열한 목록입니다.
구문:
<ul> <li>信息</li> <li>信息</li> ...... </ul>
예:
<ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul>
웹 페이지에 표시되는 ul-li의 기본 스타일은 일반적으로 다음과 같습니다. 각 li 앞에 점이 있습니다. 아래 표시됨:
시도해 보겠습니다. 편집기의 8행에
li는 영어로 List(리스트), ol은 영어로 Ordered List(순서 있는 목록), ul은 영어로 Unordered List(Unordered List)를 나타냅니다
웹 페이지에 순차적인 정보 목록을 표시하려면 어떻게 해야 하나요? 예를 들어, Dangdang.com의 도서 베스트셀러 순위 목록은 아래 그림과 같습니다.
이러한 유형의 정보 표시는
문법:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> p标签</title> 6 </head> 7 <body> 8 9 10 </body> 11 </html>
예:
다음은 인기 강좌 다운로드 순위입니다:
<ol> <li>信息</li> <li>信息</li> ...... </ol>
편집기의 8번째 줄에
<ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol>
를 입력하세요.
<ol> <li>我的第一个列表信息。</li> <li>我的第一个列表信息。</li> </ol>
<ol> <li>信息</li> <li>信息</li> ...... </ol> 三、认识p在排版中的作用
웹페이지 생성 과정에서 일부 독립적인 논리적 부분을 나누어
태그에 넣을 수 있습니다.
구문:
…
논리 부분 결정:
논리 부분은 무엇인가요? 페이지에서 상호 연관된 요소의 집합입니다. 예를 들어, 웹 페이지의 독립 열 섹션은 일반적인 논리적 부분입니다.
아래 그림과 같이 그림에서 빨간색 테두리로 표시된 부분이 논리적인 부분이며,
태그를 컨테이너로 사용할 수 있습니다. <… (답변이 많네요. 누가 가장 간결한지 살펴보겠습니다.)
태그의 구문을 잊지 마세요:
…
참조 코드 : (그 중 하나만)1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>p标签</title> 6 </head> 7 <body> 8 <h2>热门课程排行榜</h2> 9 <ol> 10 <li>前端开发面试心法 </li> 11 <li>零基础学习html</li> 12 <li>javascript全攻略</li> 13 </ol> 14 <h2>最新课程排行</h2> 15 <ol> 16 <li>版本管理工具介绍—Git篇 </li> 17 <li>Canvas绘图详解</li> 18 <li>QQ5.0侧滑菜单</li> 19 </ol> 20 </body> 21 </html>
박스모델
) . 은 브라우저 화면에 많은 컨테이너를 배치하는 것과 같습니다. 편안하게 보이려면 각 컨테이너를 깔끔하고 정돈되게 배열해야 합니다. p 위치 지정 문제는 CSS의position
및Floating <을 사용합니다. 🎜> CSS float 및 상자 모델 레이아웃 사용
또한 컨테이너를 배치한 후 목록, 텍스트, 이미지 등의 콘텐츠를 배치해야 합니다. , 마치 접시에 야채를 담는 것과 같습니다. 물론, 더 많은 요리가 더 좋아 보일 것입니다. 이것이 바로 CSS의 역할입니다. 학습에 모든 것을 통합하고 훌륭한 웹 프론트엔드가 되는 법을 배워야 합니다.
4. 로직을 더 명확하게 하기 위해 p라는 이름을 지정합니다<p> <h2>热门课程排行榜</h2> <ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>javascript全攻略</li> </ol> </p> <p> <h2>最新课程排行</h2> <ol> <li>版本管理工具介绍—Git篇 </li> <li>Canvas绘图详解</li> <li>QQ5.0侧滑菜单</li> </ol> </p> 一个html页面可以看成一个家,而一个p你们可以看成家的每个小房间,房间有了当然没什么效果, 但是一个家必须分成一个个小房间才能多姿多彩,但每个房间里怎么装饰就得你们自己放东西,当然装饰就得交给css了, 后面讲到<p class>大家就懂了。p标签就是一个框,将里面的东西框起来,然后通过css来使这个框按照所需要的样式显示出来。 <p>就是分类,把一类东西放在一块,另一类东西放另一块。这样一目了然,就是<p>实现的。
에 태그를 넣어 독립적인 로직 부분을 만듭니다. 논리를 더 명확하게 하기 위해 이 독립적인 논리 부분에
라는 이름을 설정할 수 있습니다.
用id属性来为
提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。
如下两图进行比较,如果设计师把两个图给你,哪个图你看上去能更快的理解呢?是不是右边的那幅图呢。
语法:
…
来试试给网页的独立的版块添加“标记”
1、在编辑器中的第8行修改
代码为
。
2、在编辑器中的第16行修改
代码为
。
别忘了标记版块名称的语法:
…
p相当于划分成一个个房间,id就是房间号了
p的ID号是为了使用CSS的ID选择器,应用CSS样式,否则毫无意义。
有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:
想在网页上展示上述表格效果可以使用以下代码:
创建表格的四个元素:
table、tbody、tr、th、td
1、
2、
…:当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等表格内容全部下载完才会显示。3、
4、
5、
6、表格中列的个数,取决于一行中数据单元格的个数。
上述代码在浏览器中显示的默认的样式为:
总结:
1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
2、表头,也就是th标签中的文本默认为粗体并且居中显示
来试试为数学成绩表添加一行内容
在右部编辑器中的第25-29行输入下列代码:
25.
26.
27.
28.
29.
结果图:
1、表格的行标签的语法:
2、一行中的单元格语法:
<tr> <td>…</td> <td>…</td> … </tr>
tbody 防止那种因网速慢加载一点显示一点的情况,
如果把网页比作一个女士
加载样式的过程是化妆过程
那么tbody就相当于屏蔽了化妆的过程直到
女士化好妆在真正出来见人
tr是“table row(表格行)”的缩写,用于表示一行的开始和结束。这也容易理解。
td是“table data(表格数据)”的缩写,用于表示行中各个单元格(cell)的开始和结束。
table 创建表格
tbody全显示出来
th表头
tr每一行
td每一个单元格
表格的一个单元格,有几个 | 就有几列。 | 表格表头标签。 |
---|