02_前端三大件HTML

文章目录

  • HTML用于网页结构搭建
  • 1. 标签
  • 2. 客户端服务器交互流程
  • 3. 专业词汇
  • 4. html语法细节
  • 5. 安装VSCODE安装插件
  • 6. Live Server插件使用
  • 7. 标题&段落&换行&列表
  • 8. 超链接标签使用
  • 9. 图片
  • 10. 表格的写法
  • 11. 表单标签*(重点)
  • 12. 下拉框
  • 13. 页面布局标签
  • 14. 块元素和行元素的区别

HTML用于网页结构搭建

1. 标签

双标签

<p>HTML is a technllogy</p>

单标签

<inpup>HTML is a technllogy

属性

<a href="http://www.xxx.com">

href是属性名，网址是属性值

标签整体结构

<!DOCTYPE html>   文档声明
<html>
	<head>
		1.字符集
		2.css
		3.js
		4.其他
		<title><>
		<meta charset="utf-8">单标签，指定字符集的
	</head>
	
	<body>
        1.定义展示内容
	</body>
</html>

关于字符集，客户端要和服务器保持一致

2. 客户端服务器交互流程

1.html文件一般放到服务器上，
2.客户端访问网页：数据由服务器相应到客户端上，然后由客户端进行解析并展示
3.html文件是浏览器负责解析和展示

在这里插入图片描述

3. 专业词汇

标签 tag

属性 attribute

文本 text

元素 element 一个完整的开始到结束的标签内容

<title>第一个页面</title>

4. html语法细节

1.html标签有且仅有一个

2.单标签格式 尾部加/

<meta type="utf-8" />

3.嵌套只能层层嵌套

4.属性必须有值，属性值必须加双引号

5.不区分大小写，但是成对标签需要统一格式

6.强行自定义标签无效

5. 安装VSCODE安装插件

在这里插入图片描述

在这里插入图片描述

快捷创建子目录

在这里插入图片描述

6. Live Server插件使用

模拟的小型服务器

快速创建标签基本结构

在这里插入图片描述

在这里插入图片描述

html文件写好以后，直接点击golive即可

在这里插入图片描述

在这里插入图片描述

此服务器有实时加载功能

live server建议每次测试完文件后关闭go live服务器

7. 标题&段落&换行&列表

   <!-- 1标题标签 -->
    <h1>hello vs  qidong</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>

    <!-- 2.段落标签 -->
    <p>这是一个段落标签</p>
    <p>这是一个段落标签xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxx</p>
        <!-- 不会自动换行，除非加入p标签 -->
    <p>这是一<p>根据p标签换行</p>个段落标签</p>
    <p>这是一个段落标签</p>

    <!-- 3.br标签实现换行 -->
    <p>此处br标签<br>一段落标签xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx个p标签</p>
    
    <!-- 4.hr实现换行标签，带分割线的换行 -->
    <p>此处hr标签<hr>一段落标签xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx个p标签</p>

8. 超链接标签使用

       超链接标签a
            a标签属性
                href       定义跳转url
                target     定义资源打开方式
                    _self       表示self页面打开
                    _blank      空白,表示新打开一个空白页面

点击之后进行跳转标签

在这里插入图片描述

绝对路径首级目录是工程名

9. 图片

img标签
            src     定义图片url
            title   鼠标选中时的提示文字
            alt     图片加载失败提示文字

在这里插入图片描述

10. 表格的写法

        thead   表头
        tbody   表体
        tfoot   表尾
        三者都可省

        表格标签table
            thead   表头
            tbody   表体
            tfoot   表尾
                tr  表示表格一行(table row)
                    td  行中的一个单元格
                    th  自带加粗效果的td

表格的设计样式有点多，为了简化，有方便的写法

tr>td>hd*3

在这里插入图片描述

<table border="1px" style="margin: 0px auto; width: 300px;">
        <thead>
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>zhangsan</td>
                <td>100</td>

            </tr>
            <tr>
                <td>2</td>
                <td>lisi</td>
                <td>100</td>

            </tr>
            <tr>
                <td>3</td>
                <td>wangwu</td>
                <td>100</td>

            </tr>
        </tbody>
        <tfoot></tfoot>

在这里插入图片描述

tr	--table row
td	--table data
th  --table header data

原有表格进行修改，添加一列，与常规不同

在这里插入图片描述

思路：让body的 某一行的结尾单元格向下扩充，占用其他单元格

在这里插入图片描述

使用rowspan(span有占用的意思，占用行，也就是向下扩充)

在这里插入图片描述

也就是span三个row的意思

进阶，设计更为复杂的表格

在这里插入图片描述

按照原来的思路

在这里插入图片描述

如何将空白处补齐

合并单元格？扩充单元格？

colspan
span多少个cols
"向右占用多少个列"

在这里插入图片描述

11. 表单标签*(重点)

表单标签是前端服务器与后端进行数据交互的一种方式；

表单项目标签一定要定义name属性，该属性用于明确提交时的参数名表单项还需要定义value属性,该属性用于明确提交时的实参的;

1.标签及属性

    <form action="05_Wellecom.html" method="post">
        <input type="text" name="username" value="小明"/>
        <br>
        <input type="password" />
        <br>
        <input type="submit" value="登录">
        <input type="reset" value="清空">
    </form>

2.常见属性及解释

​ action 定义数据提交地址(相对路径,绝对路径,接口地址)

​ method 数据提交方式(GET/POST)

	        --GET

    ​          参数会以键值对的方式放在url后面提交中间拿&进行连接

    ​          url?key=value&key=value&key=value

    ​          缺点:敏感信息不能直接暴露,不安全,地址栏有限制,不能提交文件

      	  --POST

    ​          参数不放到url后面,数据不会直接暴露在地址栏上,相对安全

    ​          数据单独打包,通过请求体发送,提交的数据量比较大,可以提交文件,功能强大效率略低

3.常见类型及解释

type

​ -text

​ -password

​ -submit 提交按钮

​ -reset 重置按钮

​ -radio 单选框

​ -checkbox 复选框

​ -hidden 隐藏框，不显示在页面上，但是进行提交传输

readonly 只读 用户不能对表单进行修改

disabled 不可用 不提交

hidden希望提交一些特定信息，但是考虑安全问题或是用户操作问题，不希望该数据发生改变

在这里插入图片描述

<input type="submit">
<input type="reset">       通过修改value值来修改标签名字

4.设计单选框，以及拥有互斥效果

在这里插入图片描述

表单单选框的type=“radio”

两个表单单选框 拥有相同的name时，表现为互斥效果

其他属性及其作用

写入value值，因为表单提交以key value进行提交
checked	表示默认勾选，有且仅有一个合理

5.复选框设计checkbox

在这里插入图片描述

2.2文本域

文字太多了，input用法不好用

因此使用多行文本框，文本域textArea

此标签没有value属性，其提交的内容就是标签中的文本

<textarea name="" id="" style="width: 300px; height:100px;"></textarea>

在这里插入图片描述

12. 下拉框

select进行下拉框设计

option进行选项设计

        <select name="" id="">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">4</option>
            <option value="">3</option>
        </select>

在这里插入图片描述

1.表单数据提交：name=value&...
2.select默认name = 选中的文本框，或者文本框的value
3.默认选中使用selected

2.3文件上传框

仅需将type="file"即可

  <input type="file">

在这里插入图片描述

13. 页面布局标签

页面堆砌多个框的设计方式为页面布局的设计

在这里插入图片描述

经典div标签设计页面布局

设计一个红色边框大小1px的div框

<div style="border:1px solid red;">
        这是一个div标签
</div>

在这里插入图片描述

进一步设计其宽度和高度

设计width和height即可

<div style="border:1px solid red;width: 500px;height: 500px;">
        这是一个div标签
    </div>

在这里插入图片描述

写上牛逼的margin：0px auto

上下页边距为0，左右自动处理

上下页面距为0的意思如下

在这里插入图片描述

14. 块元素和行元素的区别

div 块元素 自己独占一行的元素 块元素的宽高等等往往都是生效的

span 行内元素 自己不会独占一行的元素 行内元素的宽高等等，很多都是不生效的

在这里插入图片描述

行内元素宽高受约束，不能通过css随意改变宽高等；

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/643629.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数理逻辑：1、预备知识

数理逻辑：1、预备知识

17.1 命题和联结词 ​ 命题&#xff1a;可以判定真假的陈述句。&#xff08;则悖论&#xff0c;祈使句&#xff0c;疑问句都不是命题&#xff09; ​ 原子命题&#xff1a;不能被分割为更小的命题的命题 例如&#xff1a; 2既是素数又是偶数 可以由$p: 2 是素数&#xff0c;…
阅读更多...
基于移动多媒体信源与信道编码调研

基于移动多媒体信源与信道编码调研

前言 移动多媒体是指在移动通信环境下&#xff0c;通过无线网络传输的音频、视频、图像等多种媒体信息。移动多媒体的特点是数据量大、传输速率高、服务质量要求高&#xff0c;因此对信源编码和信道编码的性能提出了更高的要求。 本文对进3年的移动多媒体信源与信道编码的研究…
阅读更多...
Docker 模块在宝塔中怎么使用

Docker 模块在宝塔中怎么使用

么是 Docker&#xff1f; Docker 是一个用于开发、发布和运行应用程序的开放平台。Docker 使您能够将应用程序与基础架构分离&#xff0c;以便您可以快速交付软件。使用 Docker&#xff0c;您可以像管理应用程序一样管理基础设施。通过利用 Docker 快速交付、测试和部署代码的方…
阅读更多...
Django中model中的抽象类

Django中model中的抽象类

Django中model中的抽象类 当我们在app中models.py文件中定义model表并执行python manage.py makemigrations和python manage.py migrate后&#xff0c;Django就会在数据库中创建表 但是我们也可以对其默认配置修改&#xff0c;定义model类但是不在数据库中创建 from django.…
阅读更多...
ubuntu20.04 安装系统后-开机黑屏-nvidia显卡驱动没问题_thinkpad-intel-13700H

ubuntu20.04 安装系统后-开机黑屏-nvidia显卡驱动没问题_thinkpad-intel-13700H

文章目录 硬件现象原因&解决 硬件 thinkpad p1 gen6笔记本&#xff0c; intel 13代cpu 13700H,nvidia rtx 2000 Ada laptop gpu 13700H应该是有集显的&#xff0c;但可能没装集显驱动or由于Bios设置的缘故&#xff0c;我的win任务管理器只能看到一个gpu(gpu0)&#xff1…
阅读更多...
c++编程14——STL（3）list

c++编程14——STL（3）list

欢迎来到博主的专栏&#xff1a;c编程 博主ID&#xff1a;代码小豪 文章目录 list成员类型构造、析构、与赋值iterator元素访问修改元素list的操作 list list的数据结构是一个链表&#xff0c;准确的说应该是一个双向链表。这是一个双向链表的节点结构&#xff1a; list的使用…
阅读更多...
关于学习Go语言的并发编程

关于学习Go语言的并发编程

开始之前&#xff0c;介绍一下​最近很火的开源技术&#xff0c;低代码。 作为一种软件开发技术逐渐进入了人们的视角里&#xff0c;它利用自身独特的优势占领市场一角——让使用者可以通过可视化的方式&#xff0c;以更少的编码&#xff0c;更快速地构建和交付应用软件&#…
阅读更多...
Capture One Studio for Mac：打造完美影像的利器

Capture One Studio for Mac：打造完美影像的利器

对于摄影师而言&#xff0c;每一次按下快门都是一次对完美影像的追求。而Capture One Studio for Mac正是这样一款能够帮助你实现这一追求的利器。 Capture One Studio for Mac v16.4.2.1中文直装版下载 首先&#xff0c;Capture One Studio for Mac拥有出色的图像处理能力。它…
阅读更多...
java项目之人事系统源码(springboot+vue+mysql)

java项目之人事系统源码(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的人事系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 基于vue的人事系统的主要使用者…
阅读更多...
独享IP是原生IP吗?

独享IP是原生IP吗?

原生IP&#xff1a; 原生IP是指由Internet服务提供商&#xff08;ISP&#xff09;直接分配给用户的IP地址&#xff0c;这些IP地址通常反映了用户的实际地理位置和网络连接。原生IP是用户在其所在地区或国家使用的真实IP地址&#xff0c;与用户的物理位置直接相关。在跨境电商中…
阅读更多...
C++奇迹之旅：vector使用方法以及操作技巧

C++奇迹之旅：vector使用方法以及操作技巧

文章目录 &#x1f4dd;前言&#x1f320; 熟悉vector&#x1f309;使用vector &#x1f320;构造函数&#x1f309;vector遍历 &#x1f320;operator[]&#x1f309;迭代器 &#x1f320;Capacity容量操作&#x1f309; size()&#x1f309; capacity()&#x1f309;resize()…
阅读更多...
【Android开发】Android请求出现网络请求失败，HTTP请求，安全网络通信与权限管理

【Android开发】Android请求出现网络请求失败，HTTP请求，安全网络通信与权限管理

额外权限 要有这个权限&#xff1a; <uses-permission android:name"android.permission.INTERNET" />HTTP安全考虑 从 Android 9&#xff08;API 级别 28&#xff09;开始&#xff0c;默认情况下不支持通过 HTTP 访问网络&#xff0c;而要求使用 HTTPS。这…
阅读更多...
html 字体设置 （web端字体设置）

html 字体设置 （web端字体设置）

windows自带的字体是有版权的&#xff0c;包括微软雅黑&#xff08;方正&#xff09;、宋体&#xff08;中易&#xff09;、黑体&#xff08;中易&#xff09;等 版权算是个大坑&#xff0c;所谓为了避免版权问题&#xff0c;全部使用开源字体即可 我这里选择的是思源宋体&…
阅读更多...
软考-下午题-试题二、三

软考-下午题-试题二、三

主要是最后一问的不同解答 1、父图子图平衡 1、员工关系是否存在传递依赖&#xff1f;用100字以内的文字说明理由。2019 2、在职员关系模式中&#xff0c;假设每个职员有多名家属成员&#xff0c;那么职员关系模式存在什么问题&#xff1f; 应如何解决&#xff1f;2020 职员关系…
阅读更多...
world machine学习笔记（3）

world machine学习笔记（3）

打开 可以打开场景设置&#xff0c;项目设置平铺构建设置 场景设置&#xff1a; 输出范围 设置中心点和范围 设置分辨率 项目设置&#xff1a; 设置地图颜色&#xff0c;单位&#xff0c;最高地形高度 点击这个图形进行预览设置 该按钮还有其他的功能 world machine基础流程…
阅读更多...
【成都站线下会议|EI稳定检索|SPIE出版】第三届信号处理与通信安全国际学术会议（ICSPCS 2024）

【成都站线下会议|EI稳定检索|SPIE出版】第三届信号处理与通信安全国际学术会议（ICSPCS 2024）

【SPIE独立出版|确定ISSN、ISBN号&#xff01;&#xff01;】【成都站&#xff01;&#xff01;欢迎投稿参会】 第三届信号处理与通信安全国际学术会议&#xff08;ICSPCS 2024&#xff09; 2024 3rd International Conference on Signal Processing and Communication Secur…
阅读更多...
AJAX初级

AJAX初级

AJAX的概念&#xff1a; 使用浏览器的 XMLHttpRequest 对象 与服务器通信 浏览器网页中&#xff0c;使用 AJAX技术&#xff08;XHR对象&#xff09;发起获取省份列表数据的请求&#xff0c;服务器代码响应准备好的省份列表数据给前端&#xff0c;前端拿到数据数组以后&#xf…
阅读更多...
设计新境界：大数据赋能UI的创新美学

设计新境界：大数据赋能UI的创新美学

设计新境界&#xff1a;大数据赋能UI的创新美学 引言 随着大数据技术的蓬勃发展&#xff0c;它已成为推动UI设计创新的重要力量。大数据不仅为界面设计提供了丰富的数据资源&#xff0c;还赋予了设计师以全新的视角和工具来探索美学的新境界。本文将探讨大数据如何赋能UI设计…
阅读更多...
云部署最简单python web

云部署最简单python web

最近在玩云主机&#xff0c;考虑将简单的web应用装上去&#xff0c;通过广域网访问一下&#xff0c;代码很简单&#xff0c;所以新手几乎不会碰到什么问题。 from flask import Flaskapp Flask(__name__)app.route(/) def hello_world():return Hello, World!app.route(/gree…
阅读更多...
力扣 滑动窗口题目总结

力扣 滑动窗口题目总结

Leetcode3.无重复字符的最长子串 思路&#xff1a; 这道题主要用到思路是&#xff1a;滑动窗口 什么是滑动窗口&#xff1f; 其实就是一个队列,比如例题中的 abcabcbb&#xff0c;进入这个队列&#xff08;窗口&#xff09;为 abc 满足题目要求&#xff0c;当再进入 a&#x…
阅读更多...
最新文章

Copyright @ 2022~2023