百度前端学院第一天笔记

第一天笔记

一些说明,我希望自己可以一个月走完百度前端科技学院的课程,我会坚持每天做作业,希望我能坚持下来。这个笔记我会放在两个地方,我的博客园sogeisetsu.cnblogs.com和我的GitHubhttps://github.com/sogeisetsu/suy-ife

我对前端的理解

我对前端浅显的理解就是显示在用户面前的页面

前端的语言

  • html 这是最基础的,好比一个人的身体
  • css 这个好比一个人的衣服
  • JavaScript 这个好比一个人的动作

我觉得一个优秀的前端页面就像一个人,他必须是鲜活的,他有自己的身体(html)有自己的骨架,但他不应该赤身裸体的站出来,他至少应该穿上衣服(css),但衣服就足够了吗?答案是否定的,他作为一个鲜活的人应该是动态的,他有自己的动作和表达(JavaScript)才算是鲜活的。

第一天学的几个标签

基本骨架

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

头部

  • <tittle></tittle>是标题
  • <meta>meta标签描述了一些基本的元数据。

标签- 使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定义网页作者:
<meta name="author" content="Hege Refsnes">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

<meta charest="UTF-8">用来说明编码格式

  • <link rel="stylesheet" type="text/css" href="mystyle.css"> 指定css文件

身体

先说几个容易记混的

<abbr tittle="1111">111</abbr>
<acronym title="这个也可以缩写">112</acronym>用来缩写

<bdo dir="rtl">文字反向</bdo>

<img src="001.jpg" alt="垃圾" width="600" >alt表示图片加载不出来时候的字。

👇这是我尝试的标签。这是预览页面

<!DOCTYPE html>
<html>
<head>
    <title>the first try about w3c</title>
    <link rel="stylesheet" type="text/css" href="001.css">
    <meta  charset=utf-8″>
    <meta name="author" content="苏月晟">
    <meta name="keywords" content="提,111">
    <meta http-equiv="refresh" content="30">
</head>
<body>
    <a href="#c4">跳转</a>
    <h1>hello,world</h1>
    <hr>
    <p ><a id="c4">hello</a><br>world</p>
    <!--注释-->
    <p>
        床前明月光,<br>
        疑是地上霜。<br>
        举头望明月,<br>
        低头思故乡。<br>
    </p>
    <p>你好</p>
    <br>
    <abbr title="这个可以缩写">123</abbr>
    <br>
    <acronym title="这个也可以缩写">112</acronym>
    <br>
    <code>
        print("hello world") # code命令可以打印代码。
    </code>
    <br>
    <bdo dir="rtl">文字反向</bdo>
    <hr> 
    <a href="https://www.cnblogs.com/sogeisetsu/">我的博客</a>
    <br>
    <img src="001.jpg" alt="垃圾" width="600" >
    <hr>
    <table class="tabl" border="1" >
        <tr>
            <th>姓名</th>
            <th>性别</th>       
        </tr>
        <tr>
            <th>what is your name</th>
            <th>join</th>
        </tr>
    </table>
    <ul>
        <li>hello</li>
        <li>world</li>
    </ul>
    <ol>
        <li>nihao</li>
        <li>世界</li>
    </ol>
    <dl>
        <dt>第一级菜单</dt>
        <dd>第二级菜单</dd>
        <dt>milk</dt>
        <dd>morning</dd>
        <dd>afternoon</dd>
    </dl>

</body>
</html>
posted @ 2019-09-27 15:05  sogeisetsu  阅读(179)  评论(0编辑  收藏  举报