HTML5基础知识点总结(一)

HTML5基础知识(一)
HTML是一个超文本标记语言,它不属于一种编程语言,
基本框架如下:




<html lang="en">

<head>
    
    <meta charset="UTF-8">
    <title>标题title>
head>

<body>
    
body>
html>

HTML5基础知识点总结(一)_第1张图片
一、基本标签
<>单标签用于声明一些属性
<>双标签决定了范围
1.

标题


有h1~h6 六种格式,h1字体最大,h7及其以后的标签相当于没写
HTML5基础知识点总结(一)_第2张图片
2.


表示里面的内容为一个文字段落
3.
换行标签
4.
水平线
以上四个标签都默认独占一行,不用单独加上换行标签
以下标签不独占一行
5.倾斜标签
6.加粗
实例如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <h1>静夜思h1>
    <strong>作者:strong><br>
    <em> 李白em>
    <hr>
    <p><em>窗前明月光em>p>
    <p><strong>疑是地上霜strong>p>
    <p><strong><em>举头望明月em>strong>p>
    <p>低头思故乡p>
body>
html>

结果:
HTML5基础知识点总结(一)_第3张图片

二、注释和特殊符号
1.空格: ;
在HTML中连续的多个空格默认为一个空格,如果需要打出多个空格的效果则需要使用 ;来表示一个空格。
2.大于号和小于号:> < <和>直接写在标签中有可能被识别为标签的左右结束范围的标志,所以有时候我们需要使用这两个符号
3.引号:";理由同上
4.版权符号:©;说明版权
应用实例如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
    <p>空格1                                                             空格结束p>
    <p>空格2           空格结束p>
    <p>大于号和小于号 >     <   p>
    <p>引号  ""   ""p>
    <p>版权符号   ©p>
body>
html>

结果:
HTML5基础知识点总结(一)_第4张图片
三、图片标签
基本格式:
“图片出错的备注” width=“300 px” height=“500px”><br> 注:图片标签也是一个不独占一行的标签<br> 实例如下:</p> 
  <pre><code class= <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <img src="./img/yangsheng_14.gif" alt="养生图片1" width="300 px"> <img src="./img/yangsheng_15.gif" alt="养生图片2" width="300 px"> body> html>

运行结果:
HTML5基础知识点总结(一)_第5张图片
四、超链接和锚链接
1.超链接
可以实现页面间的跳转
格式如下:
按键内容,可以为文字或图片
实例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <a href="http://www.baidu.com">百度一下a><br>
    <a href="./测试02_图片.html">点我看图a><br>
    <a href="./测试02_图片.html"><img src="./img/养生_02.gif" alt="商家名称">点图看图a>
body>
html>

结果:
HTML5基础知识点总结(一)_第6张图片
文字和图片点击都可以跳转页面
2.锚链接
超链接的另一个运用,在本页面进行跳转
实例如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <h1>标题h1>
    <a href="#base"><h2>点我直达底部h2>a>
    <h3>文字h3>
    <h3>文字h3>
    <h3>文字h3>
    <h3>文字h3>
    <h3>文字h3>
    <h3>文字h3>
    <h3>文字h3>
    <h3>文字h3>
    <h3>文字h3>
    <h3>文字h3>
    <h3>文字h3>
    <h3>文字h3>
    <h3>文字h3>
    <h3>文字h3>
    <h3 id="base">文字h3>
    <a href=""><h2>点我回到顶部h2>a>
body>
html>

结果:
HTML5基础知识点总结(一)_第7张图片

你可能感兴趣的:(html5)