zoukankan      html  css  js  c++  java
  • 前端HTML 与css 整理(未完)

    HTML 中的标签存放于文本文件中 需要按照以下固定的文档结构组织:
    <!DOCTYPE HTML>
    <html>
    <head>
    头部相关信息

    </head>
    <body>
    页面主体相关内容

    </body>
    </html>


    标签解释:
    #1、<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档。

    #2、<html></html> 称为根标签,所有的网页标签都在<html></html>中。

    #3、<head></head> 标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签,头部标签在下一节中会有详细介绍,<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。

    #4、在<body>和</body>标签之间的内容是网页的主要内容,最终会在浏览器中显示出来。

    标签关系:
    并列和嵌套
    并列:head 和body
    嵌套:html内有body

    二 HTML标签详细语法与注意点

    标签的语法:

    <标签名 属性1=“值1” 属性2=“值2” ......>内容部分</标签名>
    <标签名 属性1=“值1” 属性2=“值2” ....../>
    注意:

    #1. HTML标签不区分大小写,`<h1>`和`<H1>`是一样的,但是我们通常建议使用小写,大部分程序员都以小写为准。

    #2. 标签之间是可以嵌套的。例如:<div><p>段落</p></div>,但不能交叉<div><p></div></p>

    #3、不是所有标签都支持互相嵌套。


    三 HTML中标签分类:
    单从是否可以嵌套子标签的角度去分, 标签分为两类
    1:容器类标签(能嵌套其他标签)
    h 系列
    ul>li
    ol>li
    d1>dt+dd
    div

    2文本标签(文本标签 只能嵌套文字、图片超连接标签。
    p
    span
    strong
    em
    ins
    del


    四 head内常用标签
    1 meta 相关
    #1、指定字符集
    <meta charset="gbk">

    #2、页面描述
    <meta name="Description" content="具体描述。。。">

    #3、关键字:有助于搜索引擎SEC优化,再怎么优化也抵不过竞价排名
    <meta name="Keywords" content="网易,邮箱,游戏,新闻">

    #4、3秒后跳转
    <meta http-equiv="refresh" content="3,http://www.baidu.com">
    #5、三秒刷新
    <meta http-equiv="refresh" content="3">

    2:非meta标签
    #1、标题
    <title>百度一下,你就知道</title>

    #2、网站的图标
    <link rel="icon" href="https://www.baidu.com/favicon.ico">

    #3、定义内部样式
    <style></style>

    #4、引入外部样式文件
    <link rel="stylesheet" href="mystyle.css">

    #5、定义JavaScript代码或引入JavaScript文件
    <script src="hello.js"></script> 



    五 body标签
    h 标签
    h1~ h6 标记内容为1~6级标题


    p 标签 标记为内容 的一哥段落



    img标签 标记一哥图片
    用法:<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
    2.1 src指定的图片地址可以是网络地址,也可以是一个本地地址,本地地址可以用绝对或相对路径,但通常用相对路径,相对路径是以html文件当前所在路径为基准进行的

    2.2 图片的格式可以是png、jpg和gif

    2.3 alt="图片加载失败时显示的内容"

    2.4 title = "鼠标悬停到图片上时显示的内容"

    2.5 如果没有指定图片的width和height则按照图片默认的宽高显示,如果指定图片的width和height则可能让图片变形
    那如果又想指定宽度和高度,又不想让图片变形,我们可以只指定宽度和高度的一个值即可
    只要指定了一个值,系统会根据该值计算另外一个值,并且都是等比拉伸的,图片将不会变形



    a标签
    标记一哥内容为超链接
    #1、超链接标签是超文本文件的精髓,可以控制页面与页面之间的跳转,语法如下
    <a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>


    #2、注意:
    2.1 a标签不仅可以标记文字,也可以标记图片
    <a href="https://www.baidu.com"><img src="mv.png" />百度一下,你就知道</a>

    2.2 a标签必须有href属性,href的值必须是http://或https://开头

    2.3 a标签还可以跳转到自己的页面
    <a href="template/aaa.html">锤你胸口</a>

    2.4 target="_blank"代表在新页面中打开,其余的值均无需记忆,
    如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置
    <base target="_blank">
    如果a标签自己设置了target,那么就以自己的为准,否则就会参照base的设置

    2.5 title="鼠标悬浮显示的内容


    列表标签
    语义 标记一堆数据是一个整体列表
    HTML分三种
    1 无序列表ul>li 列表标签中使用最多的一种非常重要
    2 有序列表 极少用 ol>li
    3 自定义列表 经常用
    <dl>
    <dt>自定义标题1<dt>
    <dd>描述1<dd>
    <dd>描述2<dd>
    <dd>描述3<dd>
    </d1>


    <table>标签
    语义:标记一段数据为表格
    #1、作用
    表格标签是一种数据的展现形式,当数据量非常大的时候,使用表格的形式来展示被认为是最清晰的

    #2、格式
    <table>
    <tr>
    <td></td>
    </tr>
    </table>

    tr代表表格的一行数据
    td表一行中的一个单元格

    #3、注意点:
    表格标签有一个边框属性,这个属性决定了边框的宽度。默认情况下这个属性的值为0,所以看不到边框


    form 标签
    语义标记表单
    #1、什么是表单?
    表单就是专门用来接收用户输入或采集用户信息的

    #2、表单的格式
    <form>
    <表单元素>
    </form>
  • 相关阅读:
    Using System Partitioning
    startup命令
    [转]Oracle 10g/11g 密码策略 用户口令 大小写敏感
    [转]Oracle DB 加强的数据安全管理
    Scheduling Jobs with Oracle Scheduler
    [转]Oracle DB SQL 计划管理
    Performing Time-Based or Change-Based Incomplete Recovery
    闪回数据归档
    Managing Optimizer Statistics
    性能测试--十个命令迅速发现性能问题
  • 原文地址:https://www.cnblogs.com/lx3822/p/9163803.html
Copyright © 2011-2022 走看看