详细学习HTML和CSS
文章目录
HTML5内容总结
1. Html注释
<!-- 这是注释 -->
2.html文档结构
-
<head></head>
标签对:标签包含有关HTML文档的信息,可以包含一些辅助性标签。
如html <title></title>,<link /><meta />,<style></style>,<script></script>
-
<body></body>
标签对:它是HTML文档的主体部分,在此标签中可以包含<p><h1><br>
等众多标签。
3. Html标签
语义化标签
<p></p>
段落标签
在<body>
里有几段文字就分别放在几个<p>
标签里
<p>
标签的默认样式,段前段后都会有空白
<span>
标签
语法:
<span>文本</span>
span标签是没有语义的,它是为了设置单独的样式用的。
<hx>
标题标签
语法: <hx>标题文本</hx>
(x为1-6)
h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>
是最高的等级。
<div>
标签
把一些独立的逻辑部分(页面上相互关联的一组元素,如网页中的独立的栏目版块)划分出来,放在一个<div>
标签中,这个<div>
标签的作用就相当于一个容器。
<header>
标签
用于定义头部区域
<footer>
标签
用来定义底部区域。
<section>
标签
定义一个区域,作用等同于div
<aside>
标签
定义一个侧边栏区域,作用等同于div。
注:没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br />、<hr />和<img />
效果标签
<br/>
标签
在html文本中想输入回车换行,就必须输入<br />
特殊字符
空格标签
<hr/>
标签
hr>标签实现水平线标签,加一些用于分隔的横线,这样会使文章看起来整齐些。
列表标签
<ul><li>
无序列表标签
<ul>
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ul>
<ol><li>
有序列表标签
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol>
图片、连接、表格标签
<img>
图片标签
语法:
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件。
<a>
超链接标签
语法:
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
<a>
标签 的target
属性
table
表格标签
table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
1、<thead>
标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
2、<tbody>…</tbody>
:如果不加<thead>、<tbody>、<tfooter>
, table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示*,不必等待表格结束后再显示,用tbody分段,可以一部分一部分地显示。(即,table 可以按结构一块块的显示,不在等整个表格加载完后显示。)
3、<tfoot>
元素用于对 HTML 表格中的表注(页脚)内容进行分组。
4、thead、tfoot 以及 tbody 可以对表格中的行进行分组。*
表单标签
<form>
表单标签
表单可以实现网站与用户进行交互。
表单可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
语法:
<form method="数据传送方式(get/post)" action="服务器文件(浏览者输入的数据被传送到的地方,比如一个PHP页面)">
<!-- 表单内容:所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间,否则用户输入的信息提交不到服务器上)。-->
<form/>
注意
总结
提示:这里对文章进行总结: