html网页放大时文字不换行_HTML基础知识之二（小白）

一、上节回顾

water：HTML基础知识之一（小白）​zhuanlan.zhihu.com

• 互联网的原理：服务器、浏览器、HTTP。网页文件是真实的物理存在，用HTTP请求这个文件。
• 网址的含义：如http://www.iqianduan.cn/aaa 问请求哪个文件？ 请求的是http://iqianduan.cn服务器上的aaa文件夹中的index.html文件。拓展一下，服务器可以进行默认页面的配置，比如配置为default.html或者default.php等等。但是默认的是index.html。
• HTML页面是真正的传输到了你的电脑里面进行渲染的，保存这些文件的文件夹，临时文件夹。
• 纯文本： 只有字，没有样式。txt、html、java、php、css、js等等。能用记事本打开，并且打开之后不是乱码的，就是纯文本文件。
• HTML是负责描述语义的 ： 如：<h1>我是一个主标题</h1> 功能是给文本增加“主标题”的语义，而不是变大黑粗。 再如：p的功能是增加“段落”的语义。
• Sublime使用： 任何的纯文本编辑器都能编辑网页html文件。学习的是编程，而不是某种软件。
• 骨架：

• DTD： HTML4.01 3种 ， XHTML1.0 3种。
• XHTML1.0明确的规定了标签名必须小写、所有的属性都是双引号封闭、自封闭结尾反斜杠。
• strict : 严格版本，font、b、u、i等不能使用了。 <b>加粗文字</b> <u>下划线文字</u> <i>倾斜文字</i> 2007年之前，就是用这些标签写页面的。但是，2007~08就被废弃了，原因是：DIV+CSS， 我们希望HTML标签只负责语义，而不要负责样式。而b、u、i明显的带有“样式色彩”，所以08年开始，就被废弃了。strict版本中，严格不需使用b、u、i。但是，我们要在页面上巧妙的使用一下b、u、i（css钩子），所以我们使用transitional版本。
• 字符集： utf-8和gb2312。字符库收录文字多少： utf-8 > gb2312；文件尺寸：gb2312 < utf-8。 gb2312没有被废弃，很明显http://qq.com使用gb2312，追求打开速度快。
• 关键字、页面描述 <meta name=”keywords” content=”手机,电脑” /> <meta name=”description” content=”页面描述” />
• 空白折叠现象 和 HTML标签对空格、tab、换行不敏感。 空白折叠现象是对于标签内的文本（即使打了许多空格，但是最后也会显示为一个空格），而HTML标签对空格、tab、换行不敏感是对于标签与标签之间。
• 所谓的“容器级”和“文本级”不是官方的分类，而是有经验的程序员自己分出来的类别。有一些标签，里面什么都能放置，非常的大气； → 容器级 有一些标签，里面只能放置文本，虽然放置别的东西，浏览器可能不报错，但是也没人这么做。 → 文本级 HTML4.01层面，容器级标签，只有div、li、dd、dt、td。其余的标签，都是文本级的。

二、图片

1.基本使用

• 在HTML页面中要插入图片，使用img标签。 <img src="shishi.jpg" /> ，img是英语image的简称，图片的意思；src是英语source的简称，资源的意思；src属性中的值，就是图片的路径。
• img标签是一个自封闭标签，也称为单标签，并不是一对儿——<img />。我们现在接触的自封闭标签就两个： <meta />和 <img />
• 网页中能插入的图片格式：jpg、jpeg、png、bmp、gif（动态图）。 不能插入的图片格式：psd

2.图片的高度和宽度

• 不设置宽度、高度： <img src="shishi.jpg" />
• 通过width设置宽度、height设置高度：<img src="shishi.jpg" width="500" height="300" />
• 如果我们仅仅设置其中一个属性，另一个属性将按比例自动设置。<img src="shishi.jpg" width="100" />；则图片的高度按其原有比例自动设置。

3.图片是“文字”

• 图片img元素，不是普通的html标签，和p这种东西不一样，img标签实际上也是一个文字。img标签，就是文字。所以img标签之间也会存在空白折叠现象，这也是如何去掉图片和图片之间空格的出发点。（具体解决方法如下链接）

water：html如何去掉图片与图片之间的空格？​zhuanlan.zhihu.com

4.相对路径和绝对路径

4.1相对路径

• img的src属性，描述图片文件在哪儿。从html页面出发，找到图片。这种路径的描述方式，叫做相对路径。 1. 当html文件和图片文件在同一个目录下，那么非常简单，可以直接输入文件名 <img src=”shishi.jpg” /> 2. 当图片在更深一层的文件夹中的时候，写法就是写上文件夹名字： <img src="images/longlong.jpg" /> 可以有很多的层次：<img src="images/aaa/bbb/1.jpg" />

3. 当图片在页面更浅一层的文件夹中：<img src="../jiehunzhao.jpg" />路径可能比较复杂，没有关系一层一层找就可以了：<img src="../../images/aaa/bbb/1.jpg" /> 需要注意的是： ../只能出现在开头。（一个../代表一个层次）

• 相对路径的好处太明显了，就是只要文件夹里面的文件不乱动，文件夹复制到哪儿都可以使用。

4.2绝对路径

• 所有以http://开头的路径， 或者以/开头的路径，我们都称为绝对路径。
• <img src="http://http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" /> （注意http:// 不能省略。） 很明显，我们现在不是从html页面出发找到图片，而是描述了一个绝对的一个网址，那么称为“绝对路径”。
• 以/开头的路径，表示当前服务器的根目录。 <img src=”1.jpg” /> 不等价于：<img src=”/1.jpg” /> 解释：<img src=”1.jpg” /> 表示从当前页面出发，找到1.jpg； <img src=”/1.jpg” /> 表示从当前服务器根目录出发，找到1.jpg <img src=”/images/1.jpg” />等价于绝对地址：<img src=”http://www.shaoshanhuan.com/images/1.jpg”/>
• 不要去考虑直接插入硬盘中的文件：<img src=”file://d:/1.jpg” /> 不要学，没有用，因为服务器上没有d盘，你的路径不适用服务器的情况。并且也不方便用u盘考来考去。这是一个错误的路径。
• 工作中，都是把图片放到同一个工作目录，比如images文件夹里面，用相对路径找到图片。

面试题：

<img src=”../../photo/1.png” />

5. alt 属性

• <img src="sdf34.jpg" alt="这是一只考拉" /> alt是英语alternate替代的意思，就是当图片不能被显示的时候（可能因为路径错误、服务器错误），显示的替代文字。
• <img src="sdf34.jpg"alt="这是一只考拉" title="标题" /> title属性是指当鼠标悬浮在图片上时会显示出来的文字

三、超级链接

1.基本使用

• 超级链接，把网页和网页之间连起来了，互联网是“网”的原因。使用a标签来制作。
• <a href="temp.html">我是超级链接</a>
• href里面的值，就是要跳转到的页面的地址，相对路径、绝对路径都行 <a href="../../aaa/bbb/ccc/1.html">链接</a> <a href="/1.html">链接</a> <a href="http://www.sina.com.cn/">链接</a>

2.常见属性

• title属性，就是鼠标悬停时候的提示文本 <a href="temp.html" title="快点我，还等什么！！">我是超级链接</a>
• target属性，设置是否在新窗口中打开连接；如果想在新窗口中打开链接 target=”_blank”<a href="temp.html" target="_blank">我是新窗口打开的链接</a>

3.页面内的锚点

• 可以通过下面的这种特殊形式的a，在页面中放置锚点： <a name="hysh"></a> （该标签放在要跳转的地方即可） a里面有一个name属性，name是英语名字的意思。而没有href和链接中的文字。这种a标签叫做锚点。可以使用网址：页面内锚点.html#hysh来快速定位这个锚点。 （即在打开水的网址后面加上#hysh 但是该方法在我电脑不成功，谷歌浏览器可以）
• 可以在页面的其他部分，制作跳转到这个锚点的超级链接： <a href="#yysy">查看演艺生涯</a>
• 可以在其他页面制作这个超级链接： <a href="10_页面内锚点.html#yysy">查看演义生涯</a> （这里的链接按相对路径比较方便）
• 注：如果我们想要把一个段落中所有的文字，都是超级链接：应该p包裹a，因为我们感觉p比a大，a就是一个文字：<p> <a href="">我是段落的文字</a></p> 而不要： <a href=""><p>我是段落的文字</p></a>

四、列表

1.无序列表

• ul是无序列表，表达的是没有顺序关系的列表。li是英语list item列表项的意思。 ul的儿子标签，只能是li，不能是别的东西。（ul标签里面只能放li标签，不能放其他标签，也不能直接输入文字）
• li的数量没有限制，可以有无限多个。li是一个非常经典的容器级标签，里面可以防止任何东西，甚至，再放置一个ul（二级列表），甚至三级列表。注意下面这个例子的写法：

2.有序列表

• <ol><li></li><li></li><li></li></ol>所有注意事项和ul一样

3.定义列表

• 定义列表表示定义某事的一个列表。dl是英语definition list定义列表的意思；dt是英语definition title定义标题的意思；dd是英语definition description定义描述的意思。
• dl中，交替出现dt和dd。dd是dt的解释说明，dd负责解释、描述、定义dt；可以出现连续多个dd，在语义上，它们都是上面的dt的描述。也可以一个dt没有dd。

• 也可以单独成为一个dt和dd组，大部分前端工程师更喜欢这样的：

这样的好处，就是样式更好管理一些，比如直接对ul中的li的样式进行调整，由竖的变为横排的（学CSS之后你就懂了）。

• dd和dt都是非常经典的容器级标签，里面什么都能放。
• 放什么标签，和长得样子没有关系，一切看语义！！（也就是有的页面看着是ul和li的形式，但是有可能是由dl表示的）

五、表单

• 表单中的所有元素，都要放在一个form标签中：<form></form>。后面学到Ajax时我们再来了解form表单的两个属性method、action。

1.单行文本框

• <input type="text" /> input是英语输入的意思，text表示“文本”的意思，表示这是一个输入控件，所谓的控件就是用户能点的、能填的东西。
• 这又是一个自封闭标签，不是一个标签对儿。因为它并不需要给别的文字添加语义。（至今，我们已经学习过了3个自定义标签）

• value属性表示默认有的值： <input type="text" value="haha"/> （默认的值为haha）

2.单选按钮

• <input type="radio" name="sex"/> 男 <input type="radio" name="sex"/> 女
• 单选按钮，必须是互斥的，不能同时选中多个，所以它们必须有相同的name属性。至于是什么name无所谓，但是必须相同。
• label标签。点字的时候，小圆点就能被选择上。 <input type="radio" name="sex" id="nan"/> <label for="nan">男</label> （这里注意id不要用数字开头） 现在，这个for属性和id的值是一样的，就把某一个label和input产生了绑定关系。

3.复选框

• <input type="checkbox" name="hobby" /> 篮球 <input type="checkbox" name="hobby" /> 足球 <input type="checkbox" name="hobby" /> 羽毛球 checkbox就是复选框的意思，name属性虽然现在感觉没有啥用，但是还是应该设置为相同的。

4.密码框

• <input type=”password” />

5.三种按钮

• <input type="button" value="普通按钮" /> <input type="submit" value="提交按钮" /> <input type="reset" value="复位重置按钮" />

HTML4.01层面就是上面这7种input系列：1 <input type="text" /> <input type="radio" /> <input type="checkbox" /> <input type="password" /> <input type="button" /> <input type="submit" /> <input type="reset" /> （还有一些h5中比较方便的标签）

6.下拉列表

• select表示选择的意思，option是选项的意思。这是一个组合使用的标签组，和ul、li的关系是一样的。

7.文本域

• 能够换行的输入文本的控件： <textarea cols="40" rows="20">这家伙很懒，什么都没留下</textarea> text文本，area区域；cols多少列，rows多少行，我们一般都是用css来控制。
• 这是一个对儿标签，里面的内容是默认文字。（“这家伙很懒，什么都没留下”是默认的）

六、表格

1.基本表格

• table就是表格；tr就是table row表格行的意思；td就是table dock表格小格的意思。 每一个tr就是一行，每行中的小格格就是td

• 这组标签三层嵌套。td的数量是一样多的。
• 具有表头语义的小格格，用th替代td即可。（这里千万不要把tr改为了th）

• 本质上讲，th和td都是小格格，只不过th有表头小格格的语义。

2.单元格的合并

• rowspan 行跨度；colspan 列跨度

以上代码分别是下面三种样式的实现：