HTML基础

最新推荐文章于 2024-04-18 16:28:46 发布

原创最新推荐文章于 2024-04-18 16:28:46 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML中的基础标签，包括段落、标题、强调、引用、列表、表格、链接、图片、表单等内容，帮助读者掌握HTML的基本语法和常用标签的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

决定开始的话就要好好准备！

● 

●<body><head> <html> 不多赘述

●<p> 段落段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。

● <hx>标题文本</hx> (x为1-6)

●<em> 表示强调默认用斜体表示

●<strong> 表示更强烈的强调用粗体表示
目前国内前端程序员更喜欢使用<strong>表示强调。

●<span> 与em ,strong 不同，不是为了强调，而是为了可以自定义样式，在先有 <style> span{ color:blue;} </style> 然后再 <span> 文本 </span>

●<q>引用文本</q> 注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。对短文本的引用用<q>

●<blockquote>引用文本</blockquote> 对长文本的引用默认缩进也不能加引号

●<br> 换行 xhtml1.0写法：<br /> html4.01写法：<br>
现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。

●没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，
这样的标签有<br />、<hr />和<img />。

●  空格（一个）记得带 ;

●<hr> 分隔横线 html4.01版本 <hr> xhtml1.0版本 <hr />

● <address>联系地址信息</address>

定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。
默认斜体

●<code>代码语言</code> 插入一行代码

●<pre>语言代码段</pre> 插入一段代码
默认保留里面格式，可以不用加换行或者空格
注意：<pre> 标签不只是为显示计算机的源代码时用的，
在你需要在网页中预显示格式时都可以使用它，
只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

●ul-li 没有前后顺序的信息列表。默认前面带小圆点

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

●ol-li 有前后顺序的信息列表。默认序号开始1.2.3…

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

●<div> 标签，隔绝一个域出来，划分出一个独立的逻辑部分。可以用id来命名，id 是唯一的

●表格<table>
<table> 整体
<tbody> 主体内容部分，当表格很大时可以优先输出body内容，而不是等都加载出来再显示
<tr> 行 <td> 列 <th> 表头
默认的表格是没有线的
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。默认为粗体并且居中显示
6、表格中列的个数，取决于一行中数据单元格的个数。

●给表格加摘要（网页上不显示）<table summary="表格简介文本">
●给表格加标题（在表格最上显示）<caption>标题文本</caption>

●<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

默认在当前页面跳转，若想在新页面跳转加 target="_blank"
在href 后面加，注意一定要有个空格，不然是错误的

可以变成发送邮件，以下参数之间第一个用？，之后用&分隔
这些参数都写在href里，注意‘’
mailto + 收件人地址
cc + 抄送地址（就是同时发送给别人）
bcc + 密件抄送地址（发给别人但是互相都不知道）
多个邮箱地址之间用 ;
subject + 邮件主题
body + 邮件内容
eg：<a href="mailto:yy@imooc.com?subject='观了不起的盖茨比有感'&body='你好，对此评论有些想法'">对此影评有何感想，发送邮件给我</a>

●<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

●表单

表单内容必须在form内

<form   method="传送方式"   action="服务器文件">

文本密码输入

<input type="text/password" name="名称" value="文本" />

text ：文本输入
password：密文输入
name：为文本框命名
value：为文本输入框设置默认值。(一般起到提示作用)

输入大段文本

<textarea rows="行数" cols="列数">文本 </textarea>

这两个属性可用css样式的width和height来代替，col用width、row用height来代替

单选框和多选框

<input   type="radio/checkbox"  value="值"   name="名称"  checked="checked"/>

当 type=“radio” 时，控件为单选框
当 type=“checkbox” 时，控件为复选框
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked=“checked” 时，该选项被默认选中
注意: 同一组的单选按钮，name 取值一定要一致

下拉表单

<select>  <option value="向服务器传递的值">选项的值</option>  </select>

selected="selected"属性，则该选项就被默认选中（option后）
multiple="multiple"属性，可以下拉表单中按住Ctrl多选（select后）

按键：提交重置
提交<input type="submit" value="提交">
重置<input type="reset" value="重置">

<label>:无实际样式，作用是为鼠标用户改进了可用性。
如果你在 label 标签内点击文本，就会触发此控件。
就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。