文章目录

  • 第1章 网页的构造块
  • 1.3 标签：元素、属性、值及其他
  • 1.元素
  • 2.属性和值
  • 3.父元素和子元素
  • 1.4 网页的文本内容
  • 1.6 文件名和文件夹名
  • 1.7 URL
  • 1.绝对URL(absolute URL)
  • 2.相对URL


第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，搜索引擎优化)
  • 命名规则：
  1. 文件名和文件夹名全部用小写字母，混合大小写对访问者输入难度和正确性不利
<!-- 文件名全部用小写 -->
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.pdfmailto:somename@somedomain.com

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>