HTML 入门与实战-阿里云开发者社区

开发者社区> 开发与运维> 正文

HTML 入门与实战

简介:

这个是我在云栖社区第一次发博客,不明白为啥子有些编辑排版无法正常使用,有点小失落,比方说这个:
__20200405123400
还有确定这个说的是同一款编辑器吗?云栖社区Markdown指南【2018版】
29c9ff7b3109b346aa71ed5552dc93afad4d70d9
闲话不多扯开始今天的分享:

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>《HTML 入门与实战》课程笔记</title>
    </head>
    <body>
        <h2>课程目录:</h2>
        <h3>第一章/web基础</h3>
        <ul>
            <li>课时1:常见浏览器</li>
            <li>课时2:浏览器内核</li>
            <li>课时3:web标准</li>
        </ul>
        <h3>第二章/html入门</h3>
        <ul>
            <li>课时4:html初识</li>
            <li>课时5:html骨架</li>
            <li>课时6:我的第一个页面及其标签简介</li>
            <li>课时7:猪八戒版骨架</li>
            <li>课时8:什么是标签及其分类</li>
            <li>课时9:标签嵌套和并列关系</li>
            <li>课时10:简单小测试</li>
            <li>课时11:开发工具sublime</li>
            <li>课时12:sublime生成html骨架</li>
            <li>课时13:doctype文档类型</li>
            <li>课时14:字符集简介</li>
            <li>课时15:标签的语义化及标题标签</li>
            <li>课时16:段落标签和水平线标签</li>
            <li>课时17:课堂案例-新闻页面</li>
            <li>课时18:换行和div span标签</li>
            <li>课时19:文本格式化标签</li>
            <li>课时20:标签属性</li>
            <li>课时21:图像标签</li>
            <li>课时22:链接标签</li>
            <li>课时23:锚点定位</li>
            <li>课时24:base标签</li>
            <li>课时25:特殊字符</li>
            <li>课时26:注释标签</li>
            <li>课时27:相对路径一</li>
            <li>课时28:相对路径二<li>
            <li>课时29:无序列表的使用</li>
            <li>课时30:无序列表注意事项</li>
            <li>课时31:有序列表</li>
            <li>课时33:自定义列表</li>
        </ul>
    </body>
</html>

相关笔记:
1-1常见的浏览器:ie、chrome、Safari、opera、firefox(代码是经过浏览器内核渲染展示出来的界面)
1-2浏览器内核:渲染引擎,js引擎

  • IE:trident
  • firefox:trident
  • Safari:gecko
  • chrom:blink
  • opera:presto
    360_20200404215941108

360_20200404220220620
1-3WEB标准:w3c标准制定/结构,表现,行为(html结构、css样式、js行为)

  • html结构:使内容更清晰,有逻辑性
  • css表现:用于修饰内容的样式
  • js行为:内容的交互及行为效果
    360_20200404220727677

1-4初识html:html是什么?超文本标记语言,展示网页元素,图片,文本,链接等!换而言之,用文本标记的带有特殊字符的标签
1-5html骨架html语法格式

<head>
<title></title>
</head>
<body></body>
</html>

1-6第一个页面及其标签简介
1-7猪八戒版骨架记忆法
360_20200404225021129
1-8什么是标签及其分类,网页组成元素,通过代码展示出来的,代码标签分为单标签和双标签;标签包裹元素,通过浏览器内核渲染展示(strat tag)开始标签,结束标签(end tag)
1-9标签的嵌套和并列关系:父子关系
1-10简单小测试:总结/如果2个标签之间是嵌套关系,子元素身缩进一个table键/并列关系
1-11开发工具:sublime文艺范,dw,hx、wb
360_20200404225617567
1-12sublime生成html框架:通过!或者html:5,然后table键
1-13doctype文档类型/本课程h5
1-14字符集简介

  • gb2312简体中文,6763汉字
  • BIG5繁体中文,港澳台等用
  • GBK简繁
  • utf-8包含所有
    1-15标签语义化及标题标签/标签的含义:排版标签,文本,图像,链接,排版标签用来网页布局,有标题,段落

360_20200404231624984
1-16段落和水平线
1-17课堂案例-新闻页面
360_20200404232744625
1-18换行和div及span标签
1-19文本格式化标签
1-20标签的属性,属性就是特征
360_20200404235113389
1-21图像标签
1-22链接标签
1-23锚点定位
1-24base标签base可以设置整体链接的打开状态

1-25特殊字符
360_20200404234502602
1-26注释标签
1-27相对路径一
1-28相对路径二
360_20200405004453572
360_20200405005625605
相对路径/绝对路径总结:

  • html与图片同一个文件夹 time.jpg
  • html下一级图片,中间隔一层 images/time.jpg
  • html上一级图片/先翻出来 ../images/time.jpg 如果有多个层,前面添加../
  • 绝对路径,分为本地图片和网络图片,本地,从盘符开始算起,比方:C:UsersAdministratorDesktop新建文件夹 网络图片类似这样https://yqfile.alicdn.com/dfb80b22c483698f031f2e5859e9335b.png id,class复制图片地址
    1-29无序列表的使用:

1-30无序列表的注意事项:
1-31有序列表:
1-32四大名著案例
1-33自定义列表:
结尾:本课程学习来源https://edu.aliyun.com/course/1742 感觉分享还不错话,留个赞再走吧,毕竟码字分享不易!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章