html 学习

1. 网页开发规范

网页三剑客(html css javascript)

ECMA(欧洲计算机制造协会)

W3C

2. 网页开发需要学习哪些东西

2.1 网页是由什么组成的?

网页的内容(html5)

网页的样式(css3)

网页的操作(javascript--->ecmascript5,ecmascript6)===>js

3. html的介绍

HTML称为超文本标记语言

3.1 html的发展

HTML 1.0——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时；
HTML 3.2——1996年1月14日，W3C推荐标准； HTML 4.0——1997年12月18日，W3C推荐标准；
HTML 4.01——1999年12月24日，是在HTML4.0基础上的微小改进，W3C推荐标准；
XHTML: 比html4语法要严谨
HTML5 的第一份正式草案已于2008年1月22日公布,仍继续完善。

4. 编辑器

记事本
Notepad++(只有windows版本)
Sublim(跨平台,收费)
Atom(免费跨平台比较慢)
vscode(界面美观开源免费跨平台)--->宇宙第一编辑器

5. IDE是什么?

IDE(integration Developed Environment): 集成开发环境

IDE=编辑器+编译器

eg: eclipse

6. 浏览器到底是什么?

浏览器的组成 = 外壳 + 内核(解析引擎+渲染引擎)

浏览器的本质就是一个: html css js的解析渲染执行器

7. vscode的安装

一路下一步安装即可;

安装完成之后,vscode默认是英文的,需要安装简体中文语言包;

8. 标签

标签分为单标签和双标签

单标签:

双标签:

9. 编写第一个网页

新建一个文件 .html或者.htm
使用vscode打开刚才新建的网页文件

编写一个基本的网页

<!DOCTYPE html>
<html>

<head>
    <title>我是网页title</title>
</head>

<body>我是网页body</body>

</html>

保存刚才编辑的文件
使用浏览器打开刚才保存的文件
发现浏览器可以显示我们刚才写的内容了

10. html常用标签

标题标签

h: 代表标题标签

h1~h6:字体逐渐减小

<h1>
    h1h1h1h1
</h1>

段落标签

p:段落标签

<p>一个段落</p>

文本标签

<span>java</span>

换行标签

br:换行标签

分割线标签

<hr>: 分割线

斜体标签

i: 代表斜体标签

粗体标签

strong: 粗体标签

图片标签

img:图片标签

<!-- 相对路径 -->
<!-- <img src="./images/mm.jpg"> -->

<!--绝对路径  -->
<img src="file:///F:/xzy_jiaqi/day01[html]/code/images/mm.jpg">

链接标签

<a href="http://www.baidu.com:80/index.php">点我呀!!!!!</a>

无序列表标签

<ul>
    <li>java</li>
    <li>c++</li>
    <li>python</li>
</ul>

有序列表

<ol>
    <li>java</li>
    <li>c++</li>
    <li>python</li>
</ol>

type:

1
a
A
i
I

自定义列表

<dl>
    <dt>java</dt>
    <dd>java学得好</dd>

    <dt>java1</dt>
    <dd>java1学得好</dd>

    <dt>java2</dt>
    <dd>java2学得好</dd>
</dl>

表格标签

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>

        <!-- 表格标签   tr: 行  td: 列-->
        <!--  width: 表格的宽度
            height: 表格的高度
            cellspacing:单元格具体表格的边框的距离
            cellpadding:单元格距离内容的具体
            align: 单元格内容的对齐方式
            colspan:  一列和一列的单元格合并
            rowspan: 一行的单元格和另外一行上的单元格合并
			-->
        <table border="1px"  width="500px" height="250px" cellspacing="0px" cellpadding="20px">

            <tr align="center">
                <td >java1</td>
                <td>c++1</td>
                <td rowspan="4">python1</td>
            </tr>

            <tr align="center">
                <td colspan="2">java2</td>

            </tr>

            <tr align="center">
                <td >java3</td>
                <td>c++3</td>
            </tr>

            <tr align="center">
                <td>java4</td>
                <td>c++4</td>
            </tr>
        </table>
    </body>
</html>

表单标签

<!-- 表单标签 -->

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>
        <!-- form: 提交表单使用的 -->
        <!-- <form>
</form> -->


        <!-- 按钮标签 -->
        <input type="button" > <br>
        <!-- 普通文本输入框  type:的默认值为text   placeholder: h5中新增的属性-->
        <input type="text" placeholder="请输入名称"> <br>
        <!-- 数字输入框 -->
        <input type="number"> <br>
        <!-- 密码输入框 -->
        <input type="password">
        <!-- 日期选择框 -->
        <input type="date"><br>

        <!-- 单选框:  name相同就为单选框 -->
        男:<input name="sex" type="radio">
        女:<input name="sex" type="radio">

        <!-- 文件上传标签 -->
        <input type="file">

        <!-- 与上面的  input type=button一致 -->
        <button>你再点我呀</button>

        <!-- 复选框 -->
        java: <input type="checkbox">
        java1: <input type="checkbox">

        <!-- 下拉列表  option:列表项 -->
        <select>
            <option>甘肃省</option>
            <option>陕西省</option>
            <option>河南省</option>
        </select>


    </body>


</html>

框架标签

在h5中不建议大家使用框架标签了,渲染效率不高;

frameset: 但是在h5中frameset已经被弃用了,使用iframe来代替

Iframe: 也是一个框架标签

<!-- iframe: 用来代替frameset的
src: ifame要加载的网页
width: 宽度
frameborder:  iframe的边框大小
scrolling: 是否显式滚动条 yes|no
-->
<iframe scrolling="no" frameborder="0px" height="300px" width="400px" src="http://www.baidu.com">
</iframe>

<iframe src="./ops2.html">
</iframe>

快标签

在html中快(div)标签没有实际的含义,主要用来做布局来进行使用的

html中的实体符号(了解)

其实在谷歌的内核中已经没有任何的问题了,但是万一要是IE?

&gt;   代表>
&lt;   代表<
&amp;   代表&
...还有很多去w3cschool中去找

11. html5中的新增标签

我们上面讲的这些标签在html5中都是可以使用的;

html5中的新增的标签主要是用来进行 语义化的;

article: 文章标签
header: 网站内容的头
footer: 网站的尾部
.....

12. h5中的媒体标签

<!-- src: 每题路径  controls: 控制栏  -->
<audio src="./music1.mp3" controls></audio>

<!-- 视频标签 -->
<video src="./v1.mp4" controls></video>

posted @ 2021-03-22 17:07 yle 阅读(73) 评论(0) 收藏举报

刷新页面返回顶部

yle