HTML(三)

2021-10-29 17:05:10 浏览数 (1)
代码语言：javascript复制
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

HTML(三)

發佈於 2018-06-18

本篇我们将介绍图片，超链接，列表表格以及表单等元素。

img 元素(Image)

img 标记可以定义一个插入到页面的图片。 有两个重要属性:

  1. src 属性用来标识图片资源位置，可以是相对路径，也可以是绝对路径
  2. alt 属性用来标识图片加载失败时显示的文本内容

img 还有 width 和 height 属性来表示图片的宽高，但通常我们不使用这两个属性来更改图片尺寸，只是起到页面内占位的作用。 注意区分下面 4 种写法的异同

<img src="https://example.com/a.jpg" alt="a"> <img src="img/a.jpg" alt="a"> <img src="/img/a.jpg" alt="a"> <img src="//abc.com/img/a.jpg" alt="a">

a 元素(anchor)

a 标记的作用是设置链接，既可以用于文档外链接，也可以用于文档内导航。 有两个重要属性:

  1. href 属性用于标识链接位置，可以是相对路径，也可以是绝对路径。
  2. target 属性用于指定打开帧的状态，有四个值:
  • _blank，新窗口打开
  • _parent，父窗口打开
  • _self，自窗口打开(default)
  • _top，顶层窗口打开

文档外链接

<a href="https://github.com/1ess">github</a> <a href="/demo/index.html" target="_blank">demo</a> <a href="mailto://xxx@gmail.com">email me</a>

文档内导航

<a href="#faq">常见问题</a> <a href="#">回顶部</a> <a href="http://abc.com/course/abc#faq">常见问题</a>

列表元素

列表元素用来表示线性数据结构，如一组数据内容，导航栏的各个子项等。 li 元素(List item)可以嵌套在 ol 或 ul 元素内部。

无序列表 ul(Unordered list)

<ul> <li>Item 1</li> <li>Item 2</li> </ul>

有序列表 ol(Ordered list)

常用属性:

  • start: 制定第一个元素的序号
  • reversed: 布尔属性，倒序显示
  • type: 列表标记样式(1，a，A，I)

<ol start="3" type="a"> <li>Item 1</li> <li>Item 2</li> </ol>

注意: ol 与 ul 默认上下外边距 1em，左内边距 40px。

定义列表 dl(Definition list)

定义列表用于名词解释。 基本标记包括:

  • dl(Definition list)
  • dt(Definition term)
  • dd(Definition description)

<dl> <dt>html</dt> <dd>网页文档根要素</dd> <dt>head</dt> <dd>网页头部信息描述区域</dd> <dt>body</dt> <dd>网页具体内容部分</dd> </dl>

table 元素(Table)

table 元素用来表示二维数据结构。 基本标记包括:

  • table
  • caption
  • tr: table row
  • th: table head
  • td: table data
  • thead
  • tbody
  • tfoot

<table> <caption>成绩</caption> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>100</td> <td>99</td> <td>98</td> </tr> <tr> <td>李四</td> <td>100</td> <td>99</td> <td>98</td> </tr> <tr> <td>王五</td> <td>100</td> <td>99</td> <td>98</td> </tr> </tbody> </table>

容器元素

div 元素(Block container)

<div lang="ja" class="japanese-part"> 無限大な夢のあとの 何もない世の中じゃ </div>

span 元素(Inline container)

<p>I Love<span class="love-person">U</span></p>

Block 和 Inline 的区别我们在 CSS 在具体讲解。

form 元素(Form)

form 元素为用户输入创建表单，用于向服务器提交数据。 三个重要的属性:

  • action: 对应的服务器脚本
  • method: 提交的 HTTP 请求方法
  • enctype: 编码方式 content-type

<form action="/index.do" method="POST" enctype="multipart/form-data"> <label for="name">name: <input type="text" id="name" name="user"></label><br> <label for="password">password: <input type="password" id="password" name="password"></label><br> <label for="bike">Bike <input type="checkbox" id="bike" name="bike"></label> <label for="car">Car <input type="checkbox" id="car" name="car"></label><br> <label for="male">Male <input type="radio" name="Sex" id="male" checked></label> <label for="female">Female <input type="radio" name="Sex" id="female"></label><br> <select name="cars" id="cars"> <option value="volvo">Volvo</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select><br> <textarea name="cat" id="cat" cols="30" rows="10">The cat was playing in the garden.</textarea><br> <input type="button" value="Hello world!"><br> <input type="submit" value="Hello world!"><br> </form>

语义化元素

语义化的作用，简单说来就是让机器可以读懂内容。 包括:

  • main 元素
  • article 元素
  • section 元素
  • nav 元素
  • aside 元素
  • header 元素
  • footer 元素

main 元素(Main)

main 标记描述文章的主要内容。

<body> <main role="main"> <article> <h1>文章标题</h1> <p>文章内容</p> </article> </main> </body>

article 元素(Article)

article 元素表示网页独立内容区域。

<article> <h1>First Post</h1> <p>Some content</p> </article> <article> <h1>Second Post</h1> <p>Some more content</p> <h2>Subsection</h2> <p>Some details</p> </article> <article> <h1>Last Post</h1> <p>Final bit of content</p> </article>

section 元素(Section)

section 元素表示文章段落部分。与 article 元素配合使用。

<section> <h2>The Document Outline</h2> <p>HTML5 includes several "sectioning content" elements that affect the document outline.</p> <h3>Headers</h3> <p>The <code>&lt;header&gt;</code> element is one such sectioning element. </p> <h3>Footers</h3> <p>And so is the <code>&lt;footer&gt;</code> element.</p> </section> <section> <h2>Inline Semantic HTML</h2> <p>The <code>&lt;time&gt;</code> element is semantic, but it's not sectioning content.</p> </section>

nav 元素(Navigation)

用于页面导航，如页面导航条。

<h1>Interneting Is Easy!</h1> <nav> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Blog</a></li> <li><a href='#'>Sign Up</a></li> </ul> </nav>

aside 元素(Aside)

用于页面附加性内容。

<aside> <h3>解释</h3> <p>解释文字</p> </aside>

header 元素(Header)

header 标记用于文章或区块头部。

文章头部

<article> <header> <h1>Semantic HTML</h1> <p>By Troy McClure. Published January 3rd</p> </header> <p>This is an example web page explaining HTML5 semantic markup.</p> </article>

导航头部

<body> <header> <h1>Interneting Is Easy!</h1> <nav> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Blog</a></li> <li><a href='#'>Sign Up</a></li> </ul> </nav> </header> </body>

footer 元素(Footer)

footer 标记用于文章或区块脚部。如作者信息，文章出处等。

文章脚部

<article> <header> <h1>Semantic HTML</h1> <p>By Troy McClure. Published January 3rd</p> </header> <p>This is an example web page explaining HTML5 semantic markup.</p> <footer> <p>This fake article was written by somebody at InternetingIsHard.com, which is a pretty decent place to learn how to become a web developer. This footer is only for the containing <code>&lt;article&gt;</code> element.</p> </footer> </article>

页脚

<footer> <p>&copy; 2017 InternetingIsHard.com</p> </footer>

c++ 腾讯优客 html github

0 人点赞