1.HTML学习

1.HTML学习

(1)文本标记

换行标记:

段落标记:

标题:n的取值1-6,随着数字越大字体越小

字体属性设置(颜色,大小):

字体加粗:

字体斜体设置:

字体带下划线:

字体删除线:

引用(下坐标):

引用(上坐标):

展示一条水平线:


​ . 属性:

​ color:颜色

​ width:宽度

​ size:高度

​ align:对齐方式(center:居中,left:左对齐,right:右对齐)

文本居中:

​ 属性:color(颜色) size(大小),face(字体)

(2)图像标记

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uxZthqmw-1600560810331)(C:%5CUsers%5C6018203135%5CDesktop%5Cimg_wps%E5%9B%BE%E7%89%87.png)]

(3)超链接标记

发邮箱:(前提有邮件工具比如:Foxmail软件)

注意:

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

base 标签

base 可以设置整体链接的打开状态

base 写到 之间

特殊字符标签 (理解)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KSTcZd1I-1600560810333)(C:%5CUsers%5C6018203135%5CDesktop%5Czifu_wps%E5%9B%BE%E7%89%87.png)]

(4)列表标记

无序列表:

    • (列表项)

    • (列表项)

      有序列表:

      1. (列表项1)

      2. (列表项2)

        (5)表格标记

        table:表格(包含行(tr)和表头(th) 名(caption)

        一般表头放在第一行

        1.tr 用于定义表格中的一行,必须嵌套在 table /table标签中,在 table /table中包含几对 tr /tr,就有几行表格。

        2.td /td:用于定义表格中的单元格,必须嵌套在标签中,一对 中包含几对,就表示该行中有多少列(或多少个单元格)。

        注意:1. 中只能嵌套

        2.标签,他就像一个容器,可以容纳所有的元素

        表格属性:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HCdr0OXt-1600560810334)(C:%5CUsers%5C6018203135%5CDesktop%5Ctt_wps%E5%9B%BE%E7%89%87.png)]

        合并单元格

        跨行合并:rowspan 跨列合并:colspan

        合并单元格的思想:

        ​ 将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。

        ​ 公式: 删除的个数 = 合并的个数 - 1

        (6)表单标记

        1.表单在bai网页中主要负责数据采集功du能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

        2.表单标签 :form标签

        用于申明表单,定义采集数据的范围,也就是和里面包含的数据将被提交到服务器或者电子邮件里。

        action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.

        method=get或post指明提交表单的HTTP方法.可能的值为: post:POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get:不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.

        enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"

        TARGET="…"指定提交的结果文档显示的位置: _blank :在一个新的、无名浏览器窗口调入指定的文档; _self :在指向这个目标的元素的相同的框架中调入文档; _parent :把文档调入当前框的直接的父FRAMESET框中;这个值在当前框没有父框时等价于_self; _top :把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架);这个值等价于当前框没有你框时的_self.

        input控件

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1y29Bb48-1600560810336)(C:%5CUsers%5C6018203135%5CDesktop%5Cinput_wps%E5%9B%BE%E7%89%87.png)]

        input 文本框(type=“text”),密码框(type=“password”),单选框 (type=“radio”,如果默认则 checked=“checked”),复选框(type=“checkbox")

        下拉列单:
        <select>
          <option>选项1</option>
          <option>选项2</option>
          <option>选项3</option>
          ...
        </select>
        

        注意:

        1. <select></select>中至少应包含一对<option></option>。
        2. 在option 中定义selected =" selected "时,当前项即为默认选中项。

        默认表单 selected=“selected”

        上传文件:input type=“file"

        textarea控件(文本域)

        如果需要输入大量的信息,就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:

        <textarea cols="每行中的字符数" rows="显示的行数">
          文本内容
        </textarea>
        
        表单域

        在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:

        <form action="url地址" method="提交方式" name="表单名称">
          各种表单控件
        </form>
        

        表单提交方式:

        get:默认方式,表单提交的数据会显示在地址栏,提交数据有大小限制:128k

        post:表单提交的数据不会再地址栏显示,提交的数据无大小限制

        form action="" methon=“post”

        action 属性规定bai当提交表单时,向何处du发送表单数据。

        (7)HTML框架

        frameset标签:基本组成部分是frame,当然frameset是可以嵌套另一个frameset,主要通过frameset将整个网页按照需求分割为多个区域。

        <frameset rows="15%,*" frameborder="no"> <!--<frameborder="no"> 表示去掉分界边框-->
            <frame src="header.html" noresize="noresize"/> <!-- noresize="noresize" 表示不改变各个部分的大小,滚动条不滚动-->
            <frameset cols="12%,*">
                <frame src="menu.html" noresize="noresize"/>
                <frame src="welcome.html" noresize="noresize" name="main"/>
        
            </frameset>
        
        </frameset>
        

        (8)div和span标签:

        div:每一个div占满一整行。块级标签

        span:文本信息(多个span)在一行展示,行内标签 内联标签

        html5新标签与特性

        常用新标签:

        header:定义文档的页眉

        nav:定义导航链接的部分

        footer:定义文档或节的页脚

        article:标签规定独立的自包含内容

        section:定义文档中的节(section、区段)

        aside:定义其所处内容之外的内容

        常用新属性:

        属性******用法****含义****
        placeholder****占位符提供可描述输入字段预期值的提示信息
        autofocus****规定当页面加载时 input 元素应该自动获得焦点
        multiple****多文件上传
        autocomplete****规定表单是否应该启用自动完成功能
        required****必填项
        accesskey****规定激活(使元素获得焦点)元素的快捷键

        新增的type属性值:

        类型****使用示例****含义****
        email****输入邮箱格式
        tel****输入手机号码格式
        url****输入url格式
        number****输入数字格式
        search****搜索框(体现语义化)
        range****自由拖动滑块
        time****
        date****
        datetime****
        month****
        week****

        综合案例

        <form action="">
          <fieldset>
            <legend>学生档案</legend>
            <label for="userName">姓名:</label>
            <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
            <label for="userPhone">手机号码:</label>
            <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
            <label for="email">邮箱地址:</label>
            <input type="email" required name="email" id="email"><br>
            <label for="collage">所属学院:</label>
            <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
            <datalist id="cList">
              <option value="前端与移动开发学院"></option>
              <option value="java学院"></option>
              <option value="c++学院"></option>
            </datalist><br>
            <label for="score">入学成绩:</label>
            <input type="number" max="100" min="0" value="0" id="score"><br>
            <label for="level">基础水平:</label>
            <meter id="level" max="100" min="0" low="59" high="90"></meter><br>
            <label for="inTime">入学日期:</label>
            <input type="date" id="inTime" name="inTime"><br>
            <label for="leaveTime">毕业日期:</label>
            <input type="date" id="leaveTime" name="leaveTime"><br>
            <input type="submit">
          </fieldset>
        </form>
        

        多媒体标签

        embed:标签定义嵌入的内容

        audio:播放音频

        video:播放视频

        多媒体 embed(会使用)

        embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。

        因为兼容性问题,我们这里只讲解 插入网络视频, 后面H5会讲解 audio 和video 视频多媒体

        <embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
        

        多媒体 audio

        HTML5通过标签来解决音频播放的问题。

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ZKHTgeB-1600560810339)(C:%5CUsers%5C6018203135%5CDesktop%5C1498468026526_wps%E5%9B%BE%E7%89%87.png)]

        并且可以通过附加属性可以更友好控制音频的播放,如:

        autoplay 自动播放

        controls 是否显不默认播放控件

        loop 循环播放

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WF7ShVMO-1600560810340)(C:%5CUsers%5C6018203135%5CDesktop%5Cwps%E5%9B%BE%E7%89%87.png)]

        多媒体 video

        HTML5通过标签来解决音频播放的问题。

        同音频播放一样,使用也相当简单,如下图

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wTpDotkV-1600560810340)(C:%5CUsers%5C6018203135%5CDesktop%5C1%E5%9B%BE%E7%89%87.png)]

        同样,通过附加属性可以更友好的控制视频的播放

        autoplay 自动播放

        controls 是否显示默认播放控件

        loop 循环播放

        width 设置播放窗口宽度

        height 设置播放窗口的高度

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-98ypRPko-1600560810342)(C:%5CUsers%5C6018203135%5CDesktop%5C2.png)]

        显不默认播放控件

        loop 循环播放

        [外链图片转存中…(img-WF7ShVMO-1600560810340)]

        多媒体 video

        HTML5通过标签来解决音频播放的问题。

        同音频播放一样,使用也相当简单,如下图

        [外链图片转存中…(img-wTpDotkV-1600560810340)]

        同样,通过附加属性可以更友好的控制视频的播放

        autoplay 自动播放

        controls 是否显示默认播放控件

        loop 循环播放

        width 设置播放窗口宽度

        height 设置播放窗口的高度

        [外链图片转存中…(img-98ypRPko-1600560810342)]

      ©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页