文章目录
第1章 网页的构造块
1.3 标签：元素、属性、值及其他
- 标签的组成
- 元素
- 属性
- 值
1.元素
- 元素：描述网页不同部分的小标签一样，如
<html></html>、<p></p>等等- 元素的组成：一般有开始标签(如
<em>、内容(如这是文本)、结束标签(如<\em>),另外是有一些元素是空元素，即不包含文本也不包含其他元素(如<img src="blueflax.jpg" width="300" height="175" alt="Blue Flax" />)
- 元素的组成：一般有开始标签(如
2.属性和值
- 属性：描述元素进一步的信息,如下列代码中
label元素的for属性
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
- 特殊的属性——布尔属性：表示其值为真的可选属性
<!-- 这里的required就是一个布尔属性，表示用户必须填写该输入框
布尔属性不需要值，如果非要的话，就是required="requird"
另外布尔属性是预先定义好的，没办法自创
-->
<input type="email" name="emaladdr" required>
编程规范：
1.元素、属性尽量用小写字母
2.属性值要加双引号
3.父元素和子元素
- 父元素：包含另外一个元素的外层元素
- 子元素：被包含的元素
1.4 网页的文本内容
- 浏览器呈现HTML时，会把文本中的多个空格和制表符压缩成单个空格，把回车符和换行符转换成单个空格，或者将它们一起忽略
1.6 文件名和文件夹名
- 正确命名网页的文件名和文件夹名的好处：
- 访问者容易找到网页
- 符合SEO规则(Search Engine Optimization，搜索引擎优化)
- 命名规则：
- 文件名和文件夹名全部用小写字母，混合大小写对访问者输入难度和正确性不利
<!-- 文件名全部用小写 -->
buckminster-fuller.html
<!-- 文件夹名全部用小写 -->
http://www.yoursite.com/notable-architects/20th-century/buckminster-fuller.html
2.使用正确的扩展名：虽然可以用htm做扩展名，但用html会更好
3.短横线分割单词：短横线更符合SEO规则
1.7 URL
URL的组成：模式+主机名+路径
graph TB
A(http://www.site.com/tofu/index.html)--http-->B(模式)
A--www.site.com-->C(主机名)
A--tofu/index.html-->D(路径)
D--tofu/-->E(目录)
D--index.html-->F(文件名)
有时候
URL以一个目录结尾，比如http://www.site.com/tofu/,这种情况下，URL指的是路径中最后一个目录中的默认文件（通常情况下，所有Web服务器的配置都会自动将index.html作为默认文件名)
当然，也有其他模式，比如
ftp(File Transfer Protocol,文本传输协议),mailto(发电子邮件)
ftp:ftp.site.com/pub/proposal.pdf
mailto:[email protected]
1.绝对URL(absolute URL)
- 绝对
URL：包含指向目录或文件的完整信息的URL
对于FTP站点以及几乎所有不使用HTTP协议的URL都应该使用绝对
URL
2.相对URL
- 相对
URL：以包含URL本身的文件的位置为参考的URL，可以表述为“指向本页面同一目录下的xyz页面”
<a href="index-brother.html">引用同一目录下的文件</a><br>
<a href="second-layer-1/index-son.html">引用子目录下的文件</a><br>
<a href="../index-father.html">引用上层目录的文件</a><br>
<a href="../../test.html">引用上上层目录的文件</a>
<!-- ../../会向上走两级，../../../会向上走三级，不过这种方法比较笨拙 -->
- 根相对
URL：最开始使用一个斜杠，可以跳到根目录
<!-- grandfather电脑路径为：E:/Codes/《HTML5与CSS基础教程》/grandfather.html
<a href="/Codes/《HTML5与CSS基础教程》/grandfather.html">从根相对URL开始引用</a>
