HTML / CSS 学习小记

《一起学前端 之 HTML / CSS 篇》是记录从 2020.3.31 开始,学习 HTML / CSS 的收获与感悟。


2020.3.31

HTML(超文本标记语言),超文本指的是什么?

超文本有两层含义,第一层是指:超越了文本限制,即用HTML写出来的页面,除了包含文本外还可以包含图片、声音、动画及多媒体等。第二层是指:超级链接文本,指可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。


2020.4.2

关于几个特殊的标签或属性

  是用于指明当前代码使用的html的版本的,这个标签表示使用的是H5。

  其中的“lang” 指的是该页面是是用什么语言,“en”指的是英语,“zh-CN”指的是中文,比如,如果我的页面是使用 的,那么浏览器有可能会询问是否需要翻译该页面。

 其中的“charset”是指该HTML页面所使用的字符集,“UTF-8”被称为万国符,即包含了所有国家的语言符号。如果不标注UTF-8,有可能会导致编辑器打开HTML文件的时候出现乱码。

常用HTML标签

-
,表示一级到六级标题,双标签。

,表示段落,双标签。


,表示换行,且换行产生的间距不大,单标签。

,文本格式化标签,用于加粗,双标签。

,文本格式化标签,用于倾斜,双标签。

,文本格式化标签,用于添加删除线,双标签。

,文本格式化标签,用于添加下划线,双标签。

,“小盒子”,一行能放多个,双标签。

,“大盒子”,独占一行,双标签。

,放置图像,宽高属性一般设置其中一个即可,双标签。

,放置超链接。链接分为:外部连接(网址)、内部链接(本站网页)、下载链接(.exe或压缩包形式)、空链接(用于待定占位)、网页元素链接(音频图像等)和 锚点链接(用于定位该网页中的某个元素,用元素 id 作为关联,class不行)。跳转方式分为:新窗口打开(_blank) 和 原窗口打开(_self)。

,表格标签,用于展示数据或布局,配合(表格行)、和可以更好地表示表格的语义。此外,注意合并单元格的方法:首先确认是列合并还是行合并单元格,然后给目标单元格(列合并设置左边的,行合并设置上边的)设置colspan/rowspan属性,最后删除多余的单元格。

    ,无序列表,用于整齐划一清晰地布局,配合
  • 标签使用。

      ,有序列表,用于整齐划一清晰地布局,配合
    1. 标签使用。

      ,自定义列表,用于整齐划一清晰地布局,配合
      (项目名)、
      (项目名的描述)使用,一般是一个
      对应多个
      。注意,有一些布局看起来既可以用列表,也可以用表格,那就需要从语义方面去考虑使用哪一种了。

      ,表单域,有action、method和name属性,它们分别表示交递表单的url,提交方式和该表单的名称。

      ,根据type属性的不同,会有很多不同的表现形式,如下图:

      其次,给不同形式的input表单控件设置name属性,可以唯一地标识每一个表单项目,比如给用户名输入框设置name=“username”。注意,同一项目的单选框或复选框需要设置相同的name。比如,性别这一项,单选框的name都要设置成sex,让用户只能选择其中一个选项,这样就可以达到单选且唯一标识的目的了。然后,每个input控件还有value属性,除了文本框的value是用户可见,其他的都是隐藏的,比如可以给性别项的单选框“男”设置value=“男”,这样表单提交过去之后,服务器后台就能知道表单上面每一项的具体内容了。此外,对于checkbox和radio,如果想要设置默认勾选,可以设置它的checked属性值为checked。

      ,标签,用于绑定一个表单的控件,提升用户体验。

(表格行中的单元格)、(表格行中且作为表头的单元格)使用,然后配合使用