HTML标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41001784/article/details/80069586

标签类：

<h1></h1>//   标题从h1(最大)-h6（最小）;

<p></p>// 段落标签，文本段落；
<img src="1.jpg"> //   图片标签；
<div></div> // 组合块级元素；
<!--注释文字 -->//文字注释写法；
<em>需要强调的文本</em> //斜体;
<strong>需要强调的文本</strong>//加粗；
<span>文本</span>//设置单独格式，在style里用span设置；
<q></q>//引用标签；
<blockquote>引用文本</blockquote>//长文本引用；
<br />//换行；
<hr/>//水平线；
&nbsp;//空格；
<address>联系地址信息</address>//地址标签；
<code>代码语言</code>//代码标签；
<pre>语言代码段</pre>//代码片段；
//=================================================
<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>//列表标签，无序；
//==================================================
<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>//列表标签，有序；
//==================================================

table、tbody、tr、th、td//创建表格的四个元素；
<table>…</table>//整个表格以<table>标记开始、</table>标记结束;
<tr>…</tr>//表格的一行，所以有几对tr 表格就有几行;
<td>…</td>//表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列;
<th>…</th>//表格的头部的一个单元格，表格表头。
<table summary="表格简介文本">//摘要:摘要的内容是不会在浏览器中显示出来的
//它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
<caption>标题文本</caption>//表格标题

<table>
  <tbody>
  <caption>标题文本</caption>
    <tr>
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td> 
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
<tr>
    <td>三班</td>
    <td>32</td>
    <td>80</td>
</tr>
    </tbody>
    </table>
//=================网址=============================

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>//链接标签
<a href="目标网址" target="_blank">click here!</a>//新窗口打开链接；
//=================表单============================
<form> //<form>标签是成对出现的，以<form>开始，以</form>结束
//所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
action //浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php);
method // 数据传送的方式（get/post）

<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>
//=================文本输入框===============
<input type="text/password" name="名称" value="文本" />
//  当type="text"时，输入框为文本输入框;
  当type="password"时, 输入框为密码输入框。
 //name：为文本框命名，以备后台程序ASP 、PHP使用。
 //value：为文本输入框设置默认值。(一般起到提示作用)
 //===============文本域输入=================
 <textarea  rows="行数" cols="列数">文本</textarea>
//<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
在<textarea></textarea>标签之间可以输入默认值
举例：
<form  method="post" action="save.php">
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>
//=================单（复）选框========================
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
//、type:
    当 type="radio" 时，控件为单选框
    当 type="checkbox" 时，控件为复选框
    checked：当设置 checked="checked" 时，该选项被默认选中
    :同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
    //===================下拉列表====================
    在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，按住shift多选
    举例：
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>//默认选项
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
  //========================文本默认，点击消失=======================
       <input type="text" name="username" color="gray"  value="请输入内容" color="gray"  onfocus="javascript:if(this.value=='请输入内容')this.value='';"/>
  //================================

style类：

font-size:12px;//改变窗口文字大小，可以放style里；
color:#930;//改变窗口文字颜色，可以放style里;
text-align:center;//设置窗口文字居中;
//========================================//
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>//给表格添加边框；
//==================与上一个块的距离=============
 margin-left: 70px;或者50%；
 //============================================

其他

 //<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签；

html初学知识点