• HTML笔记


    HTML部分:

    Html:标签语言,间隔用空格不用,或; 

    所有都是用标签操作<XXX></ XXX >
    从<XXX>开始,到<XXX>结束,有些标签直接在开始标签内结束,如<hr/>,<br/>
    设置属性时,属性值必须加””

    Html操作思想:当要实现不同效果的文字或图片时,用不同的标签将各自的文字或图片包起来,在通过修改标签内的属性值来实现改变样式的效果。

    一、常用标签:

    <head>:包含网页文档信息,浏览器不会向用户显示这些头部信息("head information")。下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>。 
    <html>:html网页标签,包含所有标签
    <title>:标题栏
    <hr/>:水平线
    <br/>:换行符
    <h?>:?在范围1-6之间,设置一个可变大小标题,同时会自动换行
    <body>: body 元素定义文档的主体。其中包含文档的所有内容(比如文本、图像、颜色、图形等等)。



    二、文字标签和注释标签:


    <font>:文字标签,规定文本的字体外观、字体尺寸和字体颜色。
                属性:

                        size:设置文字大小(1-7),默认大小为7
                        color:设置文字颜色,可用color=”red”,或color=”#9900cc”(十六进制表示颜色法)


    <!-- …-->:注释标签,可在…部分添加注释




    三、水平线标签和特殊字符


    </hr>:水平线标签。
    属性:

                 size:设置线的粗细(1-7),默认大小为7
                 Color;设置线的颜色,同样俩种表示法:


    特殊字符:当在网页上显示以下内容时:<html>是网页标签
    要使用转义字符将<html>里的格式:<字符代码>转换为字符形式。
                  < 字符使用<%lt>;
                  >字符使用<&gt>;
     
    当显示多个空格时,同样需要转义字符:&nbsp;





    四、列表标签
    1、普通列表标签
    比如要显示以下效果:
                     武汉生物工程学院
                              教务处
                              财务处
                              学管处
    通过<dl>,<dt>,<dd>三个标签实现
                                        <dl>:表示列表的范围
                                         在<dl>里面<dt>: 设置列表标题
                                         在<dl>里面<dd>:设置列表内容


    2、有序列表标签
                              1.教务处
                              2.财务处
                              3.学管处
    使用<ol>和<li>
                              <ol>:表示列表范围       属性:type,可设置为,”1”(默认),”a”,”i”。
                              <li>:表示列表内容


    3、符号列表标签
    使用<ul>和<li>
                              <ul>表示符号列表范围    属性:type,可设置为实心圆(disc)(默认),空心圆(circle),实心方块(square)。
                              <li>:表示列表内容


    五、图像标签(重点)


    <img src=”图片的路径”/>
                 属性
                              src:图片的路径
                              图片的宽度
                              height:图片的高度
                              alt:鼠标停留片刻后图片上显示文字,有些浏览器不支持,较少使用

    六、路径(默认目录为当前项目目录)

    绝对路径:从其它地方获取信息的路径
                   如: C:Users13928DesktopQt素材图片1.png、
                   https://www.baidu.com/b.jpg

    相对路径:从当前项目目录获取信息的路径
                   如:b.jpg
                   因为默认目录为当前项目目录,表示下层目录:文件夹名/b.jpg即可
                   表示上层目录:  ../b.jpg


    七、超链接标签
    1、链接资源


    <a href=”链接到的路径”>显示在页面上的内容</a>
                   属性
                              href:链接到的路径,必须以/开头,是相对路径

                              target:打开方式,在新窗口打开(_blank),在当前页打开(_self)(默认)当超链接不需要链接到某些资源时,设置路径

                              为#即可,如不设置路径,会打开项目路径。即<a href=”#”>这个链接不链接任何资源</a>
     


     2、定位资源(注意:位置名称可随意设置,如top等)
                              定义一个位置: <a name=”位置名称”>顶部</a>
                              回到位置:<a href=”#位置名称”>回到顶部</a>


    3、原样输出标签:使用<pre>标签,写什么样输出什么样。
                              Public static void main(String agrs[]){
                                            System.out.println(“Hello”);
                              }
     
    八、表格标签
    1、基本标签
    <table>:表示表格范围
                 属性:
                              border:表格线的粗细
                              cellspacing:单元格之间距离(为0时级没有距离,重合为一条线)
                              表格宽度
                              height:表格高度
                              bordercolor:表格外围线颜色


    <tr>:表示一个元组范围(一行数据(记录)范围)
                 属性:
                              align:元组里的对齐方式 left center right


    <td>:表示元组范围里的单元格
                 属性:
                              align:单元格里的对齐方式left center right


    <th>也同样可以表示单元格,与<td>不同:<th>自动设置了居中和加粗


    <caption>:表格标题标签,在<table>和<tr>之间使用


    2、合并单元格
    跨行合并单元格:rowspan
    跨列合并单元格:colspan
    使用方式:在合并后的单元格属性rowspan或colspan里设置合并的行数或烈数


    如:

    <table border="1" cellspacing="0" width="400" height="150">
    <caption>人员信息</caption>
    <tr align="center">
    <td>名字</td>
    <td>性别</td>
    <td>武力值</td>
    </tr>
    
    
    <tr align="center">
    <td>关羽</td>
    <td>男</td>
    <td>98</td>
    </tr>
    
    
    <tr align="center">
    <td>貂蝉</td>
    <td>女</td>
    <td>20</td>
    </tr>
    </table>
    



    九、表单标签(重中之重)
    <form>:包含表单的范围
                 属性:
                              action:输入项数据提交到的页面路径,默认为提交到当前页面
                              method:表单提交方式,get(默认),post
                              enctype:一般不需要这个属性,在文件上传时需要使用


    面试题目:get和post区别?
    get会在地址栏显示提交信息,post不会显示提交信息,信息在请求体里。
    get安全性低,post安全性高.
    get有数据大小限制,post没有




    输入项:可以输入或选择内容的部分
    输入项的注意事项:
                              ***绝大部分输入项使用<input type=”输入项的类型” />
                              ***输入项必须设置一个name属性,才能获得数据,提交至服务器


    文本输入:<input type=”text”/>
    密码输入:<input type=”password”/>
    单选框输入<input type=”radio” name=”属性名称”  value="">
    复选框输入<input type=”checkbox” name=”属性名称” value=""/>
    文件输入<input type="file"/>
    隐藏项<input type=”hidden”>不会在页面显示,但存在于html代码中

    单选框和复选框使用的注意事项:
                              1、 必须要有name属性

                              2、name属性值必须相同

                              3、必须要有value属性

                              4、实现默认选中使用checked属性:checked=”checked”


    下拉选择(不属于input)

    <select name=”birth”>
    <option value=”1”>请选择</option>
    <option value=”1996”>1996</option>
    <option value=” 1997”>1997</option>
    <option value=” 1998”>1998</option>
    </select>


                   1、 value属性用来设置提交的数据值,与显示内容应该一致
                   2、 实现默认选中使用selected属性:selected=”selected”
    文本框<textarea>
                 属性:
                              rows:文本框的行
                              cols:文本框的列
    提交按钮<input type=”submit”/>
                 属性
                              value:设置按钮上显示内容


    提交时的数据小结: 

    如:
                 file:///E:/code/Html/Label.html?phone=22&password=22&sex=woman&sports=run&birth=1996
                 file:///E:/code/Html/Label.html?phone=%3D%22post%22&password=%3D%22post%22&sex=woman


    显然输入项的提交通过标签里的name属性value属性完成
              name对应的数据类型名 values对应的数据值
              提交的页面可通过<form>里的action属性修改
     


    使用图片提交效果:
                 <input type=”image”,src=”图片地址”/>


    重置按钮:将表单重置为初始化状态
                 <input type="reset"/>


    普通按钮:就一个普通按钮,无任何操作
                 <input type="button" value="">


    十、其它常用标签的使用


    <b>:加粗
    <s>:删除线
    <u>:下划线
    <i>:斜体


    <sub>:下标
    <sup>:上标


    <pre>:原样输出


    <p>:段落标签,比<br/>标签在结尾多换一行


    在css里经常使用
    <div>:所有<div>里内容自动换行
    <span>:所有<span>里内容缩在一行
     

    十一、头标签的使用
    <html>里包含了<head>和<body>,<head>就是头标签,用来设置页面的属性


                 <title>:设置标签上显示内容
                 <meta>:设置页面相关内容


                 //早期搜索引擎根据content里的内容显示搜索网页
                 <meta name="keywords" content="页面介绍内容">


                 几秒后转向其它页面功能实现:
                 <meta http-equiv="refresh" content="5,url=register.html"/> //其中5为几秒后刷新,url为转到的页面地址

                 <base>:设置超链接的基本设置
                 统一设置超链接打开一个新窗口方式:<base target="_blank"/>

                 <link>:引入外部文件

  • 相关阅读:
    Swoole实战之手撸HttpServer框架 16 关于服务的平滑重启与热加载与cli_set_process_title函数的使用、添加前置进程、修改代码服务器自动热更新
    Swoole实战之手撸HttpServer框架 17 里程碑 整合前置进程、热更新、Ioc容器
    axios取消请求
    echarts使用transform缩放后导致图标模糊
    vuex4的简单使用
    Vite 按需引入 Ant Design Vue 3.0
    TS声明promise返回来的数据类型
    JavaScript一种新的数据结构类型Map
    CF1453D Checkpoints(期望)
    PLOP: Learning without Forgetting for Continual Semantic Segmentation论文阅读笔记
  • 原文地址:https://www.cnblogs.com/MrQlyn/p/10236353.html
Copyright © 2020-2023  润新知