zoukankan      html  css  js  c++  java
  • 怎样简单编写一个html网页

    # 转载请留言联系

    • 一个HTML的基本结构如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    </html>

    第一行是文档声明,第二行“<html>”标签和最后一行“</html>”定义html文档的整体,“<head>”标签和“<body>”标签是它的第一层子元素,“<head>”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“<body>”内编写网页上显示的内容。

    一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页。

    1.标签

    • 双标签和单标签

    # 双标记/双标签
      结构格式:
        <标签名 属性名="属性值" 属性名="属性值" ...>内容</标签名>     
      注意:
          一个双标签会两部分,左边叫开始标签,右边的结束标签,结束标签必须在标签名左边,有一个正斜杠 /

      例如:<p></p>

    # 单标记/单标签
      结构格式:
        <标签名 属性名="属性值" 属性名="属性值" ... />
     
      注意:
      单标签,最好在开始标签的最后,有一个正斜杠。

      例如:<img />

    • 标题标签

    <h1>标题</h1>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>
        <!--最多只有标题6,常用的只有1-4-->
    </body>
    </html>
    • 段落标签

    <p>段落内容</p>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3</p>
    </body>
    </html>
    • 通用块容器标签,表示文档中一块内容,具有块元素基本特性,没有其他默认样式

    <div>内容</div>

    • 换行标签

    <br/>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p>我是第一段<br/>我是第二段<br/>我是第三段</p>
    </body>
    </html>
    • 图片标签

    <img src="路径。可以是网上的链接路径,也可以是本地路径" alt='图片加载失败时显示的文字' />

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <img src="./images/123.jpg" alt="滑稽" />
    </body>
    </html>
    • 超链接标签(a链接)

    <a href="链接地址">链接显示的文字或者图片</a>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a href="http://www.baidu.com">百度</a>    
        <a href="http://www.baidu.com"><img src="./images/123.jpg"/></a>
    </body>
    </html>

    注意:

    1.链接地址一定要写http://或者https://

    2.src=" " ----> 刷新当前页面

    3.src="#" ----> 回到页面的顶部

    关于超链接标签,还有一个很常用的东西。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a href="http://www.baidu.com" target="_blank">百度</a>  #如果后面还有一个href='...',只有前面的生效
         <!--target 表示用户点击链接,打开的方式:-->
         <!--target的值是固定:-->
         <!--_self  在当前页面中打开新的页面[默认值]-->
         <!--_blank 在新建的浏览器窗口中打开新的页面-->
    </body>
    </html>
    •  div与span标签

    div常用于包含其他的标签,用于表示,网页的一整部分内容,也就是用于进行网页的布局

    span常用语包含其他的标签或者普通文本内容,也是用于进行网页的内容布局。

    无意义标签的本身,没有任何其他的独特属性。

    2.实体字符

    &nbsp; 空白字符,一个空格
    &lt; 小于号
    &gt; 大于号
  • 相关阅读:
    api.js
    vue开关
    vue 单选框自定义
    vue 笔记
    Flutter 检测网络连接 监听网络变化
    lutter 调用原生硬件 Api 实现扫码
    flutter 支付宝支付流程以及用 Flutter 在 Android Ios 中实现支付宝支付
    js+css 动效+1的效果
    Vue -- filters 过滤器、倒计时效果
    移动端如何实现两行点点点?
  • 原文地址:https://www.cnblogs.com/chichung/p/9651534.html
Copyright © 2011-2022 走看看