"HTML"快速入门,了解学习姿势

HTML 专栏收录该内容
0 篇文章 0 订阅

HTML

一、html概念和结构及部分标签

1.概念: 什么是html

  • html是超文本标记语言
  • 超文本: 超出文本的范畴,功能比文本更强大
  • 标记语言: 语法由标签组成

2.结构

  • html
  • head
  • title
  • body

3.排版标签

  • 字体标签 :
    <font color="字体颜色" size="字体大小(1~7)" face="字体风格">哈哈</font>
  • 标题标签 :
  <hn>标题<hn>  n取值1~6, 1是一级标题, 2是二级标题...
  • 段落标签 :
      <p>段落</p>
     <!-- 
     注意:
      	段落之间自动进行换行
      -->
  • 粗体标签
   <b>内容</b>
  • 斜体标签
  <i>内容</i>
  • 下划线标签
      <hr/>
  • 换行标签
   <br/>

Ctrl+Shift+/: 注释快捷键
标签可以嵌套,具有属性

3. 路径问题

3.1 相对路径
  • 相对路径就是每次从.html文件所在位置的文件夹开始查找,称之为绝对路径.
3.1.1 同级
  • 同级就是"图片"和".html文件"存储在同一个文件夹中
  • 格式 : src=“QRCode.jpg”
  • 含义 : 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片
3.1.2 上级
  • 上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中
  • 格式: src="…/QRCode.jpg"
  • 含义:在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫QRCode.jpg, 其中…/ 代表找到当前文件夹的上一级文件夹

3.2绝对路径

  • 绝对路径就是每次都从指定的盘符开始查找.
  • 绝对路径注意点:
    (1) 路径中不要出现中文, 否则可能出现未知问题
    (2)如果是通过"相对路径"来指定图片, 不能跨盘符,例如.html文件在C盘, 那么不能去查找D盘图片

4.其他标签

(1) 图片标签

  <img src="../img/b.jpg"/>

(2) 列表标签

[1]无序列表标签
     <!--语法-->
        
        <ul type="类型">
            <li>需要显示的条目内容</li>
            ...
        </ul>
        
        示例: 
        <!--二 无序列表 ul-->
        <!--type属性: 列表的类型; circle: 空心圆; square: 实心的正方形-->
            <ul type="square">
                <!--li定义列表里面的条目(item). li定义在ul里面-->
                <li>乔丹</li>
                <li>詹姆斯</li>
                <li>艾弗森</li>
                <li>科比</li>
            </ul>
  • ul标签 注意 :
    • ul跟li标签一般同时结合用,不会单独分开,li标签必须在ul里面
    • 应用 : 新闻列表,商品列表,导航条等
[2]有序列表标签
    <!--语法-->
        
        <ol type="类型" start="起始索引">
            <li>需要显示的条目内容</li>
            ...
        </ol>
        
        示例: 
            <!--一,有序列表 ol
                start属性: 起始的索引(默认是第1个)
                type属性: 列表类型;  1: 阿拉伯数字; a: 小写的英文字母; A:大写的英文字母; i: 小写的罗马数字; I:大写的罗马数字
            -->
            <ol start="1" type="1">
                <!--li定义列表里面的条目(item). li定义在ol里面-->
                <li>乔丹</li>
                <li>詹姆斯</li>
                <li>艾弗森</li>
                <li>科比</li>
            </ol>

(3) 超链接标签

[1]作用 : 用于控制页面与页面(服务器资源)之间跳转的
     <!--超链接标签的格式: -->
        		<a href="指定需要跳转的目标路径" target="打开的方式">需要展现给用户查看的内容</a>
           <!--target属性取值: 
        		_blank:新起页面
        		_self:当前页面(默认)
           -->
           <!--href属性: 跳转的路径(可以是本地的也可以是远程的)
             target属性: 链接打开方式; _blank: 新开一个窗口;_self:在当前页面打开(默认值)
           -->
          
          <a href="http://www.baidu.com" target="_self">百度</a>
          <a href="../index.html">信息展示页面</a>		
[2]假链接
  • 点击链接不会跳转
        <a href="#">这是一个假链接</a>

(4)表格标签

[1] 语法:
<table border="1px" width="" height="" bgcolor="" align="">
          <tr>
              <td>需要显示的内容</td>
          </tr>
      </table>
      <!--1.解释说明
      	table标签代表整个表格
      	tr标签代表是表格中的一行
      	td标签就是一行中的一个单元格
      2.注意点
      	表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
      	表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
      	tr定义在table里面, td定义在tr里面
      -->
[2]表格属性
- width : 宽度
- border : 边框的粗细
- align : 用于table, tr td
- rowspan : 跨几行
- colspan : 跨几列
- cellspacing : 指定单元格之间的间距
- cellspacing : 单元格与内容之间的间隔
[3]合并单元格
- 删除要合并的单元格,只留一个(最前方)
- 设置colspan或者rowspan属性,几个合并,值就是几

[其他常用]表格其他标签

 <table>
        	<caption>表格标题</caption>
        	<tr>
                <th>第一列的标题</th>
                <th>第二列的标题</th>
                <th>第三列的标题</th>
            </tr>
            ...
        </table>
        <!--1.caption表格标题
        	在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中;
        2.th列标题
        	在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字. 到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的;
        	-->
    - caption作用: 指定表格的标题
      thead作用: 指定表格的表头信息
      tbody作用: 指定表格的主体信息
      tfoot作用: 指定表格的附加信息
    - 规范警示:
          <tr></tr> <!--不算规范的表格, 就算是一行一列, td是不能少的-->
          <tr>
              <th></th>
              <td></td>
          </tr> 	<!--规范: 
          			th标签不跟td标签在同一个tr标签里.
          			tr定义在table里面的, tr里面只放td或th; td、th里面					才放内容
          		--> 

(5) 回到顶部

[1]锚点
  <!-- 
      id的作用: 用于标记位置
   --> 
      <a id="aId01"></a>
      	...
       <a id="aId02"></a>
       	...
       <a href="#aId01">回到顶部</a>
       <a href="#aId02">回到中部</a>

(6)video标签

[1]voideo 标签的属性(值)
- controls (controls): 向用户显示控件,如播放按钮
- autoplay(autoplay) : 视频在就绪后马上播放
- height(pixels): 设置视频播放器高度
- loop(loop) : 媒介文件完成播放后再次开始播放
- preload(preload) : 视频在页面加载时进行加载,并预备播放
- src(url) : 播放视频的URL
- width(pixels) : 设置视频播放器的高度
      <video src="视频的资源" controls="controls">
      </video>

(7)audio标签 : 用来播放音频

[1] audio标签属性
- autoplay
- controls : 向用户显示控件,如播放按钮
- loop : 每当音频播放结束时重新开始播放
- preload : 音频在页面加载时进行加载,并预备播放按钮
- src : 播放音频的URL
 <auto src="音频的资源" controls="controls"></auto>

(8)详情概要标签

  • details标签 : 描述详情信息
  • summary标签 : 描述概要信息

(9) 图片链接

[1] herf表示链接地址;
  <a href="http://www.baidu.com">
          <img src="../img/b.jpg"/><br/>
          百度
      </a>
  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值