前端知识点简单总结
HTML中的部分标签
| 标签 | 作用 |
|---|---|
| header | 用于头部信息 |
| nav | 导航链接,前后按钮 |
| main | 主体部分 |
| article | 包含文章 |
| section | 章节、页眉、页脚或文档中的其他部分,一般包含h标签 |
| aside | 侧边栏 |
| footer | 页脚 |
| pre | pre中的空格和换行符会原样输出,一般包含代码 |
| code | 包含代码 |
| time | 包含时间 |
| sup | 在右上角显示 |
| sub | 在右下角显示 |
| address | 地址,会自动换行 |
| s,del | 删除线 |
| progress | 进度条,value为当前值,max为最大值 |
| i | 斜体 |
| strong,em | 加强语气,strong语气更强 |
| mark | 标记(内容颜色默认为黄色) |
| q | 短引用 |
| blockquote | 长引用 |
a标签
href属性的值 :
- 网址(跳转到新网址)
- “mailto:邮箱地址”(发送邮件)
- “tel:电话号码”(打电话)
target属性的值 :
- _self : 在当前窗口打开新页面,默认就是在当前窗口打开
- _blank : 在新窗口打开
锚点 :
- 作用 : 常用于返回顶部,如,点击a标签则会回到顶部
<a href="#top">底部</a><h1 id="top">xiaosheng</h1>
- 作用 : 常用于返回顶部,如,点击a标签则会回到顶部
列表
- 列表分类
| 标签 | 作用 |
|---|---|
| ol->li | 有序列表 |
| ul->li | 无序列表 |
| dl->dt+dd | 自定义列表 |
表格
- table属性:
- border 设置边框
- cellspacing 规定单元格之间的空白,当为0的时候是单边框
- cellpadding 规定单元边沿与其内容之间的空白
| 标签 | 作用 |
|---|---|
| caption | 表格标题 |
| thead->tr->th | 表头 |
| tbody->tr->td | 表格内容 |
rowspan : 纵向合并
colspan : 横向合并
iframe内联框架
<!-- 会显示引用地址的内容 --><iframe src="地址"></iframe><!-- 点击a标签后会显示demo1.html中的内容,没有点击前,显示的是demo1中的内容 --><a href='demo1.html' target='demo1'>demo1</a><iframe srcdoc='demo1中的内容' src='' name='demo1'></iframe>
以下为具体的案例
<!DOCTYPE html><html><head><title></title></head><body><header><nav><a href="#">Home</a><a href="#">About</a><a href="#">Connect</a><a href="#">Blog</a></nav></header><main><article><header><h1>文章标题</h1><p>文章段落1</p><p>文章段落2</p></header><!-- 只有元素内容会被列在文档大纲中时，才适合用section元素 --><!-- section 里应该有 标题（h1~6），但文章中推荐用 article 来代替我们可以理解为一个非文章段落，有明确 id 的一个特殊模块容器（不是专用以包住块的容器） --><section><h2>标题2</h2><p>文章段落1</p><p>文章段落2</p></section><footer><section><h6>分页条</h6></section></footer></article><aside><ul><li>推荐信息1</li><li>推荐信息2</li><li>推荐信息3</li><li>推荐信息4</li><li>推荐信息5</li></ul></aside><aside><section><h3>广告位招商</h3></section></aside><section><span>标签1</span><span>标签2</span><span>标签3</span></section></main><!-- pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体,常见应用就是用来表示计算机的源代码 --><pre>满园春色关不住,一支红杏出墙来.</pre><footer><div class="link"><a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a></div></footer><time>2019-11-15 14:22:45</time><br><span>2019-11-15 14:22:45</span><p> HTML文档,是指采用超文本标记语言编写的结构化文档</p><br><p><abbr title="HyperText Markup Language">HTML</abbr>文档,是指采用超文本标记语言编写的结构化文档</p><hr><p>2 <sup>3</sup> = 8<br>合肥 <sub style="color:gray">中国发展最快的城市之一</sub>欢迎您</p><!-- address会自动换行 --><footer>联系地址:<address>合肥市政务新区怀宁路999号</address></footer><br><!-- 删除线标签s,del -->猪肉原价: <s>58.88元</s>,现价: <span>49.99元</span><br>猪肉原价: <del>58.88元</del>, 现价: <span>49.99元</span><hr><pre><code>var num = 3;echo num+3;</code></pre><!-- 进度条 --><progress value="33" max="100"></progress><hr><b>多看多写是最快的学习方法</b><!-- strong 把文本定义为语气更强的强调的内容。 --><strong>多看多写是最快的学习方法</strong><br><!-- i 斜体 --><i>程序员是地球上最聪明的一群人</i><br><!-- em:把文本定义为强调的内容 --><em>程序员是地球上最聪明的一群人</em><hr><!-- mark:突出显示部分文本 --><p>我是php中文网的讲师:<mark>朱老师(Peter Zhu)</mark></p><hr><!-- q:标记短的引用 --><p><q>引用文本</q></p><!-- blockquote:标记长的引用 --><blockquote title="http://www.kuxiaosheng.com"><p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连</p></blockquote></body></html>
以下为手写笔记
