zoukankan      html  css  js  c++  java
  • 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>:引入外部文件

  • 相关阅读:
    D. Babaei and Birthday Cake--- Codeforces Round #343 (Div. 2)
    Vijos P1389婚礼上的小杉
    AIM Tech Round (Div. 2) C. Graph and String
    HDU 5627Clarke and MST
    bzoj 3332 旧试题
    codeforces 842C Ilya And The Tree
    codesforces 671D Roads in Yusland
    Travelling
    codeforces 606C Sorting Railway Cars
    codeforces 651C Watchmen
  • 原文地址:https://www.cnblogs.com/MrQlyn/p/10236353.html
Copyright © 2011-2022 走看看