html+css+js 零基础入门系列课笔记(第一天)螺钉课堂

html:超文本标记语言,搭建网页结构 css :层叠样式标,修饰html样式 让网页更好看 js :负责页面的交互效果,网页和用户的互动

2019年1月13日

1 前端工程师是做什么的?

页面,和网站相关的页面的开发工作
前台     页面展示(html css js )
后台     数据 (php java)
最后形成⬇️
web应用 前台+后台

2 需要学习哪些知识和工具?

工具:ps(图片处理) ide(开发工具) markdown(标注工具)chrome(浏览器)
语言:html、css、javascript(js)

3 html、css、javascript是干什么的?有什么用?

html:超文本标记语言,搭建网页结构
css :层叠样式标,修饰html样式 让网页更好看
js  :负责页面的交互效果,网页和用户的互动

4 开发环境

ide(集成开发环境 写代码工具 推荐:hbuilder)
浏览器(chrome、safari、ie、firefox)

5 html文档结构

a.html 超文本标记语言 (后缀是 html)
b.文档格式  通常成对出现
    <html>
        <head>
        <>title>这是标题</title>
        </head>
        <body>
        这里是内容,hello world!!
        </body>
    </html>

6 html元素之间的关系

html元素包括:开始标签(<html>)+元素内容(内容)+结束标签(</html>)
html元素关系:父子关系、兄弟关系、子孙关系、后代关系 
    html(根 祖先)
    head                            body  (两个儿子,儿子之间是兄弟)
    meta(中文编码类别) title...       div  span...   (祖先的子孙)
特点:html可以无限嵌套,书写空格写

总结:
    html:超文本标记语言,超文本(比纯文本功能丰富),标记(标签),整个html文档都是由标签组成的。
    如何能够学好html? 掌握标签的名称与功能。相当于26英语字母

7 标签

注释:     方便后来者阅读代码的只显示在代码界面的标记 (快捷键:ctrl+/)
实体字符:   代替"<"等字符的一种代替符
            (目的是为了在网页显示"<"等字符,而不是让计算机识别为代码。 如: "<"实体字符为"<")

名称         作用
html        标签的外框  <html>  </html>
head        头部,头部的内容包含在当下  <head>  </head>
meta        文档编码,类似于密码本  <meta charset="utf-8">
titel       标题,位于头部里面的页面标题  <titel>  </titel>

body        身体,内容部分  <body>  </body>
div         内容中的样式容器,容器里可写入样式 颜色大小等  <div>  </div>
span        与div差不多,编写两个div后会各占一行,而span编写的两行会在一行  <span>  </span>
h1-h6       标题的不同尺寸,数值越小字体越大,最小到6 <h1>  </h1>
p           段落标签 <p>  </p>

hr          表示水平分割线 >hr/>
ul li       表示无序列表,可使用代码把序号隐藏  <ul li>  </ul li>
i/em        将字体变成 斜体  <i> </i> 或者 <em>  </em>
strong      加粗  <strong>  </strong>
br          换行,为单标签  <br/>

img         图像标签,引入图像 <img="./img.jpg"/>
            属性:特征,在开始标签后面加入src图片地址属性
            图像的地址:绝对地址: 在硬盘上的位置 c:/html/head.jpg  缺点 可移动性差
                      相对地址: 参照物-参照当前所写的文件的位置
                               1.同级     图片与当前所写文件在同一目录下,直接写图片名字 ./head.jpg
                               2.下一级   从同级开始找  ./img/head.jpg  ./文件夹/文件夹/.../head.jpg
                               3.上一级   图片在当前html文件的上一级  在当前目录前加../   ../../img/head.jpg     
            alt 属性: 图片不在时标示这里有个图片的文字  例: <img="./head.jpg" alt="这是一个图片"/>
            title 属性: 当鼠标移动到图片时提示用户的文字  例: <img="./head.jpg" title="这是张图片"/>

a           超链接,链接一切资源(包括网址 视频 文字 等等)  <a href="http://haiei.cn"> 需时研究所</a>
            href 属性:    链接的地址
            target 属性:_blank  表示新建一个标签页显示超链接的内容,不加该属性会覆盖原链接  <a href="http://haiei.cn" target="_blank"> 需时研究所</a>

html 课程小结

1 html是什么? html有什么用?
    是一种文档编写格式,一类代码的规则。 作用为:为网页搭建框架,类似于房梁骨骼。
2 如何使用html?
    a.html结构 简单来说就分为 头部和身体和尾部三个部分,在这三体上做文章。
    b.html特点 元素之间的关系 (层叠关系:父子、兄弟、子孙、后代)(对称存在(<div> </div>:内容容器)或某些单独出现(<hr/>:换行代码))
    c.注释、实体字符  (快捷注释方法:ctrl+/)(注释就是便于后来者查看代码的说明 不显示与用户,仅显示在代码页面)(实体字符代替"<"等字符的一种代替符)
                    (目的是为了在网页显示"<"等字符,而不是让计算机识别为代码。 如: "<"实体字符为"<")
    d.常用标签(重点) 标签的名称 功能   (如7所学)
打赏 帮助到大家 3

共有 0 条评论

You must be logged in to post a comment.