标签归档:web

JavaScript中如何输出空格

看了一点JavaScript的东西,发现了这个问题总结一下,回来再补充更多的方法。

一般我们在js中写

其实在浏览器显示出来的还是1 2 3这样子,中间只有一个空格。

在网上查的有两种方案:

1.使用html标签

2.使用css样式

white-space:pre这个属性,表示空白会被浏览器保留。。。

简陋的知乎登录界面[html+css实现]

这三天为了完成蓝线的第二次作业:做一个知乎的登录界面。花费了不少时间,现在把这个完成过程写成一个blog的形式,并附上鄙人的简陋代码。

题目要求:

编写HTML和CSS还原知乎的登陆页面(如果你已经登陆,需要先退出登陆),要求如下:

  1. 不需要实现点击效果,包括登陆标签、“注册知乎”按钮、“社交账户登陆”以及底下的一堆小链接
  2. 右上角的”下载知乎APP”鼠标放上去弹出二维码的效果需要实现
  3. 背景动画不需要,验证码用一张写死的图片就行
  4. 原网页在不同的屏幕下会有不同的显示效果,只需要实现在>740px的设备(笔记本电脑)上的版本就行

因为不需要实现各种点击效果以及动画效果,所以只用html+css即可实现题目的要求。先贴一下代码以及效果图:

代码:请移步我的github

效果图:

QQ图片20160213114541

 

其实我在github上也用注释的形式写出来了:边距的问题真的是有些坑,自己还是没有很好的理解盒模型的边距与元素的长宽关系,很多元素的长宽都是我对着浏览器调试出来的,论设计师的重要性二维码实现使用:hover结合display: none达到弹出效果的。而验证码图片则采用绝对定位定位至了表单里面。
css的确有很多很有趣的属性= =还好这次作业也算完成了吧,我真的很想进入blueline俱乐部,说几句题外话:看着其他当初也是嚷嚷着要进俱乐部,然后天天在俱乐部群里面水群的家伙,我貌似突然理解了ACM俱乐部为何禁止水群。水群绝对是降低生产力的方式。尤其是在计软这样的学院,一些人听学长说只专重技术就好不用管GPA,所以他们学了点半吊子的技术先不论他们到底学到了什么就开始在群里吹逼,各种互膜,以为能看懂一些程序员的笑话自己就是程序员了。说多了,你们既然浪费时间去水群,我就要用这些时间学习真正的技术,想起了长者的一句话:一句话也不说是最好的。
不过HIT的技术俱乐部里水群的情况也太严重了,还好微软ACM和蓝线之类的还是很好的。具体哪个俱乐部我也不说了,还好自己没加。

update 2016-02-14

一些注意事项:

  • 如果是针对某个元素的样式,一般不要使用标签选择器,而是用类或者id选择器
  • 可以利用属性的缩写形式,比如margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px; 可以缩写成margin: 10px 20px 30px 40pxborderbackground, padding等系列也都有这样的缩写,这样可以让代码更简洁
  • 把相同的属性作为父元素的属性,然后让子元素使用inherit(很多属性的默认值就是inherit,这样就不需要再手动设置),比如这个页面基本上所有字体都是”Helvetica Neue”,那就可以设置bodyfont-family,然后让其它字体的子元素覆盖这个属性。这样不但可以简化代码,如果要修改也更方便。

html标签总结

蓝线俱乐部第一次作业,总结一下html的标签,html是一种标签语言,算是一个备忘吧。

html标签总结

一.

<head>标签用于定义文档的头部,它是所有头部元素的容器,头部元素有<title>,<script>,<style>,<link>,<meta>等标签:

1).<title></title> 标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题迅速判断出网页主题。

二.

<body></body>之间是网页的主要内容,如<h1>为标题标签,<p1>为段落标签,<img>图片标签:

1).<hx>标签来制作文章的标题,标题标签一共有6个(x从1-6),<h1>是最高等级,<hx>标签可以用来做文章的标题也可以用来做网页上各个栏目的标题。格式为<hx>标题文本</hx> (x从1-6),标题都会加粗处理

2).<p>标签显示文章的段落。格式为<p>段落文本</p>

3).<em>标签和<strong>标签都可以表示强调语气,但是两者的强调方式不同:<em>蓝线</em>会让蓝线成为斜体,而<strong>蓝线</strong>则是把蓝线加粗。<strong>标签体现的语气更为强调一点。

4).<span>标签是没有具体的语义,它只是用来单独的设置样式。比如我们要把段落中的某几个字变为黑色,我们可以这样:

<stlye>

span{

color:black;

}

</stlye>

<span>kugwzk</span>

5).<q>标签可以让我们引用别人的话,它的语义:引用别人的话。它可以让浏览器自动地为我们引用的文本加上双引号,来体现出这一语义。注意的是<q>标签是 用在短文本引用中,也就是引用一句话我们可以使用它。而如果引用长文本就需要下面的标签。

6).<blockquote>标签用在长文本的引用,它的解析为缩进样式。同样我们也不要为我们的文本再加上双引号。

7).在html文档中是忽略回车和空格的,所以我们输入再多的空格和回车也无法体现出来。<br/>标签可以帮我们解决这个问题。在需要回车换行的地方插入<br/>标签即可。同时它是一个空标签只需要写一个开始标签即可。

8).<hr/>可以用来插入一些水平横线,它也是一个空标签。

9).<address>标签可以用来显示地址,也可以用来定义文档作者或拥有者的联系信息,浏览器显示的样式为斜体。

10).<code>标签可以帮我们插入一行代码,如果需要插入多行代码需使用<pre>标签。它的主要作用是预格式化的文本,被包围在pre元素中的文本通常会保留空格和换行符。

11).当我们需要插入信息列表的时候使用ul-li标签完成。这样形成的是没有前后顺序的信息列表。默认样式为每个li前都自带一个圆点。如果要插入有序的信息列表需要使用<ol>标签配合<li>标签。<li>标签定义列表的项目。

12).在网页制作中我们可以把一些独立的逻辑部分(一些相互关联的元素)划分出来放在<div>标签中。为了让逻辑清晰我们可以用id属性来为每个div标签提供唯一的名称。

13).创建表格的一些元素。<table></table>:整个表格以<table>开始</table>结束。<tbody></tbody>:当表格内容较多的时候表格是下载一点显示一点,但是加上<tbody>标签后是等全部表格内容下载完成后 显示。<tr></tr>:表格的一行。<td></td>表格的一个单元格。<th></th>用在表格的表头,默认为粗体并居中显示。<caption>则可以为我们添加表格的标题。

14).<a>标签可以实现超链接。语法:<a href=”目标网址” title=”鼠标显示划过的文本”> 链接显示的文本</a>title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好).<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开需要在<a href=”kugwzk.info” target=”_blank”>

15).<img>标签插入图片,语法:<img src=”图片地址” alt=”下载失败的替换文件” title=”提示文本”>src:标识图像的位置;alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);图像可以是GIF,PNG,JPEG格式的图像文件。

16).<!–..–>注释标签

17).<mark>标签:突出显示部分文本。

三.

音频视频类标签

1).<audio>定义声音标签

2).<video>定义了视频标签

可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

表单

1.<form>定义用户输入的html表单

2.<input> 标签用于搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

3.<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

4.<button> 标签定义一个按钮。在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。<button> 控件 与 <input type=”button”> 相比,提供了更为强大的功能和更丰富的内容。<button></button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

5.select 元素可创建单选或多选菜单。<select> 元素中的<option>  标签用于定义列表中的可用选项。<option>标签位于<select>标签内部。

6.<optgroup> 标签定义选项组。他可以把多个选项组合起来。

7.<label> 标签为 input 元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。