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

    学习推荐地址w3school

    一、HTML页面结构

    1、前端

    前端开始中最基本的也是最必须的三个技能,前端的开发中,在页面的布局时:

    • HTML:页面结构,可以把他看成一个文档,定于展示页面的内容结构
    • CSS:页面表现,元素的大小、颜色、位置、隐藏或显示、部分动画效果
    • JavaScript:页面行为,部分动画效果,页面与用户的交互,页面功能

    2、HTML历史

    HTML:超文本标记语言,是网页制作必备的编程语言,超文本就是指页面可以包含图片,连接,甚至音乐,程序等非文字元素

    • HTML2.0:是1996年由internet工程工作小组的HTML工作小组开发的
    • HTML3.2:作为W3C标准发布于1997年1月14日,HTML3.2向HTML2.0标准添加了被广泛运用的特性,如:字体、表格、appies、围绕图像的文本流、上标和下标
    • HTML4.0:被发布1997年12月18日,而仅仅进行了一些编辑修正的第二版本发布于1998年4月24日。HTML4.0最重要的特性是引入了样式表(CSS)
    • HTML4.01:发布于1999年12月24日(微小改进)
    • XHTML1.0:发布于2000年1月20日,使用XML对HTML4.01进行了重新的表示
    • HTML5:,W3C于2014年1月22日发布工作草案

    3、HTML的页面结构

    超文本编辑语言的结构包括:头部(head)、和主体(boby),其中头部提供关于网页的信息,主体提供网页的具体结构

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <!--头部信息,不会在页面显示-->
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--主体部分 页面中显示内容-->
        <h1>第一个网页页面</h1>
    </body>
    </html>
    

    1. 文档声明

    • HTML5:

    2. 页面头部

    • 第二行和最后一行组成的html标签对,定义html文档的整体
    • head和boby标签对是它的第一次子元素
    • head标签对:标签里负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和js文件,设置的内容不会显示在网页上,标题的内容会显示在标题栏

    3. 页面内容

    • body标签对:元素定义文档的主体,就是页面显示的内容
    • body元素包含文档的所有内容(文本、超链接、图像、列表、表格等)

    二、常见的HTML标签

    1、注释:<!-- -->

    • 注释标签用于源代码中插入注释、注释不会显示在游览器中
    • 代码中合理使用注释有助于以后的时间对代码编辑

    2、标题标签:

    • <h1>-<h6>标签对定义
      • h1 定义最大的标题
      • h6 定义最小的标题
    • 由于h元素拥有确切的语义,因此请慎重的选择恰当的标签层级来构建文档结构,因此请不要用比标题标签来改变同一行的字体大小
    <!--标题标签-->
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>
    

    3、段落和换行标签

    • <p></p>: p标签定义段落,元素会自动在其前后创建一些空白,游览器会自动添加这些空间,也可以在样式中规定
      • &nbsp; :段落中空格可以加入这个来增加段落的空格,一般不推荐使用,在样式控制格式
    • <hr> : hr标签在HTML页面中创建一条水平线,水平分割线可以在视觉上将文档分割成各个部分
    • <br> :换行标签
    <hr>
    <p>这个是段落标签 &nbsp;&nbsp;段落<br>标签</p>
    <hr>
    

    4、块标签

    • <div></div>: div标签块元素,表示一块内容,没有具体的语义,可以把页面内容分成一个个结构块
    • <span></span>: 行内元素,表示一行中的一小段内容,没有具体的语义,如果行内部分内容需要渲染时,可以用sapn标签分成一小块一小块的去渲染
    <div >块标签,没有具体语义,</div>
    <div>将结构分成一块一块的</div>
    <p>这里是正常颜色<span style="color:red" >python是红色</span>
    <span>java</span></p>
    

    5、含样式和语义的行内标签

    标签 含义
    <i></i> 行内元素,字体为斜体
    <em></em> 行内元素,语义为强调内容,表示重要,效果斜体
    <b></b> 行内元素,字体加粗
    <strong></strong> 行内元素,语义强调,表示非常重要,效果字体加粗
    <i>字体是斜体</i><br>
    <em>语义为强调,表示重要,效果斜体</em><br>
    <b>粗体字</b>
    <strong>语义强调,表示非常重要,效果字体加粗</strong>
    

    6、图像标签和链接标签

    图片标签:<img src=" alt="">:

    • img元素是向网页中嵌入一个图像
    • 请注意,从技术上讲,img标签并不会在网页中插入图像,img变迁创建的是被引用图像的占位空间
    • 属性
      • src:图片地址
      • alt:规定在图像无法显示时的替代文本

    链接标签:<a href=""></a>

    • 定义超链接,用于从一张页面链接到另一张页面
    • 属性
      • href :连连接的地址
      • a标签中间的文本为连接说明和点击跳转的入口

    样式链接:<link rel="stylesheet" type="text/css" href="theme.css">

    • 表示连接到一个外部样式,用在头部中
    • 属性
      • rel :规定当前文档与被链接文档之间的关系。
      • type :规定被链接文档的 MIME 类型。
      • href :规定被链接文档的位置。
    <img src="img/bd_logo1.png" alt="百度首页" width="200" height="100">
    <img src="img/bd_logo12222.png" alt="百度首页"><br>
    <a href="http://www.baidu.com">百度一下</a>
    
    <head>
        <link rel="stylesheet" type="text/css" href="">
    </head>
    

    7、列表

    有序列表: <ol></ol>

    • <li></li> :表示列表的一列数据
    • li标签文字部分表示列表的内容
    • 有序表示列表有顺序1,2,3,4,5
    <ol>
        <li>列表一</li>
        <li>列表一</li>
        <li>列表一</li>
        <li>列表一</li>
        <li>列表一</li>
    </ol>
    

    无序列表:<ul></ul>

    • <li></li> :表示列表的一列数据
    • li标签文字部分表示列表的内容
    • 无需表示,列表没有顺序,小黑点表示
    <ul>
        <li>无序一</li>
        <li>无序一</li>
        <li>无序一</li>
        <li>无序一</li>
        <li>无序一</li>
    </ul>
    

    8、表格

    表格标签:<table border="1"></table>

    • 简单的html表格由table元素以及一个或者多个tr、th、td标签组成
      • <th></th>:表示表格的表头
      • <tr></tr>:表示表格的行
      • <td></td>:表示表格的列
    <!--border="1" 表示表格的线条粗细-->
    <table border="5">
        <!--定义一行表头-->
        <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        </tr>
        <!--定义两行-->
        <tr>
            <!--定义列和定义单元格内容-->
            <td>小明</td>
            <td>18</td>
            <td>男</td>
        </tr>
    
        <tr>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
        </tr>
    </table>
    

    三、HTML表单

    1、表单标签:form

    <form action="url" method="get/post"></form>

    • action="url" :规定当提交表单时向何处发送表单数据,接口地址。
    • method="get/post":规定用于发送表单数据的 HTTP 方法。
    • form表单中包含的元素标签
    元素标签 作用
    <label></label> 中间写入文本,为表单元素定义文字标注
    <input> 定义通用的表单元素
    <textarea></textarea> 定义多行文本输入框
    <slect></select> 定义下拉表单元素
    <option></option> 定于下拉表单中的元素选项,配合select标签使用

    2、input标签的属性

    • value属性: 定义表单元素的值,表单提交的value值,和name属性的key对应
    • name属性: 定于表单元素的名称,此名称是提交数据时的键命(接口请求参数的名称)
    • placeholder属性: 帮助用户填写输入字段的提示
    <!--name、value、placeholder属性示例-->
    <form action="" method="get">
        <!--帐号密码输入框-->
        <label for="username">帐号:</label>
        <input type="text" name="username" id="username" placeholder="请输入帐号"><br>
        <label for="pwd">密码:</label>
        <input type="password" id="pwd" name="pwd" placeholder="请输入密码"><br>
        <label>性别:</label>
        <input type="radio" name="gender" value="男"> 男
        <input type="radio" name="gender" value="女">女
        <br>
        <input type="submit" value="登陆">
        
    </form>
    
    • type属性
    作用
    text 定义单行文本输入框
    password 定义密码输入框
    radio 定义单选框
    checkbox 定义复选框
    file 定义上传文件
    submit 定义提交按钮
    button 定义一个普通按钮
    reset 定义重置按钮
    image 定义图片作为提交按钮,用src属性定义图片地址
    hidden 定义一个因此的表单域,用来存储值

    3、label标签

    • 为表单元素定义标注
    • label元素不会向用户呈现任何特殊效果,不过,它为鼠标用户改进了可用性,如果您在label元素内点击本,就会触发此控件,就是说当用户通过点击label标签时,游览器会自动化将焦点转到和标签相关的表单控件上
    • label标签的for属性和哪个表单的id相同,就表示和哪个表单关联

    4、textarea标签

    • textarea标签定义多行的文本输入控件
    • 本文本区中容纳无线数据的文本,其中的文本的默认字体是等宽字体(通常是Courier)
    • 可以通过cols和rows实行来规定textarea的尺寸,更好的办法是使用CSS的height和width属性来控制
    <!--多行输入框-->
    <label for="text">文本说明</label>
    <textarea name="text" id="text" cols="10" rows="2" placeholder="输入需要说明的文本">
    </textarea><br>
    
    • textarea的属性
    属性 描述
    autofocus autofocus 规定在页面加载后文本区域自动获得焦点。
    cols number 规定文本区内的可见宽度。
    disabled disabled 规定禁用该文本区。
    form form_id 规定文本区域所属的一个或多个表单。
    maxlength number 规定文本区域的最大字符数。
    name name_of_textarea 规定文本区的名称。
    placeholder text 规定描述文本区域预期值的简短提示。
    readonly readonly 规定文本区为只读。
    required required 规定文本区域是必填的。
    rows number 规定文本区内的可见行数。
    wrap hard soft 规定当在表单中提交时,文本区域中的文本如何换行。

    5、select标签

    • slelct元素可以撞见单选或者多选下拉菜单,也可以用于选择数据提交表单
    • select标签中的option标签用于定义列表中的可用选项
    <!--下拉框-->
    <select name="fruit">
        <option value="苹果" >苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="西瓜">西瓜</option>
    </select>
    

    6、select标签

    • option元素定义一个下拉框中的一个选项
    • 游览器将option标签中的内容作为select标签的菜单或者是滚动列表中的一个元素显示
    • option标签位于select标签内部

    四、内联框架

    1、iframe

    • iframe元素会创建包含另外一个文档的内联框架

    例子:将百度页面链接到当前页面

    <!--内联框架-->
    <iframe src="http://www.baidu.com"  height="1000" width="2000"></iframe>
    

    五、HTML元素分类

    元素就是标签,布局中常见的又三种标签

    • 块标签
    • 内联标签
    • 内联块标签

    1、块标签

    块标签也可以成为行标签,布局中常用的标签如:div、p、ul、li、h1-h6、dl、dt、dd等都是块标签,它在布局的行为:

    • 支持全部的样式
    • 如果没有设置宽度,默认的宽度是父级宽度的100%
    • 盒子占据一行,几十设置了宽度

    2、内联标签

    内联标签,也可以成为行内标签,布局中常用的标签如:a、apan、em、b、strong、i等内联标签,他们布局中的行为

    • 支持部分样式(不支持宽、高、margin上下、padding上下)
    • 宽高由内容决定
    • 盒子并在一行
    • 代码换行、盒子之间产生间距
    • 子元素是内联元素,父元素可以用text-align设置子元素水平对齐方式

    3、内联块标签

    内联块标签,也叫行内块标签,是新增的元素类型、现有的元素没有归于此类别的,lmg个input标签的行为类似这种元素,但是也归于内联标签,我们可以通过用display属性将块标签或者内联标签转化成这种标签,他们在布局中的行为:

    • 支持全局样式
    • 盒子并在一行
    • 代码换行,盒子产生间距
    • 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式

    display属性是永凯色织元素的类型及隐藏的

    • none 元素隐藏不占用位置
    • block 元素以块元素显示
    • inline 元素以内联元素显示
    • inline-block 元素以内联块元素显示

    总结

    • 这种元素,可以通过display属性随便转换
    • 在实际开发中块元素用的较多,所以我们经常把内联元素转成块元素,少量的转换成内联块,
    • 而使用内联元素时,直接使用内联元素,而不用块元素转换
  • 相关阅读:
    背景图片填充问题
    a:hover 等伪类选择器
    jQuery中animate()方法用法实例
    响应式框架Bootstrap
    HTTP入门
    jQuery选择器
    httplib urllib urllib2 pycurl 比较
    校招
    JAVA描述的简单ORM框架
    Roman to Integer
  • 原文地址:https://www.cnblogs.com/jiangmingbai/p/10994319.html
Copyright © 2011-2022 走看看