zoukankan      html  css  js  c++  java
  • html--基础知识

    HTML介绍

    Web服务本质:是一个socket 链接发送消息的过程,浏览器输入网址发生了什么:
    浏览器给服务端发送请求-->服务端接收请求并返回响应-->服务端把html文件内容发送给浏览器-->浏览器展示页面

    编程三部分组成:是一个使用(展示)数据,存储数据,处理数据发过程

    HTML是什么?

    超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。是一个标准,规定大家怎么写网页
    本质是浏览器可识别的规则
    网页文件的扩展名:.html或.htm
    学习HTML:学习写标签的过程

    一、标签分类:
    单标签和双标标签,
    内联(行内)标签:a,img,u,s,i,b,span,默认浏览器宽度,可修改
    块级标签:h1-h6,div,p,hr,不可设置宽度
    注:
    标签规则:
    1. 行内标签不能嵌套块级标签
    2. p标签不能嵌套块级标签
    3.块级元素可以包含内联元素或某些块级元素
    
    
    二、HTML文档结构:
    <!DOCTYPE html>   声明文件类型
    <html lang="zh-CN">     文档开始标记   字体类型:中文
    <head>  文档开头 内容不会在浏览器的文档窗口显示
      <meta charset="UTF-8">   编码类型
      <title>css样式优先级</title>  网页标题
    </head>   尾
    <body>  网页主体 开始
    ····填写内容
    </body>  网页主体结尾
    </html>     文档结尾标记
    注:有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">
    HTML标签格式:尖括号、大部分成对出现、也有单独出现
    三、标签的语法:
    <标签名 属性1='属性值' 属性2='属性值'>内容部分</标签名>
    <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
    注:
    几个很重要的属性:
    id 定义标签唯一id,
    class 给元素定义多个类名(css样式名)
    style 规定元素的行内样式(CSS样式)
    HTML注释:<!--注释内容-->
    四、HTML常用标签
    1.head内常用标签:
    <title></title>  定义网页标题
    <style></sstyle> 定义内部样式表
    <script></script>  定义js代码或者印日外部js文件
    <link></link>  引入外部样式表文件<meta></meta> 定义网页元数据
    2. meta标签
    http-equiv属性:相当于HTTP文件头作用,向浏览器传出一些有用的信息,内涵属性content,content  中的内容是真正参数变量值
    <!--2秒跳转到指定网址-->
    <meta http-equiv='refresh' content='2;URL=https://www.oldboyedu.com'>   
    name属性: 主要用于描述网页,content属性,content中的内容主要是便于搜索引擎机器人查找信息和分类信息。
    3. body内常用标签
    3.1 基本标签(块级标签和内联标签)
    <u>下划线</u>
    <b>加粗</b>
    <i>斜体</i>
    <s>删除</s>
    <p>段落标签</p>
    
    <!--字体越来越小-->
    <h1><h1>
    <h2><h2>
    <h3><h3>
    <h4><h4>
    <h5><h5>
    <h6><h6>
    
    换行
    <br>
    水平线
    <hr>
    3.2 特殊字符
    特殊字符
    内容  对应代码
    空格 &nbsp
    >    &gt
    <    &lt
    &    &map
    ¥    &yen
    ®    &reg   注册
    ©    &copy  版权
    应用:
    <div>2&gt1,3&lt2,海&nbsp&nbsp燕,商标&copy,注册&reg,&yen&amp</div>
    3.3 div标签和span标签
    相同点:均主要通过css样式为其赋予不同的表现
    区别:
    div定义块级元素
    span 定义内联元素
    3.4img标签(图片)
    <img src='图片路径',alt='图片加载失败给的提示' title='鼠标悬浮时提示信息' width='宽',high='长'(宽高两个属性只用一个会自动等比缩放) >
    eg:
    <img src="psb.jpg" alt="加载失败" tilte="brother" width="100">

     3.5 a标签 超链接标签

    可链接内容:图片,网址,相同网页的不同位置,地址,应用程序
    <a href='网址' target='_blank'(跳转不同的页面打开,不写默认当前页面打开)>点我</a>
    eg:
    <a href="psb.jpg" target="_blank" >点我</a>
    五、url 网页地址  统一资源定位器
    URL地址由4部分组成
    第1部分:为协议:http://、ftp://等 
    第2部分:为站点地址:可以是域名或IP地址
    第3部分:为页面在站点中的目录:stu
    第4部分:为页面名称,例如 index.html
    各部分之间用“/”符号隔开。
    
    href属性指定目标网页地址。该地址可以有几种类型:
    
    绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
    相对URL - 指当前站点中确切的路径(href="index.htm")
    锚URL - 指向页面中的锚(href="#top")
    

    六、列表

    6.1 无序列表

    <ul type="disc">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    type属性:
    disc(实心圆点,默认值)
    circle(空心圆圈)
    square(实心方块)
    none(无样式)
    6.2 有序列表
    <ol type="1" start="2">
      <li>aaa</li>
      <li>bbb</li>
    </ol> 
    6.3 标题列表
    <d1>
        <dt>标题1</dt>
        <dd>内容1</dd>
        <dt>标题2</dt>
        <dd>内容2</dd>
    </dl>
    

     七、.表格 二维数据空间

    7.1 表格的基本结构:

    <!--列表-->
    <table border="10" cellpadding="10" cellspacing="10">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>爱好</th>
        </tr>
    </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>zzy</td>
            <td rowspan="2">美食</td>
        </tr>
            <tr>
            <td>2</td>
            <td>zxc</td>
    
        </tr>
            </tr>
            <tr>
            <td >3</td>
            <td colspan="2">ly</td>
    
        </tr>
        </tbody>
    </table>
    

    7.2 表格属性:

    表格属性:
    border: 表格边框. border:边境
    cellpadding: 内边距
    cellspacing: 外边距.
     像素 百分比.(最好通过css来设置长宽)
    rowspan: 单元格竖跨多少行
    colspan: 单元格横跨多少列(即合并单元格)
    

      

  • 相关阅读:
    内存
    TCP/IP
    安装
    linux常用命令
    linux文本处理三剑客之 grep
    tail命令:显示文件结尾的内容
    less命令:查看文件内容
    head命令:显示文件开头内容
    改进Zhang Suen细化算法的C#实现
    【转】在VS2010上使用C#调用非托管C++生成的DLL文件(图文讲解)
  • 原文地址:https://www.cnblogs.com/zzy-9318/p/8511289.html
Copyright © 2011-2022 走看看