html学习总结1：标签、样式及属性

来源：互联网发布：淘宝卖家淘宝客推广编辑：程序博客网时间：2024/06/05 19:00

1.代码的显示：
<pre></pre>:定义预格式化文本，保存文本的换行与空格，适合显示计算机代码等
<code></code>:定义编程代码示例，不保留空格及换行。
2.aglin文本对齐格式：center,left,right
3.块级元素与行级元素：
块级元素：
前后有换行
可以设置宽高等属性，以及边距，参照盒子模型
内部可以包含其他块级元素，内联元素
宽度默认是父元素的宽度，高度可以设置或者由内容的高度决定
如：<form><div><li><ul><tr>
行级元素：
前后不换行
设置元素宽高无效，高度由line-height决定（不设置时由font-size计算得出），宽度由内容的多少决定，当宽度大于父元素的宽度时，内联元素会被折断到下一行，对于内联元素可以设置水平方向的padding，margin等，但是对于垂直方向，设置padding，margin看起来就会有效果但是对于浏览器来说是没效果的，不影响其他元素的布局。
不能包含其他元素
如：<a><br><span><img><button>
但是内联元素中有一些是替换元素（浏览器在加载时根据属性的设置最后确定样子），可以设置宽高等属性，例如：img，
input
块级元素和内联元素的转换
设置display：block/inline-block
设置元素浮动
设置元素的position：relative/absolute/fixed
4.布局
<div>常用于html的布局，因为可以使用css轻松地定位
HTML5中定义了新的元素来定位网页不同的部位：
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
5.响应式web设计
什么是响应式web设计：能够以可变的尺寸来传递网页
常使用的响应式布局的框架：bootstrap
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
6.框架结构标签（<frameset>
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
横排
<html>
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
<html>
竖排
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
混合
<html>
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

基本的注意事项 - 有用的提示：
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
为不支持框架的浏览器添加 <noframes> 标签。
重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
</html>
7.内联框架：iframe 用于在网页内显示网页 <iframe src="URL"></iframe>
8.HTML <head> 元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
标签描述
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标（target）。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。

阅读全文

0 0