HTML学习之路

HTML学习之路

1️⃣学习前端知识的第一步，学习HTML!

初始代码

1
<!DOCTYPE html>

最开始都需要这两行代码

标签

html标签

1
2
3
4
<!DOCTYPE html>
<html>
...
</html>

html标签用来限定整个文档的开始和结束

head标签

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
    ...
</head>
</html>

head标签用来描述文档的信息，不会给用户看

body标签

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
...
</body>
</html>

body标签用来定义文档主体，包含所有内容，直接展示给用户

tittle标签

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
    <title>My website</title>
</head>
</html>

title标签会显示在浏览器的标题栏中，是head标签中唯一要求包含的东西，写head必须写title

meta标签

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My website</title>
</head>
</html>

meta标签用于描述一个HTML网页的属性，关键词等。比如UTF-8就是编码格式

标题标签

标题通过 h1-h6进行定义

h1最大，h6最小

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

**生成h1~h6快捷键：h$*6**

标题应该根据内容去区分

标题摆放的位置

通过在标签中添加属性 align=”left | center | right”，默认是左

1
<h1 align="center">一级标题</h1>

段落、换行、水平线标签

段落标签

通过p来定义段落

换行

通过br来换行

1
<p>这个段落可以<br>换行</p>

水平线

通过hr来创建水平线

1
<hr color="" width="" size="" align=""/>
  1. color: 水平线的颜色
  2. width: 水平线长度
  3. size: 水平线的高度
  4. align: 水平线对齐方式，可取left | right

图片标签

通过img标签来定义图像

1
<img src="" alt="" title="" width="" height="">
  1. src: 路径
  2. alt: 规定图像的替代文本(图片显示不出来时候显示的文本)
  3. width: 图片宽度
  4. height: 图像高度
  5. title: 鼠标停在图片上给出的提示

路径

绝对路径

如

1
<img src=""C:\Users\Jack1\Desktop\rick.jpg"">

相对路径

  1. 子级关系: /
  2. 父级关系: ../
  3. 同级关系: ./

网络路径

网络地址

超文本链接标签

使用a来定义超文本链接

超链接可以是一个字，一个词，一句话，一幅图。点进这个内容跳转新的地方

1
<a href="url">链接文本</a>
1
2
3
<a href="url">
    <img src="" alt="" title="" width="" height="" >
</a>

文本标签

标签 描述
em 着重文字
b 粗体文字
i 斜字体
strong 加重语气
del 删除字
span 元素没有特定的含义

文本标签可以嵌套在段落 p 标签中的

列表标签

有序列表

有序列表标签始于 ol 标签，每个列表项始于 li 标签

1
2
3
4
<ol>
	<li>第一项</li>
	<li>第二项</li>
</ol>

结果将是：

1.第一项

2.第二项

属性

    的属性有

    1. 1 表示用数字标号(1,2,3,…)
    2. a 表示用小写字母标号(a,b,c,…)
    3. A 表示用大写字母标号(A,B,C,…)
    4. i 表示用小写罗马数字标号(i,ii,iii,….)
    5. I 表示用大写罗马数字标号(I,II,III,…)
    1
    2
    3
    4
    <ol type="1">
    	<li>第一项</li>
    	<li>第二项</li>
    </ol>

    嵌套

    有序列表可以进行嵌套

    1
    2
    3
    4
    5
    6
    7
    8
    <ol type="A">
        <li>第一项</li>
        <ol>
            <li>第一小项</li>
            <li>第二小项</li>
        </ol>
        <li>第二项</li>
    </ol>

    无序列表

    无序列表标签始于 ul 标签，每个列表项始于li标签

    1
    2
    3
    4
    <ul>
    	<li>第一项</li>
    	<li>第二项</li>
    </ul>

    结果将是：

    ·第一项

    ·第二项

    属性

    ul 的属性有

    1. disc 默认实心圆
    2. circle 空心圆
    3. square 方块
    4. none 不显示

    嵌套

    同有序列表一样，可以嵌套

    应用场景

    导航效果

    快速生成ul+li的布局: ul>li*3 (数字可调整)

    表格

    标签分为：

    表格: table

    行: tr

    列: td

    快速生成表格结构: table>tr*2>td{单元格}

    属性

    1. border: 表格边框
    2. width: 表格宽度
    3. height: 表格高度
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <table border="1" width="100" height="100">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

    合并单元格

    水平合并: colspan

    1
    <td colspan="2">1 2</td>

    水平合并，保留左边，删除右边

    垂直合并: rowspan

    1
    <td rowspan="2">4 5</td>

    垂直合并，删除下边，删除上边

    表单

    通过 form 来定义表单

    表单由容器和控件组成。一般拥有用户填写信息的 输入框 和 提交按钮 等。输入框和按钮叫控件，表单就是容器，能容纳各种各样的空间

    1
    <form action="url" method="get|post" name="myform"></form>
    1. action 服务器地址
    2. name 表单名称
    3. method: 数据提交方式，分为get,post
      1. 提交的数据的url，get可以看到，post看不到
      2. get一般用于提交少量数据，post用来提交大量数据

    表单元素

    表单包含三个基本组成部分: 表单标签，表单域，表单按钮

    1. 表单标签
    2. 表单域
    3. 表单按钮

    文本框

    通过 input type=”text 标签定义

    1
    2
    3
    <form>
    	First name:<input type="text" name=Firstname>
    </form>

    密码框

    通过 input type=”password” 标签定义

    1
    2
    3
    <form>
    	password:<input type="password" name="pwd">
    </form>

    提交按钮

    通过 input type=”submit” 标签定义

    1
    2
    3
    <form>
    	<input type="submit" value="submit">
    </form>

    块元素和内联元素

    块级元素 内联元素
    块元素会在页面独占一行(自上向下垂直排列) 内联元素只占自身大小
    可以设置width,height属性 无法设置width,height属性
    块级元素一般可以包含行内元素和其他块级元素 内联元素包含内联元素不包含块级元素

    常见块级元素

    div, form, h1~h6, hr, p, table, ul 等

    常见内联元素

    a, b, em, i, span, strong 等

    行内块元素(不换行，能设置宽高)

    button, img, input 等

    H5新增标签

    预备知识

    div容器元素

    传统页面布局

    H5新标签

学习之路
#前端
HTML学习之路
http://jack-constantine.github.io/2023/10/05/HTML学习之路/
作者
JackConstantine
发布于
2023年10月5日
许可协议