기본 HTML 자습서: 태그 이해(3)
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행에
- my first list information
li는 영어로 List(리스트), ol은 영어로 Ordered List(순서 있는 목록), ul은 영어로 Unordered List(Unordered List)를 나타냅니다
2. ol을 사용하여 도서 판매 순위 목록 추가
rreeol을 사용하여 도서 판매 순위 목록 추가
웹 페이지에 순차적인 정보 목록을 표시하려면 어떻게 해야 하나요? 예를 들어, Dangdang.com의 도서 베스트셀러 순위 목록은 아래 그림과 같습니다.
이러한 유형의 정보 표시는
- 태그를 사용하여 표시할 정렬된 목록을 생성할 수 있습니다.
- 의 각 항목 앞에는 일련번호가 있으며 일련번호는 기본적으로 1부터 시작합니다.
편집기의 8번째 줄에
<ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol>
로그인 후 복사를 입력하세요.
<ol> <li>我的第一个列表信息。</li> <li>我的第一个列表信息。</li> </ol>
로그인 후 복사<ol> <li>信息</li> <li>信息</li> ...... </ol> 三、认识p在排版中的作用로그인 후 복사웹페이지 생성 과정에서 일부 독립적인 논리적 부분을 나누어
태그에 넣을 수 있습니다.
구문:
…
논리 부분 결정:
논리 부분은 무엇인가요? 페이지에서 상호 연관된 요소의 집합입니다. 예를 들어, 웹 페이지의 독립 열 섹션은 일반적인 논리적 부분입니다.
아래 그림과 같이 그림에서 빨간색 테두리로 표시된 부분이 논리적인 부분이며,
태그를 컨테이너로 사용할 수 있습니다. <… (답변이 많네요. 누가 가장 간결한지 살펴보겠습니다.)
태그의 구문을 잊지 마세요:
…
참조 코드 : (그 중 하나만) p(pISION) 이름에서 알 수 있듯이 웹 페이지를 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标签，认识网页上的表格
有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：
想在网页上展示上述表格效果可以使用以下代码：
创建表格的四个元素：
table、tbody、tr、th、td
1、
…
：整个表格以标记开始、
标记结束。2、
…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。3、
… ：表格的一行，所以有几对tr 表格就有几行。4、
… ：表格的一个单元格，一行中包含几对... ，说明一行中就有几列。5、
… ：表格的头部的一个单元格，表格表头。6、表格中列的个数，取决于一行中数据单元格的个数。
上述代码在浏览器中显示的默认的样式为：
总结：
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
任务
来试试为数学成绩表添加一行内容
在右部编辑器中的第25-29行输入下列代码：
25.
26.
三班 27.
32 28.
80 29.
结果图：
1、表格的行标签的语法：
… 2、一行中的单元格语法：
<tr> <td>…</td> <td>…</td> … </tr>
로그인 후 복사tbody 防止那种因网速慢加载一点显示一点的情况，
如果把网页比作一个女士
加载样式的过程是化妆过程
那么tbody就相当于屏蔽了化妆的过程直到
女士化好妆在真正出来见人tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。这也容易理解。
td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。table 创建表格
tbody全显示出来
th表头
tr每一行
td每一个单元格表格标签表格完全下载完后才显示
表格的一行标签 表格的一个单元格，有几个 就有几列。 表格表头标签。 tr是行，td是表头，td是单元格内容；
有几对tr就表示有几行，有几个td表示有几列。六、用css样式，为表格加入边框
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>为表格添加边框</title> 6 <style type="text/css"> 7 table tr td,th{border:1px solid #000;} 8 </style> 9 </head> 10 11 <body> 12 <table summary=""> 13 <tr> 14 <th>班级</th> 15 <th>学生数</th> 16 <th>平均成绩</th> 17 </tr> 18 <tr> 19 <td>一班</td> 20 <td>30</td> 21 <td>89</td> 22 </tr> 23 <tr> 24 <td>二班</td> 25 <td>35</td> 26 <td>85</td> 27 </tr> 28 <tr> 29 <td>三班</td> 30 <td>32</td> 31 <td>80</td> 32 </tr> 33 </table> 34 35 </body> 36 </html>로그인 후 복사Table 表格在没有添加 css 样式之前，是没有边框的。我们为表格添加一些样式，为它添加边框。
在代码编辑器中添加如下代码：
<style type="text/css"> table tr td,th{border:1px solid #000;} </style>로그인 후 복사上述代码是用 css 样式代码，为th，td单元格添加粗细为一个像素的黑色边框。
结果窗口显示出结果样式：
表格风格改变代码头尾：
表格四元素：table tr td,th
边框大小与颜色：{border:1px solid #000;}七、caption标签，为表格添加标题和摘要
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>认识table表标签</title> 6 <style type="text/css"> 7 table tr td,th{ 8 border:1px solid #000; 9 } 10 </style> 11 </head> 12 <body> 13 <table> 14 15 <tr> 16 <th>产品名称 </th> 17 <th>品牌 </th> 18 <th>库存量（个） </th> 19 <th>入库时间 </th> 20 </tr> 21 <tr> 22 <td>耳机 </td> 23 <td>联想 </td> 24 <td>500</td> 25 <td>2013-1-2</td> 26 </tr> 27 <tr> 28 <td>U盘 </td> 29 <td>金士顿 </td> 30 <td>120</td> 31 <td>2013-8-10</td> 32 </tr> 33 <tr> 34 <td>U盘 </td> 35 <td>爱国者 </td> 36 <td>133</td> 37 <td>2013-3-25</td> 38 </tr> 39 </table> 40 </body> 41 </html>로그인 후 복사表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下：
摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：
简介文本">
标题
用以描述表格内容，标题的显示位置：表格上方。
语法：
<table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>로그인 후 복사来试试，为文章添加标题
1. 在编辑器中为表格添加摘要，摘要的内容为“本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量”。
2. 在编辑器中为表格添加标题，标题的内容为“2012年到2013年库存记录”。
别忘了caption标签的语法
<caption>...</caption>
로그인 후 복사标题，肯定在最上面，也不能跑到表外面吧。所以在
下一行的位置写就行。
备注，是这个表的备注，所以，紧跟着table吧。table的summary属性目的是语义化标签，是为了SEO，和完全是两回事，
因为浏览器(除了ie)，百度，谷歌的引擎是不会读你的注释文字的。
【相关推荐】
1. 免费html在线视频教程
2. html开发手册
위 내용은 기본 HTML 자습서: 태그 이해(3)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌R.E.P.O. 최고의 그래픽 설정3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션2 몇 주 전 By DDDR.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7471
15
Cakephp 튜토리얼
1377
52
Steam의 계정 이름 형식은 무엇입니까?
77
11
Win11 활성화 키 영구
48
19
NYT 연결 힌트와 답변
19
30
See all articles
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
HTML에서 텍스트 이동
Sep 04, 2024 pm 04:45 PM
HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.
HTML 온클릭 버튼
Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
문법:
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>
로그인 후 복사- 웹페이지에 표시되는 기본 스타일은 일반적으로 다음 그림과 같이
- 의 각 항목 앞에는 일련번호가 있으며 일련번호는 기본적으로 1부터 시작합니다.
참조 코드 : (그 중 하나만) 
