zoukankan      html  css  js  c++  java
  • HTML:HTML基础


    HTML不是一门编程语言,而是一种用于定义内容结构的标记语言。HTML由一系列元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或工作。一对标签可以为一段文字或者一张图片添加超链接、设置字体、字号等。


    HTML元素



    • 元素结构:普通元素 = 开始标签+内容+结束标签。
    • 空元素:不包含任何内容的元素称为空元素,空元素不需要通过内容来产生效果,比如 img、br元素。
    • 元素嵌套:元素可以相互嵌套,但必须保证元素嵌套次序正确。
    • 元素属性:属性包含了关于元素的一些额外信息,这些信息本身不应显现在内容中。属性应该包含空格符 + 等号 + 属性值(由引号所包围)。

    HTML文档格式

    <!DOCTYPE html>
    <html>
        
      <head>
        <meta charset="utf-8">
        <title>测试页面</title>
      </head>
        
      <body>
        <img src="images/firefox-icon.png" alt="测试图片">
      </body>
        
    </html>
    
    • <!DOCTYPE html> :文档类型。在当今作用有限,仅用于保证文档正常读取。
    • <html></html>:包含整个页面的内容,也称作根元素。
    • <head></head> :对用户不可见,包含面向搜索引擎的搜索关键字、页面描述、CSS 样式表和字符编码声明等。
    • <meta> :指定文档使用 UTF-8 字符编码 。
    • <title></title> :设置页面的标题。
    • <body></body> :包含期望让用户在访问页面时看到的内容主体,包括文本、图像、视频等内容。

    HTML常用标签

    1、字体标签<font>...</font>

    <font size=14 face="楷体" color="red">我是楷体、红色</font>
    

    注:在HTML4中不赞成使用字体标签,HTML5直接不支持,而是使用CSS实现字体样式


    2、标题标签<h?>...</h?>

    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    

    注:一般只使用三级标签,标题是为了结构如果只是为了样式,可使用CSS。<h1>标签尽量靠近<body>标签可以让搜索引擎更快领略主体。


    3、段落标签<p>...</p>

    <p>这是一个段落</p>
    

    注:段落内会根据容器宽度自动换行,段落间会自动添加空行


    4、图片标签<img>

    <img src="相对地址、绝对地址、URL" alt="图片有错误时的显示信息" width="100px" height="100px">
    

    width和height属性一般使用CSS配置


    5、超链接:<a herf="xxx">...</a>

    <a herf="https://www.baidu.com">点击文字打开百度</a>`
    
    <a herf="https://www.baidu.com" target="_blank">点击文字在新页面打开百度</a>`
    
    <a herf="img/1.png">点击文字打开本地图片</a>
    
    <!--点击图片打开网址-->
    <a herf="https://www.baidu.com"><img src="img/baidu.jpg"></a>
    

    6、锚点

    <!--先定义锚点-->
    <a name="锚点1"></a>
    
    <!--使用锚点链接-->
    <a herf="#锚点1">跳转到锚点一</a>
    <a herf="index.html#锚点1">跳转到index页面中的锚点一</a>
    

    7、列表

    无序列表
    <ul>
        <li>
        <li>
    </ul>
    有序列表:
    <ol>
        <li>
        <li>
    </ol>
    

    注:<li>标签内可以使用段落、链接、图片、其他列表等元素


    8、表格:<table>...</table>

    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
    

    9、表单:<form>...</form>

    <form>
    <label for="">请输入姓名:</label>  <input type="text" name="firstname"><br>
    <label for="">请输入密码:</label>  <input type="text" name="lastname">
    </form>
    
  • 相关阅读:
    日常记Bug
    Docker部署Django
    杂记:防火墙、企业微信登陆、RestFrameWork
    Python2和Python3的编码
    杂记:Django和static,Nginx配置路径,json_schema
    xlwt模块的使用
    企业微信登陆
    markdown八条基础语法
    webstorm 添加markdown支持
    【electron系列之二】复制图片
  • 原文地址:https://www.cnblogs.com/bqzzz/p/14406190.html
Copyright © 2011-2022 走看看