百度前端训练营笔记1--静态网页编写中用到的html基础与css基础

homework_d2_预习及作业过程中的笔记

1、HTML 元素参考 - HTML(超文本标记语言) | MDN https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element#

2、Html中,head标签中几个重要的元素:

​ ①title:整个网页的标题,与h123456区分开。另外,为网页添加书签这个操作,改变的就是网页的title;

​ ②元数据meta:用来指定字符编码、网页作者、网页大概内容等等,这些在网页浏览时不主动显示,但方便我们需要时可以查询到(指定包含关于页面内容的关键字的页面内容的描述是很有用的,因为它可能或让你的页面在搜索引擎的相关的搜索出现得更多(这些行为在术语上被称为:搜索引擎优化,或 SEO。);

​ ③其他类型的元数据:能实现“从其他网页链接到该网页 时,该链接将显示为一个图像+描述”的功能;

​ ④CSS外联,通常放在文档头部,其中rel="stylesheet"表明这是文档的样式表,而 href 包含了样式表文件的路径。

​ ⑤JS的链接使用script元素,没必要非得放在<head>中。其中src 属性来指向需要加载的 JavaScript 文件路径,同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容(如果脚本尝试访问某个不存在的元素,浏览器会报错)。

3、块级元素和行内元素

​ HTML(超文本标记语言)中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素(容器)的整个水平空间,垂直空间等于其内容高度,因此创建了一个“块”。而一个行内元素只占据它对应标签的边框所包含的空间。

​ 一般情况下,行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

​ 默认情况下,行内元素不会以新行开始,而块级元素会新起一行;

​ 块级元素只能出现在标签里面;

块级元素列表address、article、aside、blockquote、dd、div、dl、fieldset、figcaption、figure、footer、form、h123456、header、hgroup、hr、olp、pre、section、table、ul

行内元素列表有:b, big, i, small, tt、abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var,a, bdo, br, img, map, object, q, script, span, sub, supbutton, input, label, select, textarea

4、超链接的建立:

例:

<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/"
   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a>
的超链接。
</p>

​ 点击(或激活)超链接将使网络浏览器转到另一个网址(URL):**URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。**如果浏览器不知道如何显示或处理文件,它会询问您是否要打开文件(需要选择合适的本地应用来打开或处理文件)或下载文件(以后处理它)。

​ **href=“#”**是一种临时链接的写法,这样写就是说这个链接目前不可用,点击了也不会有作用,还是会跳转到本页,当#被有效链接替换才会起作用”

​ title:写在 <a>标签里面,用来链接网页的title:链接的标题仅当鼠标悬停在其上时才会显示,这意味着使用键盘来导航网页的人很难获取到标题信息。如果标题信息对于页面非常重要,你应该使用所有用户能都方便获取的方式来呈现,例如放在常规文本中。

​ URL :Uniform Resource Locator,统一资源定位符,URL 使用路径查找文件。路径指定文件系统中所需文件所在的位置。其中①同一文件目录下的可以直接写文件名字,例<a href=“contacts.html”>联系人页面</a>;②不在同一文件目录下的, ..表示上级目录,例../../../path/to/my/file.html.

可以的话,尽量使用相对URL链接而非绝对URL链接,这有利于节约资源,节省时间

​ 超链接除了可以链接到文档外,也可以链接到 HTML 文档的特定部分(被称为文档片段)。要做到这一点,你必须首先给要链接到的元素分配一个[id](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes#attr-id)属性。然后链接到那个特定的`id`,您可以在 URL 的结尾使用一个井号指向它。例:<h2 id="Mailing_address">邮寄地址</h2>

​ 链接到其他文档的文档片段:<p>要提供意见和建议,请将信件邮寄至 <a href="contacts.html#Mailing_address">我们的地址</a>。</p>

​ 链接到当前文档的文档片段:<p>本页面底部可以找到 <a href="#Mailing_address">公司邮寄地址</a>。</p>

​ 链接到电子邮件发送页面(使用mailto):

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>or

<a href="mailto:">向 nowhere 发邮件</a>

​ 任何标准的邮件头字段可以被添加到你提供的邮件 URL。其中最常用的是主题 (subject)、抄送 (cc) 和主体 (body) (这不是一个真正的头字段,但允许您为新邮件指定一个短内容消息)。 每个字段及其值被指定为查询项。注意: 每个字段的值必须是 URL 编码的。也就是说,不能有非打印字符(不可见字符比如制表符、换行符、分页符)和空格 percent-escaped. 同时注意使用问号(?)来分隔主 URL 与参数值,以及使用&符来分隔mailto:

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值