HTML学习笔记
Computer Class 6 GuoYixuan
catalog
<id="catalog">
HTML概述
HTML(Hyper Text Markup Language)人如其名,HTML就是用标记(markup)来注明文本、图片和其他内容,便于在浏览器中显示。 HTML、JavaScript、 CSS 被称为Web三剑客 。
超文本:“超文本”(hypertext)是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网,并将其与他人创建的页面相链接,你就成为了万维网的积极参与者。
HTML结构
元素
文档组成
- <!DOCTYPE html>:声明文档类型
- <html>:根元素
- <meta charset="utf-8">:设置文档字符编码类型(utf-8)
- <link rel="shortcut icon" href="" type="image/x-icon">:指定页面的标签,出现在浏览器的标签上
- <title>:出现在浏览器标签上的说明文字
- <h1>:h1表示一级标题,还有h2,h3,h3等等,数字越小越醒目
- <body>:元素,包括能在网页上看到的所有内容
HTML特殊标记
文本格式特殊标记
- 斜体:<em>
- 加粗\细:<strong>or<small>;
- 下划线:<u><ins>
划线:<s><del>- 高亮:<mark>
注释语句:<!-- -->
超链接:<a href="">,其中href表示要跳去的地址
特别的,<a href="" target="_blank">,表示在新页面中打开该超链接,_self则在当前界面打开
超链接后面包含的内容即为显示在页面上供用户点击的
另外,超链接可以实现页面位置(也就是元素之间的跳转),即用锚点的方法,如我在这里设置了<a href="#catalog">跳转到目录
图片:<img src="" alt="" width="" height="">
表格: <table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</table>
1这 | 2是 | 3出 |
---|---|---|
4现 | 5顺 | 6序 |
表格:
- 无序列表:<ul></ul>
- 无序列表:<ol></ol>
其中,每一项<li></li>
表单:<form></form>
框类:<input type="text" name="" placeholder="">type有很多种类型,包括文本框,密码框,按钮,列表等等,上面的是文本框
选项类:
注意:1.checked表示默认选项 2.checkbox是多选radio是单选
chose1
chose2
按钮类:
列表类:
man woman other 其它:
日期选择器:
文件选择器:
文本输入框:
HTML元素关系及特殊字符
HTML元素关系
HTML元素可以称为区块或内联的方式进行显示
区块元素
区块元素在浏览器显示时,通常会以新行来开始(和结束)。如:<h1>,<pre>,<ul>,<table>,<div> 等。
内联元素
内联元素相反,他们总是一个接一个进行显示,不会新起一行。如:<span>,<input>,<td>,<a>,<img>等。
特殊字符
<h1>这是个一级标题</h1> <p>这是一个段落<p> <a href="https://twitter.com/">眼见何事,情系何处,身处何方,心思何人</a>
预设格式
<pre></pre>
如谷之歌 扎根土里 与风共存 与种子越冬 与鸟歌颂