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

    HTML基础

    HTML是什么

    • 超文本标记语言(Hypertext Markup Language,HTML)是一种用于创建网页的标记

      语言

    • 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。根据不同的浏览器,对同一个标签可能又不同的解释(也就是兼容问题)。

    • 网页文件的扩展名:.html或.htm

    HTML的基本结构

    <!DICTYPE html>#声明为HTML5文档
    <html lang="zh-CN">#标记文档的开始 并且设置了语言属性
    <head>#定义了HTML文档的开头部分。head中的内容不会在浏览器的文档窗口显示。
    	<meta charset="UTF-8">#文档的元数据,可以设置如编码格式等数据
        <title>标题</title>#定义了网页标题,在浏览器标题栏显示
    
    </head>#head部分结束
    <body>#body之中的文本是可见的网页主体内容
    
        页面内容   
     
    </body>
    </html>
    

    HTML的标签格式

    标签的书写

    • 双标签  <head></head>
      
    • 单标签  <meta charset="UTF-8">
      

    标签的语法

    • 对于双标签:<标签名 属性1="属性值1" 属性2="属性值2" ......>内容</标签名>
    • 对于但标签:<标签名 属性1="属性值1" 属性2="属性值2" ......>

    几个重要的属性

    • id:定义标签唯一的ID,HTML文档中唯一
    • class:为html元素定义一个或多个类名(classname)(CSS样式类名)
    • style:规定元素的行内样式(CSS样式)

    注释方式

    <!--内容-->
    

    HTML常用标签

    head中的常用标签

    标签 意义
    定义网页标题
    定义内部样式表
    定义JS代码或引入外部JS文件
    引入外部样式表文件或网站图标
    定义网页原信息

    meta标签的用法

    1. http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

      <!--指定文档的编码类型(需要知道)-->
      <meta http-equiv="content-Type" charset=UTF8">
      <!--2秒后跳转到对应的网址,注意引号(了解)-->
      <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
      <!--告诉IE以最高级模式渲染文档(了解)-->
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      
    2. name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

      <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
      <meta name="description" content="老男孩教育Python学院">
      

    body内的常用标签

    基本标签(块级标签和内联标签)

    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>
    
    <p>段落标签</p>
    
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    
    <!--换行-->
    <br>
    
    <!--水平线--><hr>
    

    特殊字符

    内容 对应代码
    空格  
    > >
    < <
    & &
    ¥ ¥
    版权 ©
    注册 ®

    img标签

    <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
    

    a标签

    <a href="http://www.oldboyedu.com" target="_blank" >点我</a>
    

    href属性指定目标网页地址。该地址可以有几种类型:

    • 绝对URL - 指向另一个站点(比如 href="http://www.jd.com
    • 相对URL - 指当前站点中确切的路径(href="index.htm")
    • 锚URL - 指向页面中的锚(href="#top")

    列表

    1. 无序列表

      <ul type="disc">
      
        <li>第一项</li>
      
        <li>第二项</li>
      
      </ul>
      

      type属性:

      • disc(实心圆点,默认值)
      • circle(空心圆圈)
      • square(实心方块)
      • none(无样式)
    2. 有序列表

      <ol type="1" start="2">
         <li>第一项</li>
         <li>第二项</li>
      </ol>
      

      type属性:

      • 1 数字列表,默认值
      • A 大写字母
      • a 小写字母
      • Ⅰ大写罗马
      • ⅰ小写罗马
    3. 标题列表

      <dl>
      
        <dt>标题1</dt>
      
          <dd>内容1</dd>
      
        <dt>标题2</dt>
      
          <dd>内容1</dd>
      
          <dd>内容2</dd>
      
      </dl>
      

    表格

    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>爱好</th>
        </tr>
      </thead>
      <tbody>
         <tr>
           <td>1</td>
            <td>egon</td>
           <td>112</td>
         </tr>
         <tr>
            <td>2</td>
           <td>jojo</td>
                <td>18</td>
          </tr>   
        </tbody>
    </table>
    

    效果图

    属性:

    • border:表格边框
    • cellpadding:内边距
    • cellsapcing:外边距
    • 像素 百分比 (最好通过CSS来设置长宽)
    • rowsapn:单元格竖跨多少行
    • clospan:单元格横跨多少列 (即合并单元格)
  • 相关阅读:
    time 模块学习
    day 14 自定义模块,常用模块 time .datetime ,time 模块
    day 13 课后作业
    day 12 课后作业
    day 11课后作业
    树状数组最值
    hdu 1059 Dividing bitset 多重背包
    XVII Open Cup named after E.V. Pankratiev. XXI Ural Championship
    最长公共子序列板/滚动 N^2
    Uva 10635
  • 原文地址:https://www.cnblogs.com/Sheppard/p/11648676.html
Copyright © 2011-2022 走看看