华为云前端一阶段HTML入门(第三章标签)

HTML入门(第三章标签)

结构标签

div是块标签,包裹一定区域中的元素,会独自占一行,可以嵌套使用形成父子级关系以及兄弟级关系;

span是会在一行中不断加入(内联标签),但当数量过多时也会换行;

<body>
  <div>华为产品
      <div>华为手机</div>
      <div>华为电脑</div>
  </div>
  <div>div2</div>
  <div>div3</div>
  <span>华为产品
      <span>华为笔记本</span>
      <span>华为手表</span>
  </span>
</body>

标题标签

h标签(标题标签)只有h1到h6,当输入h7时与div等大小。
h1为标题中权重最大的,一个文档应该只有一个,不加任何样式的话就会占满一行。

段落标签

p标签(段落标签)使用时将需要显示的文字夹在起始标签和终止标签之间即可;
在代码中输入多恨空格时浏览器只会渲染出一个,需要连续使用多个时要用&nsbp;代表一个空格;
同时当字数增多时,它会自动填充满一行后折行(也就是换到下一行开头继续)并且随着浏览器宽度而不断自适应的改变。

<body>
    <div>华为手机发布会</div>
    <h1>我是大娃</h1>
    <h2>我是二娃</h2>
    <h3>我是三娃</h3>
    <p>
        华为手机&nbsp&nbsp&nbsp&nbsp真不戳;
    </p>
    <p> 华为电脑</p>
    <p>华为笔记本</p>
</body>

链接标签

a标签(链接标签)href和target两个属性非常重要
href属性后面接连接到的网址;
没写target属性的话默认值为_self即自己本身这个页面跳转到点击链接的那个页面,如果设置属性为target="_blank"的话原界面保留新开一个界面跳转到点击链接的网址;
当有多个链接标签需要新建页面跳转时可以在head中设置base属性 在其中将target设置为“_blank”这样全局默认就是_blank属性了,如果需要再单独设置某个标签直接在那个标签后面写上target=_self即可;

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <base target="_blank">
</head>
<body>
  <a href="http://www.baidu.com" >百度官网链接</a>
  <a href="http://www.huawei.com" >华为官网链接</a>
  <a href="http://www.qq.com" >qq官网链接</a>
  
  <a href="javascript:void(0)">空连接</a>
  <a href="javascript:;">空连接二号</a>
</body>

图片标签

有相对路径绝对路径的表示方法 和链接标签中基本相同;图片标签使用时必须要规范的加上alt属性防止图片打不开时可以显示提示的相关文字;

<body>
    <img src="kk.jpg" alt="这是一张coder的照片" width="200" height="300" title="一个小男孩"/>
    <!-- 相对路径         如果图片无法显示则显示文字      设置宽度高度        鼠标停留时显示-->
</body>

列表标签

ul表示无须列表 ol为有列表 dl为自定义列表

<body>
        <!-- ul为无序列表  type控制内容前 circle square null-->
   <ul type="square">
       <li>皇室战争</li>
       <li>部落冲突</li>
       <li>海岛奇兵</li>
   </ul>
    <!-- ol为有序列表 type 代表前面的序号可以1.2.3.也可以a.b.c.-->
    <ol type="a">
        <li>暗黑破坏神1</li>
        <li>暗黑破坏神2</li>
        <li>暗黑破坏神3</li>
    </ol>
    <!-- dl为自定义列表   dt控制标题  dd控制标题下内容-->
    <dl>
        <dt>辽宁省</dt>
        <dd>沈阳市</dd><dd>大连市</dd><dd>鞍山市</dd>
        <dt>河北省</dt>
        <dd>石家庄市</dd><dd>保定市</dd>
    </dl>
</body>

你可能感兴趣的:(前端学习,html,华为)