慕课网笔记1 : 初识html标签

慕课网: HTML+CSS基础课程

html标签：

• <em>斜体</em> : 需要强调的文本
• <strong>加粗</strong> ： 需要加强的文本
  <span>在<p>标签内的自定义样式</span> ：span

标签是没有语义的，它的作用就是为了设置单独的样式用的。
在<p>标签中创建自定义的的样式

<style>
span {
  color : blue;
}
</style>

• <q>引用文本</q> ： 在html文本中添加双引号
• <blockquote></blockquote> : 长文本的引用, 自带段落缩进。
• <br /> : 换行
• &nbsp : 一个标签就是一个空格（html代码中没有回车和空格双引号等等）
• <hr /> : 添加水平横线
• <address>地址</address> :在浏览器上显示的默认样式为斜体, 可以用css修改样式. 也可以在标签中间用<a>标签添加邮件链接
• <code>代码语言</code>: 注：如果是多行代码，可以使用 <pre>标签
• <pre>文字或代码段</pre> : 在其中的空格和会车将有效
• <ul> </ul> : 无序列表

<ul>
    <li>这是列表</li>
</ul>

• <ol> </ol> : 有序列表.
• <table>表格</table> : 四个元素 table、tbody、tr、th、td

<table>         // <tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点, 
 <tbody>     //但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。       
   <tr>                   //<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
     <th>班级</th>    
     <th>学生数</th>
     <th>平均成绩</th>    // <th>…</th>：表格的头部的一个单元格， 即表格表头。
   </tr>           
   <tr>
     <td>一班</td>       // <td></td> : 表格的 列
     <td>30</td>
     <td>89</td>
   </tr>
   <tr>
     <td>二班</td>
     <td>35</td>
     <td>85</td>
   </tr>
</tbody>
</table>

• table标签可以添加CSS样式

Table 表格在没有添加 css 样式之前，是没有边框的

<style type="text/css">
    table tr td,th {
       border:1px solid #000;
    }
</style>

• table 的摘要和标题

1. 摘要 summary： 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
2. 标题 <caption> : 描述表格内容，显示位置在表格上方。

<table summary="这里面是表格的摘要文本">
      <caption>标题文本</caption>
     <tr>
            <td>…</td>   
    </tr>
</table>

• <a>标签 : 可实现超链接

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

• 在新建浏览器窗口中打开链接

 <a href="目标网址" target="_blank"></a>

• 使用 a 标签链接Email地址 ：

Mailto后为收件人地址;cc 后为抄送地址
subject后为邮件的主题，body后为邮件的内容，
如果Mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的每一个都以“&”开头。下面是一个完整的实例:

例:Mailto:aaa@xxx.com?cc=bbb@yyy.com&bcc=ccc@zzz.com&subject=主题&body=邮件内容

• <img>标签 : 图片

>1. src：标识图像的位置
  2. alt：指定图像的描述性文本，当图像不可见时（下载不成功 时），可看到该属性指定的文本；
 3. title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
 4. 图像可以是GIF，PNG，JPEG格式的图像文件。