html

无标签
前端
发布日期:   2021-11-15
文章字数:   1.9k
阅读时长:   8 分

0. xml约束

  • DTD约束
  • Schema约束

1. 网页的组成

网页 = 网页内容(html)+网页的样式(css)+网页的交互(javascript)

html+css+javascript(js):称为网页设计的三剑客

2. Html

html: 超文本标记语言

可以表示文本,图片,音频,视频等媒体的标记语言;

3. 编写第一个网页

  • 新建一个文件,扩展名以 .html 或 .htm结尾,建议使用.html结尾

  • 编写文件内容

    1
    2
    你好
    <h1>新卓越</h1>

  • 使用浏览器打开

    image-20211115191617861

4. 编写网页的工具

  • windows自带的记事本
  • notepad++
  • vscode(微软,开源,免费)
  • hbuilderx
  • webstorm(社区版 商业版)

5. html中的标签

在html中有单标签和双标签,这和xml很相似,但是html的语法是不严谨的(历史原因造成的);

xml中标签的写法:

1
2
3
<book>xxx</book>
<my/>
#xml中无论单标签还是双标签必须要闭合的

html中的标签的写法:

1
2
3
<h1>xxx</h1>
<br/>
#在html中标签可以不闭合,但是建议都写成闭合

6. html的版本

①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。

②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。

③HTML 3.2：1997年1月14日，W3C推荐标准。

④HTML 4.0：1997年12月18日，W3C推荐标准。

⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。

⑥XHTML(改进微小) 语法严谨的html,遵循xml的语言

⑦HTML 5：HTML5是公认的下一代Web语言(当前最主流的html版本),简称为h5

7. html网页的结构组成

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>  <!--html的声明部分-->
<html>  <!-- html的根元素 -->
    <head> <!-- html头部 -->
        <meta charset="utf-8"/>
    </head>
    <body>  <!-- html的体部 -->
        <h1>新卓越</h1> 
    </body>
</html>

head标签中一般写: 网页的元信息,样式文件;

body标签中一般写: 网页的内容

8. html的结构快速生成

vscode: html:5

10.WebStorm创建web前端项目

11. Html中的常用标签

  • 标题标签

    1
    2
    3
    4
    5
    6
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

  • 文本标签

    1
    <span>文本标签</span>

  • 换行标签

    1
    <br/>

  • 分割线标签

    1
    <hr/>

  • 段落标签

    1
    <p>文本内容</p>

  • 超链接标签

    1
    2
    <a href="http://www.baidu.com">点我呀</a>
    注意: href属性里面写的是跳转的内容

  • 图片标签

    1
    <img src="../images/mm.jpg" title="mtitle"  alt="malt">

    注意: ./ 代表当前文件所在目录 ../ 代表当前文件所在目录的父目录

  • 音频标签

    1
    2
    <audio src="audio/1.mp3" controls></audio>
    注意: html中的属性名等于属性值的时候,属性值和等号可以不写,直接写属性名即可;

  • 视频标签

    1
    <video src="./videos/02.mp4" controls></video>

  • 列表元素

    • 无序列表

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <!--无序列表
          type="disc" 实心圆(默认)
          type="circle" 空心圆
          type="square"  方块
      -->

      <ul type="square">
          <li>java</li>
          <li>c++</li>
          <li>c#</li>
      </ul>

    • 有序列表

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      <!--ol: 有序列表
          type="1"  阿拉伯数字序号(默认)
          type="a"
          type="A"
          type="i"
          type="I"

      -->
      <ol type="I">
          <li>java1</li>
          <li>java2</li>
          <li>java3</li>
          <li>java4</li>
          <li>java5</li>
      </ol>

    • 自定义列表

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <!--自定义列表-->
      <dl>
          <dt>dt1</dt>
          <dd>dd1</dd>

          <dt>dt2</dt>
          <dd>dd2</dd>

          <dt>dt3</dt>
          <dd>dd3</dd>
      </dl>

  • 字体标签

    1
    2
    新卓越<font color="red">计算机</font>
    注意: 字体标签已经不推荐使用了,因为和样式相关的标签完全可以用css样式表来完成

  • 粗体标签

    1
    新逐月<strong>卓越</strong>

  • 斜体标签

    1
    <i>卓越2</i>

  • 表格标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <thead>
            <tr align="center">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </thead>

        <tbody>
            <tr align="center">
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr align="center">
                <td>9</td>
                <td colspan="3">10</td>
            </tr>
        </tbody>
    </table>

    注意:
    width: 表格的宽度
    height: 表格的高度
    border: 表格的边框
    cellpadding: 单元格距离内容的间距
    cellspacing: 单元格具体table的间距
    align: 单元格中的内容的对齐方式  left|center|right
    rowspan: 行合并(竖直方向的合并)
    colspan: 列合并(水平方向的合并)

12. 表单标签

我们通常在和服务器端交互的时候会使用到表单元素;

表单元素一般会放在 form标签中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>


<!--

    method:表单的提交方式  默认为GET
    enctype: 默认编码为普通表单 application/x-www-form-urlencoded
    action: 表单的提交地址(一般写的是服务器的地址)
    readonly: 只读模式

-->
<form action="#" method="get" enctype="application/x-www-form-urlencoded">
    用户名:<input type="text" value="admin" placeholder="请输入用户名">
    <hr>
    密码: <input type="password" placeholder="请输入密码">
    <hr>
    年龄: <input type="number" placeholder="请输入年龄">
    <hr>
    出生日期: <input type="date">
    <hr>
    性别: 男<input name="sex" type="radio" checked> 女: <input name="sex" type="radio">
    <hr>
    爱好: 抽烟 <input type="checkbox"> 喝酒 <input type="checkbox"> 看电视 <input type="checkbox">
    <hr>
    其他信息: <textarea placeholder="请输入其他信息"></textarea>
    <hr>

    居住城市: <select>

    <option>西安市</option>
    <option>成都市</option>
    <option>武汉市</option>
    <option>兰州市</option>
</select>

    <hr>

    <input type="button" value="点我提交">
    <button type="submit">点我再次提交</button>
</form>
</body>
</html>

14. 框架标签

1
2
3
4
5
6
7
8
9
10
11
<!--
    src: 框架标签要呈现的内容
    frameborder:  0px  代表无边框   10px: 代表10个像素的边框
    width: iframe的宽度
    height: iframe的高度
    scrolling="no":代表禁用滚动
-->
<iframe scrolling="no" src="ops1.html" frameborder="1px" width="120px" height="200px">

</iframe>

15. html中占用空间最小的标签

i: html中占用空间最小的标签

16. html中的div标签

div: 快标签

一般用来做网页布局的

17. html5中新增的标签

1
2
3
<header>头部</header>
<article>内容</article>
<footer>尾部</footer>
文章作者: Yang Shiyu
文章链接: https://yangshiyu52.github.io/2021/11/15/qian-duan-html/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Yang Shiyu !
无标签
赏
  目录