前端学习笔记1

• HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

• HTML语法规范

• (1) 所有的标签都需要写在< >里面，大部分都是成对的出现。

• (2) 当然由成对出现的也有单个的标签例如换行标签：

• 标签关系：

• 双标签关系可以分为两类：包含关系和并列关系。

• 包含关系：

• 包含关系就类似于C语言里的大括号和python里面的TAB

• 并列关系：

• 同一级别，按照次序先后执行

• HTML基本结构标签

• 标签

• 标题标签

• <h1>——<h6>

• 一共存在六级标题，<h1>为一级标题以此类推<h6>为六级标题.

• 标题一共六级选文字加粗一行选，由小到大依级减，从重到轻随之变。

• 段落标签

• <p>定义段落，它可以将网页分成若干的段落。

• 语义：可以把HTML文档分割成若干段落。

• 特点：

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

• （2）段落与段落之间保有间隙。

• 换行标签

• <br>是打断强制换行的标签。

• 特点：

• （1) <br>是一个单标签。

• （2）<br>标签只是简单开始新的一行，跟段落不一样，段落之间会插入一些垂直的间隔。

• 文本格式化标签

• 粗体、斜体或下斜线效果。

• 常用标签

• <div>和<span>标签（用来布局的）

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

• <div> </div>一个人独占一行内容是个大盒子

• <span> </span>是跨距，小盒子（一行里面可以放多个）

• 特点：<div>用来布局，但是现在一行只能放一个<div>.

• 图像标签和路径

• 图像标签（<img>用于定义HTML页面中的图像的）

• <img src="图像的地址"/>

• src是<img>的必须属性，它用于指定图像文件的路径和文件名.

• 注意：

• （1）图像标签可以拥有多个属性，必须写在标签名的后面。

• （2）属性之间不分前后顺序，标签名与属性，属性与属性以空格分隔开。

• （3）属性采取键值对的格式即key="value"的格式，属性=属性值。

• 超链接标签

• <a>标签用于定义超链接，作用是从一个页面链接到另一个页面

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

• 注释标签

• <!---所需要被注释掉的内容----->注释方式

• 快捷键为Ctrl+/

• 改标签的含义是为了之后自己回头来理解自己所书写的内容

• 表格标签

• 一个tr是一行，一个td是一个单元格，两个内容都可以有多个。

• 无序列表

• <ul>标签表示页面中无序列表，而列表项使用<li>标签定义。

• 默认列表前有一个黑点。

• 有序列表

• 列表之中的元素有顺序之分。

• <ol></ol>之间同样使用<li></li>

• 与无序列表的特点相同

• 自定义列表

• 常用于对名词，术语解释或描述，定义列表前无任何项目符号。

• <dl>定义描述列表 <dt>定义项目名字 <dd>描述每一个名字

• 注意

• 1.dl中只可以包含<dt>,<dd>其中两个为兄弟关系。

• 2.<dt>和<dd>个数无限制，经常一个<dt>包含多个<dd>

• textarea文本域元素

• 使用场景：内容过多，一行写不下可以使用该标签

• <textarea>标签用来定义多行文本输入的控件。

• 表单控件

• 这些表单元素就是允许用户在表单中输入或者选择的内容控件。

• <input>表单元素（输入信息）单标签

• <input>中包含一个必须属性type根据其值的不同，输入有很多的形式。

• type的属性值

• button 定义可点击按钮

• checkbox 定义复选框

• file 定义输入字段和浏览按钮没提供文件的上传

• hidden 定义隐藏的输入段

• image 定义图像形式的提交按钮

• password 定义密码字段，该字段被掩码

• radio 定义单选按钮

• reset 定义重置按钮，会清楚表单中的所有数据

• submit 定义提交按钮，将表单的数据输出给后台

• text 单行输入字段可输入文本。默认20个字符

• type类型外的属性

• name 自定义 定义input元素的名字

• value 自定义 规定input元素的值

• checked checked 规定首次出现时默认被选中的值

• maxlength 正整数 规定输入字段中的最大长度

• <label>标签

• <label>标签为input元素定义的标注

• <label>绑定一个表单元素，当点击<label>标签内的文本时，浏览器会将光标自动转到相应的表单上。即点了文字可直接可以选上一个按钮。

• <select>标签

• 下拉表单（选择地址位置时可以使用）

• 1.<select>中至少包含一对<option>

• 2.在<option>中定义select="select"时当前选项即为默认项

• 理解

• 语言的学习过程都是差不多的，学习html和学习C语言以及学习python没有什么太大的区别，最重要的都不是去听课，去看资料，当然以上两点当然也是必不可少的，在我看来最重要的永远是动手去做，做了一个表单对于我对html的理解有很大帮助，在实践中发现自身的不足，去学习后补全自身的不足，我相信这才是学习html的最好方法。