慕课网笔记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格式的图像文件。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我...
    空指针的空阅读 1,001评论 0 2
  • 1-2Html和CSS的关系 HTML是网页内容的载体 CSS样式是表现 JavaScript是用来实现网页上的特...
    远远暖暖阅读 658评论 0 1
  • ********** 未经本人允许,严禁转载任何网站 ********** 本人在慕课网学习HTML+CSS基础课...
    zhaolion阅读 11,024评论 46 548
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,375评论 1 41
  • 1 国庆长假迎来了几个朋友的婚礼,很多人对于自己的好朋友能够喜结良缘,迈向婚姻的殿堂都十分开心,但是大家每逢这个时...
    笑靥如花海阅读 912评论 0 3