web前端基础学习篇(二)

web前端基础学习篇(二)通过前一篇的学习我们已经知道了学习web前端的基础概括,那么接下来我学在原本的基础上再加深对html代码的了解和学习吧。

一、常用标记学习

先来认识下列表吧

列表分为三种,有序列表、无序列表、自定义列表和下拉列表,再学习完后必须要掌握二级菜单和三级菜单还有下拉列表的操作才算过关有序列表和无序列表必须配合li来使用

ol为有序列表,ul为无序列表,列表与列表之间可以相互嵌套,相互嵌套就是为二级和三级列表的运用下面我们通过一个例子来认识他们

web前端基础学习篇(二)_第1张图片

web前端基础学习篇(二)_第2张图片

web前端基础学习篇(二)_第3张图片

dt和p标记有一个共同的特点,就是里面不能包括块元素,除非是行内块元素

学习完列表后接下来来看看图片的插入和超链接的插入方式图片插入方式主要是使用img标记来实现格式为

这里的路径又可以分为绝对路径与相对路径,总而言之一般都是用相对来说会用得比较多,因为受文件的移动影响没有绝对路径的影响大

超链接通过标记来实现

可以分为页面内链接,页面外链接(即跳转页面)页面内链接,比如说锚点(回到顶部)、链接到id页面外链接,比如说跳转到百度,跳转页面可通过target来设定在当前窗口或者是在新窗口中打开,,,

图片也是可以设置链接来点击跳转的

接下来我们来了解下合并空格,在html网页中对空格,缩进,换行不敏感同时使用多个空格缩进或者执行,页面只会把它当成是一个空格来解析不过对于这种情况需要用到特殊字符对应的转译符

web前端基础学习篇(二)_第4张图片

块和行元素的区别

块元素,例如div和p标签,占据整行是为块元素

行元素,根据内容的大小来占据宽度不会自动换行

最后来学习下表单表单主要是应用到input控件

它的属性有:text:文本框

password:密码框

hidden:隐藏域

radio:单选框

checkbox:多选框

button:按钮

reset:重置

image:图片按钮

submit:提交

select:下拉列表

textarea:文本域

from:用来管理页面上的表单元素,表单元素如果要起作用,必须要放在form标签中

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。

pattern 属性规定用于验证 input 域的模式(pattern)

placeholder 属性提供一种提示(hint),描述输入域所期待的值required 属性规定必须在提交之前填写输入域(不能为空)

autofocus 属性规定在页面加载时,域自动地获得焦点

fieldset 元素可将表单内的相关元素分组

通过此篇文章的学习可以学会列表,链接、行块元素和表单标签的运用

你可能感兴趣的:(web前端)