前端html入门笔记

作者: 前端小白i | 来源:发表于2020-11-20 16:51 被阅读0次

网页的组成:

网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以 .htm 或 .html 后缀结尾的文件,因此将其俗称为 HTML 文件。

什么是HTML:

1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ,它是用来描述网页的一种语言。

2.HTML 不是一种编程语言,而是一种标记语言 (markup language)。

标记语言是一套标记标签 (markup tag)。

常用的浏览器

IE 火狐(推荐)  谷歌 苹果 欧朋

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。平时称为五大浏览器。

HTML语法规则:

1.HTML 标签/标记是由尖括号包围的关键词,例如 <html>。

​ 2.HTML 标签通常是成对出现的,例如 <html> 和 </html> ,我们称为双标签。​ 

 3.标签对中的第一个标签是开始标签,第二个标签是结束标签。 有些特殊的标签必须是单个标签(极少情况),例如 <hr />,我们称为单标

HTML基本骨架:


标题标签

**标题标签 <h1> - <h6>(重要)**

为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题,即<h1> - <h6> 。

具体实现:

      <h1> 我是一级标题 </h1>

特点:

1.加了标题的文字会变的加粗,字号也会依次变大。

2. 一个标题独占一行。

    <h1>标题一共六级选,</h1>

    <h2>文字加粗一行显。</h2>

    <h3>由大到小依次减,</h3>

    <h4>从重到轻随之变。</h4>

    <h5>语法规范书写后,</h5>

    <h6>具体效果刷新见。</h6>

段落标签:

<p> 我是一个段落标签 </p>

特点:

    1. 文本在一个段落中会根据浏览器窗口的大小自动换行。

    2. 段落和段落之间保有空隙。

换行标签

<br />

特点:

    1. <br /> 是个单标签。

    2. <br /> 标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。

文本格式化标签:


div和span标签

<div> 和 <span> 是没有语义的,它们就是一个盒子,用来装内容的。

具体实现:

    <div> 这是头部 </div>   

    <span> 今日价格 </span>

特点:

    1. <div> 标签用来布局,但是现在一行只能放一个<div>。 大盒子

    2. <span> 标签用来布局,一行上可以多个 <span>。小盒子

图片标签:

在 HTML 标签中,<img> 标签用于定义 HTML 页面中的图像。

具体实现:

      <img src="图像URL" />

    src 是<img>标签的必须属性,它用于指定图像文件的路径和文件名。

链接标签:

链接的语法格式

    <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

属性:

    1.href:用于指定链接目标的url地址

    2.target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开

    3.#:空链接

<!-- 注释语句 --> 快捷键: ctrl + /

重点记住:空格 、大于号、 小于号 这三个, 其余的使用很少,如果需要回头查阅即可。


表格

表格的主要作用

表格的具体用法:


合并单元格方式:

跨行合并:rowspan="合并单元格的个数"   

最上侧单元格为目标单元格, 写合并代码

跨列合并:colspan="合并单元格的个数"

最左侧单元格为目标单元格, 写合并代码

合并单元格三步曲:

先确定是跨行还是跨列合并。

找到目标单元格. 写上合并方式 = 合并的单元格数量。

比如:<td colspan="2"></td>。删除多余的单元格。

表格总结

表格学习整体可以分为三大部分:

表格的相关标签

table  thead  body  tr  th  td

表格的相关属性

cellspacing    cellpadding    width  height  border

合并单元格

  rowspan  collspan

列表

1.无序列表

有序列表

                                           <ol>

                                                 <li>  </li>

                                                 <li>  </li>

                                            </ol>



自定义列表


表单


<form>   表单域

... 表单控件

</form>


「input 之 type 属性文本框和密码框」重点

表单控件包含以下三大类:

1. input 输入

2. select 选择

3. textarea 文本域


「input 之 type 属性提交和重置按钮」

「input 之 type 属性单选按钮和复选框」重点


在多选一的时候,使用单选框(radio),例如:性别;

在多选多的时候,使用复选框(checkbox),例如:爱好。


input 标签的常用属性:

「label 标签」重点


label 可以和表单中的元素绑定,增加点击范围,提高用户体验;


「select 下拉表单」重点


                                            <select>

                                                <option>选项 1</option>

                                                <option>选项 2</option>

                                                <option>选项 3</option>

                                                ...

                                              </select>


「textarea 文本域标签」重点


                                                                  <textarea></textarea>

相关文章

  • 前端入门系列

    前端HTML & CSS 基础入门(1)初识 前端HTML & CSS 基础入门(2)段落及文本 前端HTML &...

  • 前端html入门笔记

    网页的组成: 网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以...

  • HTML基础学习笔记

    原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...

  • 【前端】-011-页面制作-HTML-小结

    HTML笔记汇总 【前端】-003-页面制作-HTML-HTML文档结构【前端】-004-页面制作-HTML-HT...

  • 2018-04-10前端学习笔记

    前端入门 核心基础 HTML+CSS+JAVASCRIPT HTML 教程:菜鸟教程-HTML 练习检测:慕课网-...

  • 新手如何入门学习前端?

    Web前端入门的自学路线 新手入门前端,需要学习的基础内容有很多,如下。 一、HTML、CSS基础、JavaScr...

  • 适合前端开发的书籍

    首先是前端入门,html+css的相关书籍。 《Head First HTML与CSS》。入门首选好书,通俗易懂,...

  • 前端入门(HTML)

    1.HTML(Hypertext Markup Language)超文本标记语言。2.它主要负责网页的三个要素中的...

  • web前端笔记1:html入门

    今天开始学习前端,这个主要是参加百度ife的笔记。记笔记方便自己,也给其他自学的同学一个参考。任务一:零基础HTM...

  • 前端学习

    入门 若想学 HTML, 应从哪里入门? 想成为前端工程师,那么在大学期间应该如何规划 如何自学计算机前端开发? ...

网友评论

    本文标题:前端html入门笔记

    本文链接:https://www.haomeiwen.com/subject/lcydiktx.html