前端初体验——html基础学习

Ttang23

于 2024-08-28 23:06:30 发布

阅读量507

点赞数 21

文章标签： html 学习前端

本文链接：https://blog.csdn.net/2301_78566776/article/details/141438992

版权

1.理论

HTML（HyperText Markup Language）——超文本标记语言。是一种用于创建网页和网页应用的标准标记语言。它构成了网页内容的骨架，通过定义网页内容的结构和表现形式，告诉浏览器如何显示网页上的文本、图片、链接等元素。我理解为html起到一个构建框架，划分结构的作用。

HTML由一系列的标签（tags）构成，这些标签能够告诉浏览器如何解析页面上的内容。这些tags根据不容的规则有不同的划分。

从使用角度划分: 供显示元素供收集用户信息元素

从元素本身特性划分：块级元素内联级元素

2.实操

（1）visual studio code

我使用visual studio code写html文件，下面介绍一下我在使用VS code编写html文件前做的一些基本准备：

1.打开VS code应用的默认语言为英语。可通过侧边栏在“拓展”（如下图图标）中，搜索’Chinese‘插件。选择‘install’下载，成功后重启VScode即可启用。

（左侧拓展图标）

2.为了方便实时检查html页面制作的效果，下载Live Server插件。当在‌VScode中编辑‌html、‌CSS或Javascript文件并保存更改时，Live Server会自动在浏览器中刷新页面，让开发者立即看到最新的变化。在文件编写完成后，右键选择‘Open with Live Server’即可。"Alt+L"也可调用。

3.VScode提供一些快捷方式，帮助开发者更快的编写

！生成html文件的基本框架。

！

书写标签名称回车自动生成标签
“名称”+“{xxx}”会直接在html标签中生成文本

div{hello}

“*n”，n代表个数，可一次生成多个html元素，其中如果生成序列可使用"$$"代替序列

div{demo$$}*12

">"向html元素的下一级生成html元素

div>p>span

"+" 生成同级多个不同元素

div+p+span

“#” 生成id属性 “.” 生成class属性

div.title
div#title

（2）文档声明

"<title></title>"内设置我html文件标签页的名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

（3）常见的html标签

每个标签都会生成独立空间 id class style这三个属性所有标签都具有

br标签为换行标签

<br><br>

span标签文本标签在尖括号内书写（注意：浏览器默认把换行当作一个空格）

<span>demo</span>

h1~h6 标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

div标签竖着布局的空标签

<div>竖着布局的空标签</div>

p标签段落标签间距大

<p>段落标签</p>

a标签超链接标签

href 设置资源路径

targe 资源打开窗口方式：self本窗口打开（默认）_blank新空白窗打开

target 窗口名可以指定窗口打开

<a href="https://yiyan.baidu.com/" targe="_blank">点击跳转文心一言</a>

a标签锚点标签

定义锚点：<a name="xxx">锚点内容</a>

一组搭配使用

<a name="top"></a>

<a href="#top">点我跳转到顶部</a>

img图片标签

src：表示引用图片的资源

alt：当图片未加载成功显示alt里的文本信息

其中，相对路径和绝对路径都支持使用

路径分类：

相对路径 ：访问资源与被访问者之间的关系即为相对路径。相对路径有以下几种关系：

兄弟关系 (当前文件和图片资源在同一个文件夹) 直接访问src="name"

叔侄关系(当前文件和图片资源所在文件夹在同一个文件夹)img/PIC.jdg

表兄弟关系 (当前文件所在文件夹和图片资源所在文件夹在同一个文件夹) ../img/PIC.jpg

绝对路径：被访问的资源在磁盘中的绝对位置

 <img src="img1.jpg" alt="图片1">
 <img src="D:\桌面\img2.jpg" alt="图片2">

可在标签内设置图片大小 height 图片高 width 图片宽

 <img src="img.jpg" alt="合照" height="600px" width="400px">

ul li 无序列表

<ul>
       <li>无序列表1</li>
       <li>无序列表2</li>
       <li>无序列表3</li>
       <li>无序列表4</li>
       <li>无序列表5</li>
</ul>

ol 有序列表

type设置序号类型 type='A' 排序即为A,B,C,D......

start 开始编写的位置

<ol type="A" start="2">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
</ol>

table 表格标签

table 放表格的容器

th 单元格字体剧中加粗做表头

tr 行容器

td 普通单元格放表格的容器

border="1"表格有边框

height 表格高 width 表格宽

cellpadding 单元格的填充度

cellspacing="0"单元格之间的距离 0为挨在一起

thead 移到首行 tfoot移到尾行

rowspan 行合并

colspan 列合并

 <table border="1" cellpadding="4">
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>xx</td>
            <td rowspan="2">women</td> 
            <td>33</td>
        </tr>
        <tr>
            <td>2</td>
            <td>yy</td>
            <!-- <td >man</td> -->
            <td>25</td>
        </tr>
        <tr>
             <td>3</td>
            <td colspan="3">zz</td>
                <!-- <td>man</td> -->
                <!-- <td>57</td> -->
        </tr>
    </table>

itram 窗口标签框架标签

主要作用：嵌套其他界面

frameborder="0"去掉边框让页面更融合

name 给窗口起名字

scr 资源链接

通常和a超链接标签联合使用

<a href="https://yiyan.baidu.com/" target="oopo">点击跳转文心一言</a>
<br>
<iframe src="https://www.taobao.com/?bc_fl_src=tbsite_M9cBAtVq" frameborder="0" width="800px" height="600px" name="oopo" ></iframe>

audio 音频播放标签

controls 手动播放让显示器显示出来

autoplay 自动播放

loop 循环播放

<audio src="如果爱忘了.mp3" controls></audio>

vido 视频播放标签

controls 手动播放

aultoplay 自动播放

loop 循环播放

weight height 设置窗口大小

<video src="111.mp4" controls width="200px" height="400px"></video>

收集用户信息的标签

 <form action="">
      <!-- 收集用户信息的标签 -->
      <br><br>
      <input type="text">单行文本框
      <br><br>
      <input type="password" name="" id="">密码框

      <br><br>
      <input type="radio" name="sex" id="">男  单选框
      <input type="radio" name="sex" id="">女 单选框
      <!-- name属性值相同，视为一组选项，一组只能选一个 -->
      <br><br>
      <input type="checkbox" name="" id="">复选框 可多选<input type="checkbox" name="" id="">复选框 可多选
      <br><br>
      <input type="file" name="" id="">文件选择器
      <br><br>
      <input type="color" name="" id="">颜色选择器
      <br><br>
      <input type="date" name="" id="">日期
      <br><br>
      <input type="datetime-local" name="" id="">日期时间选择器
      <br><br>
      <input type="week" name="" id="">周选择器
      <br><br>
      <input type="range" min="0" max="100">滑块选择器 
      <br><br>
      <input type="number" min="10" max="100" value="20" step="5">数字输入框 
      <!-- value表示当前值 step表示步长 -->
      <br><br>

      <select name="" id="">
        <option >1</option>
        <option value="">2</option>
        <option value="">3</option>
      </select>下拉框
      <br><br>

      <textarea cols="30" rows="10"></textarea>多行文本框
      <br>

      <input type="button" value="普通按钮">
      <input type="reset" value="重置按钮">
      <input type="submit" value="提交按钮">
    </form>

Ttang23

关注

21
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
前端初体验——html基础学习

当在‌VScode中编辑‌html、‌CSS或Javascript文件并保存更改时，Live Server会自动在浏览器中刷新页面，让开发者立即看到最新的变化。表兄弟关系 (当前文件所在文件夹和图片资源所在文件夹在同一个文件夹) ../img/PIC.jpg。，通过定义网页内容的结构和表现形式，告诉浏览器如何显示网页上的文本、图片、链接等元素。兄弟关系 (当前文件和图片资源在同一个文件夹) 直接访问src="name""<title></title>"内设置我html文件标签页的名称。
复制链接

扫一扫