HTML基础

最新推荐文章于 2024-04-22 09:56:43 发布
最新推荐文章于 2024-04-22 09:56:43 发布
阅读量162 收藏
点赞数
分类专栏： 锦到说HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43568982/article/details/115377777
版权

开始时间：2021-4-2
课程链接：HTML

B/S和C/S

B/S
Browser和Server
浏览器端和服务器端 前端/后端

  • 优点:升级方便,只升级服务器端代码即可。维护成本低。
  • 缺点:速度慢、体验不好、界面不炫酷

C/S
client / server
(客户端/服务器端的交互形式。)

  • 缺点:升级麻烦,维护成本较高。
  • 优点:速度快，体验好，界面炫酷。(娱乐型的系统多数是c/s架构的)

HTML

HTML: Hyper Text Markup Language(超文本标记语言)

由大量的标签组成，每一个标签都有开始标签和结束标签。标签不区分大小写
超文本:流媒体、图片、声音、视频…

W3C:世界万维网联盟指定的规范

W3School可以作为参考手册

简单的程序

<html>
	<head>
		<title>网页标题</title>
	</head>
	<body>
		网页的主体
	</body>
</html>

在这里插入图片描述
不区分大小写，语法松散不严格

<!doctype html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<!--段落标记-->
<p> 床前明月光，疑是地上霜。
  举头望明月，低头思故乡。 </p>
<p> 床前明月光，疑是地上霜。
  举头望明月，低头思故乡。 </p>
<p> 床前明月光，疑是地上霜。
  举头望明月，低头思故乡。 </p>
</body>
</html>

标题字

类似于word中的样式

<!doctype html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<!--换行通过br标签来实现，这种只有单个的标签称为独目标签-->
hello<br> world!
<!--hr实现横线，可以设置比例和颜色，语法太松散了，单引号双引号没有引号都无所谓-->
<hr color="red" width="50%">
</body>
</html>

预留格式

在这里插入图片描述

<pre>
床前明月光，疑是地上霜
举头望明月，低头思故乡
</pre>

<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>

在这里插入图片描述

10<sup>2</sup>
10<sub>m</sub>
<font color='red' size='50'>字体标签</font>

在这里插入图片描述

实体符号

显示大于小于
需要转义
实体符号以&开始，以分号结束

b&lt; a&gt;c

在这里插入图片描述
加空格

a&nbsp;&nbsp;bc

在这里插入图片描述

表格

一个表是一个table，table的一行是tr
tr的一格是td

<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<!--设置表格的边框为1像素，宽度占比60%，高度为100px -->
<h1 align="center">员工信息表</h1>
<table align="center" border="1px" width="60%" height="500px">
<!--设置对齐方式align-->
  <tr align="center">
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>
    <td align="right">i</td>
  </tr>
</table>
</body>
</html>

在这里插入图片描述

合并单元格

row合并
留上弃下
column合并
留左弃右

<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<!--设置表格的边框为1像素，宽度占比60%，高度为100px -->
<h1 align="center">员工信息表</h1>
<table align="center" border="1px" width="60%" height="500px">
<!--设置对齐方式align-->
  <tr align="center">
    <td colspan="2">ab</td>
   
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td rowspan="2">cf</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>

  </tr>
</table>
</body>
</html>

在这里插入图片描述

<!doctype html>
<html>
<head>
<title>表格，th标签</title>
</head>
<body>
<!--设置表格的边框为1像素，宽度占比60%，高度为100px -->
<h1 align="center">员工信息表</h1>
<table align="center" border="1px" width="60%" height="500px">
<!--设置对齐方式align-->
<tr>
    <th>员工编号</th>
    <th>员工薪资</th>
    <th>部门名称</th>
  </tr>
<tr>
<td>员工编号</td>
    <td>员工薪资</td>
    <td>部门名称</td>
 </tr>
  <tr align="center">
    <td colspan="2">ab</td>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td rowspan="2">cf</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>

  </tr>
</table>
</body>
</html>

th标签自动加粗和居中
在这里插入图片描述

thead tbody tfoot

将表格切分成三部分，只起到一个分区的作用

<!doctype html>
<html>
<head>
<title>表格，th标签</title>
</head>
<body>
<!--设置表格的边框为1像素，宽度占比60%，高度为100px -->
<h1 align="center">员工信息表</h1>
<table align="center" border="1px" width="60%" height="500px">
  <!--设置对齐方式align-->
  <thead>
    <tr>
      <th>员工编号</th>
      <th>员工薪资</th>
      <th>部门名称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>员工编号</td>
      <td>员工薪资</td>
      <td>部门名称</td>
    </tr>
    <tr align="center">
      <td colspan="2">ab</td>
      <td>c</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>c</td>
    </tr>
    <tr>
      <td>g</td>
      <td>h</td>
      <td>f</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

背景色、背景图片和图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色</title>
</head>
<!--文件放在同一目录下-->
<body bgcolor="red" background="周杰伦.jpg">
</body>
</html>

图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色</title>
</head>
<!--设置宽度，高度会随之缩放-->
<body>
	<!--如果开始和结束标签中间不需要加任何东西，那么可以省略结束标签，在开始标签末尾加上斜杠-->
	<img src="周杰伦.jpg" width="200px" title="悬停到图片上就显示我是周杰伦" alt="图片加载失败就显示这句话"/>
</body>
</html>

超链接

hot reference
href

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>

<body>
	<a href="http://www.baidu.com">百度</a>
	<!--通过设置target可以控制是在新界面打开还是在原有网页打开 _blank 和 _self-->
	<a href="http://baidu.com" target="_blank">
		<img src="周杰伦.jpg"/>
	</a>
	   
</body>
</html>

列表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>

<body>
<!--ol和ul用于控制某一个层级，li用于控制该层级的各个元素-->
<ol type="a">
  <li>大鱼吃小鱼</li>
  <ol>
    <li>小鱼吃虾米</li>
  </ol>
</ol>
<ul>
  <li>中国</li>
  <ul>
    <li>北京</li>
    <li>上海</li>
    <ul type="circle">
      <li>浦东区</li>
      <li>虹桥区</li>
    </ul>
  </ul>
</ul>
</body>
</html>

表单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>

<body>
<!--form标签的action属性用来指定服务器地址url，向服务器发送request，且input必须放到form里面才行-->
<form action="http://www.baidu.com">
  <!--表单比超链接更优异的一点就是可以传递数据--> 
  <!--写一个提交按钮，下面的第一个具备提交能力，第二个是普通按钮不能提交-->
  <input type="submit" value="这里写的是按钮名"/>
  <input type="button" value="这是简单的按钮">
</form>
</body>
</html>

在这里插入图片描述

简单写一个登录表

<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<!--设置表格的边框为1像素，宽度占比60%，高度为100px -->
<h1 align="center">员工信息表</h1>
	<!--提交格式 action?name=value&name=value&name=value...,解析后用Java的split分开读取 -->
<form action="">
  <table align="center" border="1px">
    <!--设置对齐方式align-->
    <tbody>
      <tr>
        <td>用户名</td>
		  <!--有name才能提交-->
		  <!--表单项写了name的，一律会提交给服务器，不想提交，就不写name属性-->
        <td><input type="text" name="username"/></td>
      </tr>    
      <tr>
        <td>密码</td>
        <td><input type="text"/></td>
      </tr>
      <tr>
        <td><input type="submit" value="登录"/></td>
        <td><input type="reset" value="清空"></td>
      </tr>
    </tbody>
  </table>
</form>
</body>
</html>

此时我们发现即使input设置了type为password，一旦传参后，还是看得到有password传过去，后面会处理这一问题

用户注册表单

首先我们看一个整体
给用户输入机会的，都不用写；让用户选的，需要给服务器传值的，都需要写value

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>

<body>
<form method="post">
  用户名
  <input type="text" name="username"/>
  <br>
  密码
  <input type="password" name="userpwd"/>
  <br>
  确认密码
  <input type="password"/>
  <br>
  性别
  <input type="radio" name="gender" value="1" checked/>
  男
  <input type="radio" name="gender" value="1"/>
  女 <br>
  兴趣爱好
  <input type="checkbox" name="hobby" value="sing"/>
  唱
  <input type="checkbox" name="hobby" value="dance"/>
  跳
  <input type="checkbox" name="hobby" value="rap"/>
  rap <br>
  <!--给用户输入机会的，都不用写，需要给服务器传值的，都需要写value--> 
  学历
  <select name="grade">
    <option value="bachlor" selected>本科</option>
    <option value="master">硕士</option>
    <option value="doctor">博士</option>
  </select>
  <br>
  简介 
  <!--文本域--> 
  <br>
  <textarea name="introduce"></textarea>
  <br>
  <input type="submit" value="注册"/>
  <input type="reset" value="清空"/>
</form>
</body>
</html>

再逐步分析

<form method="post">

使用post，传给服务器的参数不会在浏览器中直接看到
如果选get就能看到，默认是选的get

确认密码时不需要再写name，因为后面采用JS会解决这个问题

 密码
  <input type="password" name="userpwd"/>
  <br>
  确认密码
  <input type="password"/>

如果name相同，那么这俩只能选一个，如果不同则可以多选，前提是radio表示的就是单选框
checked表示默认选中的

  性别
  <input type="radio" name="gender" value="1" checked/>
  男
  <input type="radio" name="gender" value="1"/>
  女 <br>

CheckBox表示复选框，可以多选，name用法和单选一样，传的时候要写好value值

 兴趣爱好
  <input type="checkbox" name="hobby" value="sing"/>
  唱
  <input type="checkbox" name="hobby" value="dance"/>
  跳
  <input type="checkbox" name="hobby" value="rap"/>
  rap <br>

下拉框用select，默认就不再是checked而是selected

 学历
  <select name="grade">
    <option value="bachlor" selected>本科</option>
    <option value="master">硕士</option>
    <option value="doctor">博士</option>
  </select>
  <br>

写简介就需要文本域

<br>
  <textarea name="introduce"></textarea>
  <br>

最后写注册和清空

<input type="submit" value="注册"/>
  <input type="reset" value="清空"/>

multiple可以支持多选，也可以通过size显示 显示条目数

	<select multiple="multiple" size="3" name="grade" >
    <option value="bachlor" selected>本科</option>
    <option value="master">硕士</option>
    <option value="doctor">博士</option>

file控件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表支持多选</title>
</head>

<body>
		<input type="file">
  </select>
</body>
</html>

hidden控件

<input type="hidden" name="userid" value="111"/>
			用户代码
  <input type="text" name="usercode"/>
  <input type="submit" value="提交"/>

提交时还是会传，但是网页上看不到

readonly和disabled

readonly和disabled值都不能修改，只能看，但readonly可以提交数据，disabled不能提交
在这里插入图片描述

<form action="" method="post">
  <!--隐藏域，网页上看不到，但是表单提交的时候数据会自动提交给服务器-->
	  用户代码<input type="text" name="usercode" value="123" readonly />
	  <br>
	  用户密码<input type="text" name="userpwd" value="asd" disabled />
  </form>

maxlength

限制文本框最长输入字符

 请输入密码<input type="text" maxlength="3" />

id值

任何元素或者节点都有id值，在一个html中，id值不能重复，使获取节点更为方便
表单提交数据的时候，只和name有关，和id无关

总体来看，各个标签就是一颗document树下的各个节点
通过id来定为节点，便于后期进行增删改查

div和span

div和span都可以称为图层
有利于整个页面的布局
盒子套盒子，嵌套操作，便于细分后的操作
定下div的x y坐标即可

div独占一行（默认情况）
在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素的id属性</title>
</head>

<body>
<div id="div1">我是一个div1</div>
<div id="div2">我是一个div2</div>
<span id="span1">我是span1</span> <span id="span2">我是span2</span>
</body>
</html>

结束时间：2021-4-7

高开低走。
关注
专栏目录
HTML基础模板
qq_61690596的博客
07-18 2120
HTML基本模板，每个基础元素的内容和作用
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
VB6 MiniBlink SBrowser：一款小巧且强大的Web浏览器组件
最新发布
gitblog_00027的博客
04-22 584
VB6 MiniBlink SBrowser：一款小巧且强大的Web浏览器组件 项目地址:https://gitcode.com/imxcstar/vb6-miniblink-SBrowser 项目简介 VB6 MiniBlink SBrowser 是一个专为Visual Basic 6（VB6）开发的Web渲染引擎组件。它基于著名的开源项目Blink——Google Chrome和Chromiu...
VFP调用SBrowser时的网页与浏览器交互方法
gxbsdzf的专栏
12-28 595
webBrowser控件是经典的浏览器控件，简单易用，但他是IE内核，遭诟病吐槽多多，尤其是不能支持Html5，版本差异较大，导致界面不容易做到统一等。而SBrowser控件则是chrome和safari内核，只是网上介绍的不多。摸索了一下，发现它访问网页的方法与webBrowser不太一样，浏览器与网页的交互可由RunJs方法完成。最近找到了一个可替代webBrowser控件的好东西，名叫SBrowser，内核是chrome和safari，好像是苹果公司弄的。看起来，SBrowser显得更加灵活一些。
SBrowser:Android浏览器
04-30
SBrowser Android Browser 把S-Browser 换成 Android studio 项目（原来eclipse）
复制网页文本的几种方法
随风潜入夜，不白头
05-30 2万+
1、网页打印预览 需要复制内容的网页 → 按下快捷键【Ctrl+P】或者鼠标右击选择打印 → 弹出打印界面后将内容放大→ 选中文本复制。 2、后台控制法 需要复制内容的网页→ 按下键 F12→ 找到 Console→ 最下面命令行面板中输入 $=0或 $={}→ 回车，就可复制。 3、 JavaScript 代码 需要复制内容的网页→ 清空浏览器地址→ 地址栏输入“javascript:void($={});” → 回车，就可复制。 4、查看网页源代码 需要复制内容的网页→鼠标右击选择【...
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4850
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML基础（新手入门教程）
华夏天骄
05-17 5169
「学习笔记」HTML基础 前言 勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯路。有人说:“再次翻开笔记是什么感觉”，我的回答是:“初恋般的感觉”。或许笔记不一定十全十美，但肯定会让你有种初恋般的怦然心动。???????? 本章着重复习Html的基础内容，学习Html究竟要学些什么呢？主要是学习各种标签，来搭建网页的“结构”。✨✨ 本篇文章主要由五个章节构成，从WEB标准到初识HTML，接着学习HTML常用标签，最后学习表格列表和表单。????????开始充电之旅啦~~~ 一、认识WEB **「
VB webkit内核 利用控件操作网页内元素
03-24
VB webkit内核 利用控件操作网页内元素。VB webkit内核 利用控件操作网页内元素。
Silktest2011:How to get Browser type in openagent model?
Love Coding and Love Testing
06-20 366
use "msw32.inc"   [-] string getBrowser(WINDOW wBrowserApplication)    [ ] String sBrowser,sBrowserVersion    [ ] String sBrowserType = wBrowserApplication.GetProperty("browsertype")    [ ] sBrow
SQL Server Browser 无法启动
热门推荐
生命不息，学习不止！
03-31 4万+
环境：Windows 7 家庭普通版 和 Microsoft SQL Server 2008 开发者版本   问题：SQL Server Browser 服务无法启动，即启动选项为灰色，该服务涉及到SQL Server的远程访问，因此有些急迫。   解决：其实很简单，只要进入管理员账户就能启动了，此处的管理员账户并非“以管理员身份运行”。   1. 以管理员身份运行cmd命令窗口，输入
B/S(Browser/Server)结构
Netzhangman的专栏
01-14 1万+
 B/S(Browser/Server)结构 　　即浏览器和服务器结构。它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端(Browser)实现，但是主要事务逻辑在服务器端(Server)实现，形成所谓三层3-tier结构。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了
HTML表格的单元格合并
cabbageboiling的博客
05-23 2137
如何做一个花里胡哨的表格   单元格合并是一个比较常见的需求，特别是数据展示的页面，需要大标题然后下面有多个小标题，这么常见的需求，所以我们也要学习怎么制作一个缺胳膊少腿的表格。我们先看一下题目，以下两个表格怎么做？ 我们可以分步骤来搞定他，我们用第一个左上角的做例子。 第一步我们先做一个九宫格的表格出来，看过上一篇的朋友应该是能做了。 接着我们先确定我们要合并的表格是第一行第一个和第二行第一个，所以我们可以说第一个把第二个吃了。 确定合并的单元格数量，这里不难看出是合并了两个单元格 确定是跨行合并还是
所见即所得，使用Java将HTML解析为Excel，支持多级表头嵌套、单元格合并
RainOrShine
03-20 8932
最近项目需要实现如题“所见即所得”的功能，之前每次生成Excel都需要重新从数据库查询一遍，降低效率不说，那些嵌套的表头实在是很难用Sql嵌套拼接实现。而且这样做还没有通用性，不同的表格需要写不同的Sql实现，非常繁琐。 在网上找了很多关于HTML解析为Excel的文章，有以下两种情况： 1、大部分用“偷懒”的办法，使用js直接将HTML代码输出为文本文件，然后将文件后
[My Own Wheels]含有合并单元格的html读取代码
沐浴在财神爷扎哥的光辉中。。。
07-20 2183
含有合并单元格的html读取代码
HTML表格标签及单元格合并
Darrenchiu的博客
02-06 3675
表格标签 表格标签学习: 标签 table :声明一个表格 tr:声明一行,设置行高及改行所有单元格的高度. th:声明一个单元格,表头格.默认居中加黑显示 td:声明一个单元格,默认居左显示原始数据 注意: 行高即改行所有单元格的宽度 单元格的宽度即列宽 属性: **border:**给表格添加边框 width:设置表格的宽度 height:设置表格的高度 cellpadding:设置内容居边...
HTML基础知识速览：文档结构与常用标签
"该文档是关于HTML基础知识点的总结，主要涵盖了HTML文档的基本结构、标题标签、文字属性、特殊符号、行控制、图片插入以及文字布局等方面的内容。适合初学者学习和参考。" HTML（HyperText Markup Language）是...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值