HTML 01

≡放荡痞女 提交于 2019-12-04 07:11:35

HTML

  • 超文本标记语言 Hyper Text Markup Language
  • < > 标签狂魔...

注释

  • 注释是代码之母

  • 在搭建页面时, 通常会利用注释来划分区域

<!--导航条开始-->

<!--导航条结束-->
<!--侧边栏开始-->

<!--侧边栏结束-->
  • 单行注释
<!--单行注释-->
  • 多行注释
<!--
多行注释1
多行注释2
多行注释3
-->

HTML文档结构

  • head 不是给人看的, 是给浏览器看的
  • body 内的代码才是给人看的
<html>
    <head></head>  
    <body></body>
</html>

标签的分类

  • 双标签, 既有头有尾
    • <h1>This is the first html page I made!</h1>
  • 自闭合标签, 既有头无尾
    • <img src="test.jpg"/>

head内常用标签

  • title 定义网页标题 <title>Welcome to MrBigB's Website</title>
  • style 内部支持写css代码
<style>
        h1 {
            color: darkred;
        }
    </style>
  • link 引入外部css样式文件 <link rel="stylesheet" type="text/css" href="test.css"/>
/* test.css */

h2 {
    color: darkgreen;
}
  • script 内部可以直接写js代码, 也可以引入外部js文档
    • <script>alert="Hello world!"</script>
    • <script src="test.js"></script>
  • meta 定义网页源信息
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's Website</title>
    <style>
        h1 {
            color: darkred;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="test.css"/>
    <script src="test.js"></script>
</head>
<body>
<h1>This is the first html page I made!</h1>
<h2>HTML is fucking awesome!</h2>
<img src="https://images.cnblogs.com/cnblogs_com/bigb/1551224/o_%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA.jpg"/>
</body>
</html>

body内常用标签

  • h1-h6 标题标签
  • p 段落标签, 一个p就是一行内容
  • s 删除线
  • b 加粗
  • u 下划线
  • i 斜体
  • br 换行
  • hr 一条分割线

body内特殊符号

  • &nbsp; 空格
  • &amp; &
  • yen; ¥
  • &gt; >
  • &lt; <
  • &copy; ©
  • &reg; ®
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's website!</title>
</head>
<body>
<h1>h1标签效果测试</h1>
<h2>h2标签效果测试</h2>
<h3>h3标签效果测试</h3>

<s>s标签效果测试</s>
<b>b标签效果测试</b>
<u>u标签效果测试</u>
<i>i标签效果测试</i>

<p>p标签效果测试</p>
<br>
我是无标签文本1上面测试的br标签效果
<hr>
我是无标签文本2上面测试的是hr标签的效果
<p>p标签效果测试</p>

<p>a &gt; b</p>
<p>a &lt; b</p>
<p>&amp;</p>
<p>&yen;</p>
<p>&copy;</p>
<p>&reg;</p>

</body>
</html>

块级标签和行内标签

  • 行内标签, 内部文本有多大就占多大: s, i, u, b, span
    • 行内标签不能嵌套行内标签和块级标签
  • 块级标签独占一行: h1-h6, p, br, hr, div
    • 块级标签内可以嵌套其他块级标签和行内标签
    • 注意: p标签虽然也是块级标签, 但只能嵌套行内标签, 不能嵌套块级标签

标签的两个属性

  • id 标签的编号, 每一个标签都应该都一个id, 且同一个文档中, 标签的id是唯一的
  • class 类属性, 有点类似于面向对象的继承
    • class = "c1, c2, c3" 则当前标签就会拥有c1, c2, c3的所有样式

body内重要的几个标签

  • div

    • 是一个块标签
    • 相当于一块区域, 可以往区域内填写任何内容
  • span

    • 是一个行内标签
  • a 连接标签

    • 跳转功能, href参数控制跳转的地址 , target参数控制是在当前页面跳转还是新打开页面(_self, _blank)
  • 锚点功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's Website</title>
</head>
<body>
<a href="" id="a1">start</a>
<a href="http://www.baidu.com" target=_self>click me to search</a>
<div style="background-color: darkred;height: 200px"></div>
<div style="background-color: darkgreen;height: 200px"></div>
<div style="background-color: darkblue;height: 200px"></div>
<a href="" id="a2">middle</a>
<div style="background-color: darkblue;height: 200px"></div>
<div style="background-color: darkgreen;height: 200px"></div>
<div style="background-color: darkred;height: 200px"></div>
<a href="#a1">back to the start</a>
<br>
<a href="#a2">bac to the middle</a>
</body>
</html>
  • img 图片标签

    • src 图片地址
    • alt 当图片加载不出来的时候展示的提示信息
    • title 鼠标悬浮在图片上后的提示信息
    • width和height 设置图片展示大小, 只需设置一个即可, 默认等比缩放
  <img src="test.jpg" alt="this is a picture of a dog" title="the dog is playing" height="200"/>

列表标签

  • ul无序列表
    • disc 实心圆(默认)
    • circle 空心圆
    • square 实心方块
    • none 无样式
  • ol有序列表
    • 1 数字列表
    • A 大写字母
    • a 小写字母
    • I 大写罗马
    • i 小写罗马
  • dl标题列表
    • dt 小标题
    • dd 小章节

表格标签

  • 展示数据的时候一般都用到表格标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table border="1">
    <thead> <!--表头-->
    <tr> <!--一个tr代表一行-->
        <th>name</th>
        <th>gender</th>
        <th>age</th>
    </tr>
    </thead>
    <tbody> <!--表数据-->
    <tr>
        <td>bigb</td>
        <!--<td rowspan="2">bigb</td>--> 
        <td>male</td>
        <td>18</td>
    </tr>
    <tr>
        <td>blake</td>
        <!--<td colspan="2">blake</td>-->
        <td>female</td>
        <td>22</td>
    </tr>
    </tbody>
</table>
</body>
</html>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!