• 自学_HTML<一>


    HTML

    HTML(HyperText Markup Language):描述网页长什么样子、有什么内容的一个文本。查看网页的描述内容(HTML)的方式:使用IE浏览器的话,在网页上点击右键,选择“查看源文件”。

    主要构架

    <html>
    	<head>
    		<title>我的第一个网页</title>
    	</head>
    	<body bgcolor="red" background="bg.jpg">
    		Hello world
    	</body>
    </html>
    
    • 所有内容都在<html></html>标签之内;

    • <head></head>内放的是头部信息,是对页面的描述,不会直接显示在页面中,<head>内的<title>中设置的是页面的标题,<title>只能放在<head>中;

    • <body>是页面的主体,大部分显示内容都定义在这里;

    • <meta>标签,<meta>有指定name和指定http-equiv两种用法,<meta name="名字" content="值" />、<meta http-equiv="名字" content="值" />两种用法

      • <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定网页编码
      • <meta http-equiv="Refresh" content="3" /> 三秒钟后刷新此网页
      • <meta http-equiv="Refresh" content="3;url=http://www.rupeng.com" /> 三秒钟后重定向到新网页。发帖成功后提示“发帖成功,即将转向帖子查看页面”
      • <meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面

    基本语法

    • <h>:标签,HTML定义了<h1></h1><h6></h6>六个h标签,分别表示不同大小的字体。

    • <br>:回车

    • <p>:分段。<p>前后会有比较大的空白,而<br>则没有。

    • <center>这是居中</center>居中显示

    • <b>粗体</b>:粗体

    • <i>斜体</i>:斜体

    • <font></font>:字体标签,<font color="red">红色</font> <font size="30" color="red">红色</font>

    • 特殊字符:&lt;(小于号,less than);&gt;(大于号,greater than);&nbsp;(空格,no-break space)

    • <hr>: 横线 color size width align=left,center,right

    • <pre>:预格式化 保持本色

    • <body bgcolor="#006699">背景颜色

    • <a href="http://www.rupeng.com">如鹏网</a>超链接

      • <a href="http://www.rupeng.com"><img src="http://www.rupeng.com/forum/templates/uchome/images/logo.gif"/></a>镶嵌图片;
      • “/”表示网站根目录,“../”表示父目录,“../../”表示父目录的父目录
      • <a>的target属性设定为"_blank"就可以在新窗口中打开超链接。
      • 锚记:用name属性为<a> 起名字:<a name="Last">这里是最后</a>。这样可以通过<a href="#Last">转到平台</a>来跳转到超链接的部分。去往评论、回到正文
    • <img src="a.jpg"/>注意图片是链接的,不是插入的,所以如果Src指向的文件不存在了,就看不了了。

      • alt: 图片无法显示时的显示文本,鼠标方式去也会有悬浮提示“点击查看大图”
      • border属性指定边框,border="0"不显示边框
      • width、height属性指定图片的显示大小,如果不指定则是图片的原始大小
      • 不要以为把bmp后缀改为jpg就是改文件格式了
      • 如果网页上要显示小图(比如缩略图),不要仅仅是把大图设定一下width、height来缩小,因为仍然会下载大图,会使得加载速度很慢。
    • 列表:<ul><li>灌水区</li><li>版务区</li><li>原创贴图</li></ul>。无序列表。

      • 有序的列表<ol></ol>
    • 表格:<table></table>为表格,在内部通过<tr>创建行,<tr>内部通过<td> 创建单元格。可以将table的border属性设为0来隐藏表格线。

      • 填充、间距Cellpadding内容和表格边线之间的距离 cellspacing单元格之间的间距s
      • <tr>的属性:align,水平对齐,可选值left、right、center;valign,垂直对齐,可选值top、middle、bottom。
      • <td>也有align和valign。<tr align="right"><td>tom</td><td align="left">20</td><td>男</td></tr>:子标签默认继承父标签的属性,如果自己单独指定了属性,则会覆盖父标签的属性。
      • rowspan、colspan进行单元格的合并
      • 表头的td可以用th代替,这样就会表头粗体、居中显示
    • 表单:<form>标签为表单标签。如果要把数据提交到服务器,则需要将<input><textarea><select>等表单元素放到form中

      • <input>是主要的表单元素,type的可选值:submit(提交按钮)、button(普通按钮)、checkbox(复选框)、file(文件选择框)、hidden(隐藏字段)、image(图片按钮)、password(密码框)、radio(单选按钮)、reset(重置按钮)、text(文本框)。<input type="file" />
      • submit:点击submit按钮表单就会被提交给服务器,中文IE下默认按钮文本为“提交查询”,可以设置value属性修改按钮的显示文本
      • text:size属性为宽度,value为值,maxlength为可以输入的最大长度,readonly只读。<input type="text" readonly/>(只写属性名,不写属性值)或者<input type="text" readonly="readonly" />
      • checkbox:checked属性表示是否被选中,<input type="checkbox" checked />或者<input type="checkbox" checked="checked" />(推荐)checked、readonly等这种只有一个可选值的属性都可以省略属性值。
      • radio:相同name属性的为一组,不同radio设定不同的value值,这样通过取指定name的值就可以知道谁被选中了,不用单独的判断。
      • file:使用file,则form的enctype必须设置为multipart、form-data、form method属性为POST(*),get。get:少量数据,post:大量数据。<form action="Default.aspx" method="post"></form>
      • image:使用src属性指定图片的地址,用来实现美化的“登录按钮”。
      • Reset:重置
    • <select>:用来创建类似于WinForm中的ComboBox或者ListBox

      • 如果size属性大于1就是ListBox(size的值为显示出来的列表数量),否则就是ComboBox。
      • <select multiple>或者<select multiple="multiple">(推荐),那么就是可以多选的ListBox。
      • select中的项是<option><option>北京</option>还可以设定项的值<option value="1">北京</option>
      • 将一个option设置为选中:<option selected>333</option>或者<option selected="selected">333</option>(推荐)就可以将这个项设定为选择项
      • 如何实现“不选择”,添加一个<option value="-1">--不选择--<option>,然后编程判断select选中的值如果是-1就认为是不选择。
      • select分组选项,可以使用optgroup对数据进行分组,分组本身不会被选择,无论对于下拉列表还是列表框都适用。备注
    • <textarea>多行文本(也是表单元素):<textarea>文本</textarea>,cols、rows属性表示行数和列数。

    • <label>:在<input type="text">前可以写普通的文本来修饰,但是单击修饰文本的时候input并不会得到焦点,而用label则可以,for属性指定要修饰的控件的id,<label for="txt1" >asdfad</label>

      • 为被修饰的控件设置一个唯一的id
      • <label for="ma">婚否</label> <input id="ma" type="checkbox" />
    • fieldset:GroupBox效果,将控件划分一个区域,看起来更规整

      • <fieldset>
        <legend>常用</legend>
        <input type="text" />
        </fieldset>
    • 滚动文字 <marquee> scrolldelay控制速度

    • 播放声音、显示flash,

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="700"
    <param name="movie" value="light-bot-2205.swf" /
    <param name="quality" value="high" /
    <embed src="light-bot-2205.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="760" height="700"></embed
    </object>
    
    • 调用wmp的插件<embed src="coder.mp3" loop=true autostart=true name=bgss width="460" height="68">
      只能播放wav和mid格式,只支持ie

    • div:层<div></div>将内容放到层中,就以将这些内容当成一个整体进行处理,比如整体隐藏、整体移动等。div非常强大和常用。类似于WinForm的Panel。

    • span:div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但不影响布局、显示。

    备注

    • xml:描述存的什么数据

    • XHTML:可扩展超文本置标语言(eXtensible HyperText Markup Language,XHTML)

    • DHTML:动态HTML;

    • 格式标签:<p></p>创建段落;<br />回车,也可以写成<br>,在HTML中有一些标签可以不关闭,<br>就是一个,这是和XML不同的地方(常考),但是为了遵循XHTML规范,推荐像XML一样严格关闭。<br/><img src="1.gif"/>

    • 属性值:HTML中属性值即可以用单引号括起来、也可以用双引号括起来、甚至不用引号都可以(不推荐),单双要配对。

    • 注释:HTML使用和XML一样的来做注释。

  • 相关阅读:
    2017-2018 ACM-ICPC, NEERC, Moscow Subregional Contest
    2017-2018 ACM-ICPC, NEERC, Northern Subregional Contest
    BZOJ5104 : Fib数列
    2017-2018 ACM-ICPC Southeast Regional Contest (Div. 1)
    2017 ACM Jordanian Collegiate Programming Contest
    BZOJ4910 : [Sdoi2017] 苹果树
    2017-2018 ACM-ICPC Pacific Northwest Regional Contest (Div. 1)
    BZOJ4912 : [Sdoi2017]天才黑客
    BZOJ4739 : 定向越野
    概率笔记11——一维正态分布的最大似然估计
  • 原文地址:https://www.cnblogs.com/lovexinyi/p/9804905.html
Copyright © 2020-2023  润新知