zoukankan      html  css  js  c++  java

  • HTML基础知识

    一、什么是HTML

    HTML：超文本标记语言
    超文本：指页面内容包括图片，链接，视频等非文本信息。
    标记语言：指标记（标签）构成的语言。

    二、静态网页和动态网页的区别，z

    静态网页和动态网页区分的一个很重要的指标就是：程序是否在服务端运行。在服务端运行的程序，网页都是动态的，反之是静态的.也就是说，直接运行在客户端的网页，程序都是静态网页
    静态网页

    1、静态网页是放在服务器上的不能随便修改，想要修改静态页面必须修改页面后覆盖在服务器上的才可以。
2、静态页面通常都有一个固定的URL，在服务器上都有一个对应的文件。常以html, htm结尾，不含？
3、静态页面无法连接数据库
4、现在的页面很多都使用了js,导致浏览器打开页面时候就占用了大量的内存，服务器是没有压力但是压力转移到客户端。

    动态网页

    1、动态页面一般是根据服务器生成的，不同的人访问相同的页面显示的内容是不一样的。
2、动态页面的功能更加丰富，可以实现用户的登录，注册，交互等
3、 动态页面以数据库为基础

    三、标签

    由于历史的原因，不同浏览器的渲染方式各不相同，甚至相同浏览器的不同版本都不一样，所以就会出现很多兼容性的问题。出现这种现象的原因就是缺乏一个统一的标准，后面W3C标准应运而生，后面的浏览器就都按这标准去渲染。但是历史遗留问题依旧存在，就是很多电脑装的都是老的浏览器版本，为了保证老浏览器能正常渲染这些新的网页，所以这就必须在网页中声名渲染方式。
后面新的网页只要写上<!DOCTYPE html>标签就是按标准方式去渲染。

    四、head标签

    meta标签

    meta标签有两个属性，http-eqiv和name
    1、name主要是声名一些网页的相关介绍，和seo ，访客查看。

        <meta name="keywords" content="深圳大学，深大，深圳继续教育学院">
    <meta name="description" content="深圳大学梦开始的地方">

    2、http-eqiv http文件头，传递一些有用的信息帮助浏览器更好的渲染页面。

    <meta http-equiv="Refresh" content="2;https://www.baidu.com">

    非meta标签

    #五、body标签 ##基本标签 ``` n为1-6表示标题

    段落标签 ,加粗标签 表示斜体 在文字中间加一条删除线 上下角标
    换行

    水平线
    不进行任何操作，一个是块元素，一个是内联元素 ``` ##块标签和内联标签 1.块标签的特点： + 每个块标签都独占一行 + 默认宽度是整个屏幕，除非自己设置width + 块标签内可以包含内联标签和块标签 `常见的块标签有：

    ,

    ,
    ,
      ,
        ,,`

        2.内联标签的特点：

        • 内联元素不独占一行，可以和后面的内联元素并排显示
        • 宽度就是它本身文字或图片的宽度，不可设置
        • 内联元素只能容纳文字或者其他内联元素
          常见的内联标签有：<b>,<a>,<img>,<strong>,<span>

        特殊符号

        &lg;&gt;&copy;&reg;&quot;
        ≶>©®

        <img>图片标签

        src :图片的路径
alt : 当图片加载不出来时，显示的内容
title: 鼠标悬浮在上面时显示的内容
宽度
height:高度

        超链接标签（锚标签）a

        href:加要跳转的路径，也可为本页面的某个标签
target:_blank 在新的窗口中打开新页面
<a href="#abc">回到顶部</a>
<a href="https://www.baidu.com" target="_blank">百度一下</a>

        六、列表标签

        有序列表：
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
无序列表：
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
自定义列表：
<dl>
    <dt>标题</dt>
    <dd>内容一</dd>
    <dd>内容二</dd>
    <dd>内容三</dd>
</dl>

        七、表单

        1、表单属性

        表单用于接受用户的输入，并将数据发送到服务器处理。
        action:指明将表单提交到哪
        method:指明提交的方式，也有两种提交方式，get,post 默认是使用 get

        • get:提交键值对，数据存储在访问的链接后面，安全性相对差，而且传输的数据量有限
        • post：提交的内容不放在地址栏，安全性高，传输的内容大小没太大限制。

        input标签

        type属性：

        • text:文本框
        • password 密码框
        • button 按键
        • reset 重置
        • submit 提交
        • checkbox 多选框
        • radio 单选框
        • file 文件
          name 属性：表单提交时候的键
          values 属性：表单提交时候的值
          checked: radio和CheckBox默认被选中
          readonly：只读
          disabled:对所有input都好使

        select标签

        name：表单提交时候的键
size：显示的个数
option：下拉框中的每个选项，value 值，selected 默认选中

        textarea 标签

        name:键
rows:行数
cols:列数

        简单示例：

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息表</title>
    <style>
        #div1{
             250px;
            height: 350px;
            border: 2px solid green;
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -125px;
            margin-top: -175px;
            align-self:center;

        }
        #div2{
             220px;
            height:300px;
            position: relative;
            left:20px;
        }
        #p1{
            position: relative;
            left: 50px;
        }
    </style>
</head>
<body>
<div id = 'div1'>
    <div2 id = 'div2'>
        <form action="#">
    <p>姓名：<input type="text"></p>
    <p>男<input type="radio" name="gender" checked> 女<input type="radio" name="gender"></p>
    <p>
        爱好: 唱歌<input type="checkbox" name="hobbit">
        喝酒 <input type="checkbox" name="hobbit">
        烫头 <input type="checkbox"name="hobbit">
    </p>
    <p>
        居住城市：
        <select name="city" id="abc">
            <option value="sz">深圳</option>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
        </select>
    </p>
    简介:<textarea name="description" id="aaa" cols="30" rows="5"></textarea>
    <p id = 'p1'><input type="reset"> <input type="submit"></p>



</form>
    </div2>

</div>
</body>
</html>

        运行结果

      1. 相关阅读:
        《.Net之美》样章 1.1 理解泛型(转载)
        jQuery&JSON~~
        TreeView绑定XML
        TreeView 的 CheckBox 被点击时的引发页面回发事件
        开发中巧用Enum枚举类型
        今天开始学习Python
        获取天气预报
        ORACLE数据库备份
        Eclipse配置Tomcat
        ORACLE常见错误及解决办法
      2. 原文地址：https://www.cnblogs.com/linshuhui/p/9753325.html
        3. Copyright © 2011-2022 走看看