H5网页设计基础,一位在校大学生的学习笔记以及体会心得(一)

哈喽!大家好,我是一个热爱编程的在校大学生,虽说不是纯正的软件专业,但也多多少少对编程能力有一定的要求吧,再加上我本人比较喜欢编程这门课程(虽说还是一个地地道道的入门级小白),所以我在老师和学长的推荐下加入了博客园这个大家庭,希望可以提升自己,也提供一些力所能及的帮助。看腻了那些高深莫测的文章,来这里寻找一下刚刚入门时的新鲜感也是不错的选择,嘿嘿。

H5这门语言呢,我从大一就开始学习,包括课上以及课下自学的,到现在我们的实训课使我再一次接触到了这门打开我编程思想大门的课程。所以,我准备在博客园分享一些基础的笔记以及我自己的学习心得,这些文章可能比较新手向,一些代码可能比较繁琐,还希望大佬们多多指点,让我也能进一步认识到自己的不足并加以改正。

 

先来说说H5的一些基础标签吧

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>

            
</body>
</html>

1,上面就是一个H5的基本框架了,(!DOCTYPE html) 是html5的标识,告诉浏览器这是按照html5的标准写的代码,因为代码是浏览器能够听懂的语言,我们想让浏览器按照我们的要求实现效果,就必须使用代码来让它听懂并按照我们的要求去做

2,<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分: <link>, <meta>, <script>, <style>, 以及 <title>,这些标签咱们以后用到再说。

<title> 定义文档的标题,它是 head 部分中唯一必需的元素。

需要注意的是,head一般放置在紧跟随html标签之后,body标签之前。

3,meta charset="utf-8" 是元标签,charset是编码格式,"utf-8"是现代最常用的字符集,绝大多数的语言都收集在里面。

4,<meta name="viewport" content="width=device-width, initial-scale=1">这行代码简单来说就是一个基础的页面定义吧

width:可视区域的宽度,值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放,no 禁止缩放。
5,title,顾名思义就是标题题目,这里是指浏览器标签页上的文字。
6,body,我们可以联想到躯体,这里就是代码的填充内容部分了,比如文字,超链接,图片等等。
OK我们说完了整个的html的构架,下面可以看看一些具体的基础标签。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我是标题</title>
</head>
<body>
<div>我是一个div</div>
<img src="">
<ul type="">
    <li>我是无序列表</li>
        <li>我也是无序列表</li>
            <li>天哪我还是无序列表</li>
</ul>
<ol type="">    
    <li>我是有序列表</li>
        <li>我也是有序列表</li>
            <li>没想到吧我也是</li></ol>
            <p>下面是text框</p>
            <input type="" name="11">
            <p>下面是数字框</p>
            <input type="number" name="11">
            <p>下面是密码框</p>
            <input type="password" name="">
            <p>下面是单选框</p>
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <p>下面是复选框</p>
            <input type="checkbox" name="">男
            <input type="checkbox" name="">男
            <input type="checkbox" name="">男
            <p>下面是按钮</p>
            <input type="button"name="">我就是按钮</input>
            <p>下面是a(超链接)标签</p>
            <a href="超链接">可以点击的文字(跳转到超链接)    
            </a>
</body>
</html>    

让我们一个一个的来看:
1,div标签,可定义文档中的分区或节,类似于在页面中分隔开一块区域用来填充div的内容,div的样式可以进行自定义。
2,img标签,在网页中嵌入一张图片,注意,这是通过图片链接进行嵌入的,src后面中的内容就是引用的图片的链接。img标签十分方便,我们可以在链接后面直接加入属性进行定义,如:height,width来改变图片的高和宽。
3,ul标签,这是一个无序列表,列表标签一般都伴随着li标签,无序列表会生成每行文本前带有一个小圆点(默认)的列表,这个小圆点是可以更换的,在type中可以更改,square是小方点circle是空心小圆点,不过不建议使用。
4,ol标签,说完了无序列表,这个就是有序列表,有序列表会生成每行文字前带有自动排好的序号的列表,默认是从1开始往后排列,可以在type中更改a,b,c....等等。也可以通过加上reversed来使升序变为降序。
5,input标签,<input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段(text)、复选框(checkbox)、单选按钮(radio)、按钮(button)等等。
6,a标签,<a> 标签定义超链接,用于从一张页面链接到另一张页面。<a> 元素最重要的属性是 href 属性,它指示链接的目标。
以上就是一些简单的基础H5标签啦,代码可以复制下来看一看页面效果。我在这里做一个分享,有什么整理出错或者不足的地方,还请多多指教。
如果您喜欢这篇文章,请留下一个宝贵的赞,衷心感谢啦。

上一篇:RuiJi Scraper基础 – RuiJi表达式模型


下一篇:jQuery事件操作