HTML基础总结

最新推荐文章于 2021-06-15 10:15:38 发布
最新推荐文章于 2021-06-15 10:15:38 发布
阅读量160 收藏 2
点赞数
分类专栏： 前端 html java 文章标签： html基础总结 form表单 常用标签及属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45408862/article/details/98645885
版权
java 同时被 3 个专栏收录
31 篇文章 0 订阅
订阅专栏
前端
11 篇文章 1 订阅
订阅专栏
html
3 篇文章 0 订阅
订阅专栏

Web简介

Web概念概述

javaweb：使用java语言开打基于互联网的项目（使用B/S架构）

软件的架构

C/S：Client/Server 客户端/服务器端

  • 在用户本地有一个客户端，在远程有一个服务器端
    如：QQ，迅雷等
    优点：用户体验好
    缺点： 开发、安装、部署、维护麻烦

B/S：Browser/Server 浏览器/服务器

  • 只需要一个浏览器，用户通过不同的网址（url）,客户访问不同的客户端程序
    优点：开发、安装、部署、维护简单
    缺点：如果应用过大，用户的体验可能会受到影响。对硬件要求过高

B/S 架构详解:

在这里插入图片描述
资源的分类：
静态资源：
使用静态网页开发技术发布的资源
特点：
所有用户访问得到的结果一样
如：文本、图片、音频、时评，HTML,CSS,JavaScript
如果用户请求的时静态资源，那么服务器会直接将静态资源发送给浏览器，浏览器内置了静态资源的解析器，可以展示静态资源
动态资源：
使用动态网页及时发布的资源
特点：
所有用户访问，得到的结果不一样
如：jsp/servlet/php.asp…
如果用户请求的时动态资源，那么服务器会执行动态资源，转换为静态资源，发送给浏览器。
我们学习动态资源，必须要先学习静态资源
静态资源：
html：用于搭建基础网页，展示页面的内容
css：用于美化页面，布局页面
javascript：控制页面的元素，让页面有一些动态的效果

HTML

1、HTML概念介绍

概念：是最基础的网页开发语言，Hyper Text Marker Language 超文本标记语言

  • 超文本：
    超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
  • 标记语言：
    由标签构成的语言：<标签的名称>如HTML、XML
    标记语言不是编程语言

2、快速入门：

2.1 语法

  1. html后缀名 .html 或者.htm
  2. 标签j介绍：
    • 围堵标签 ：有开始标签和结束标签
      根标签<html></html>
      头标签<head></head>
      标题标签<title></title>
      <font color = "red"> </font>
    • 自闭合标签：开始标签和结束标签在一起
      如：<br/>
  3. 标签不可以嵌套：不能你中有我，我中有你
  4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双引号都可以）引起来
  5. 标签不区分大小写，但是建议使用小写
代码:
<html>
	<head>
		<title>title</title>
	</head>
	<body>
		<font color= ' red' >Hello World</font><br/>
		<font color= ' green' >Hello World</font>
	</body>
</html>

2.2 标签

1、文件标签：构成html最基本的标签
html：标识html文档的根标签
head：头标签。用于去指定html文档的一些属性。引入一些外部的资源
title：定义标题的标签
body：体标签
<!DOCTYPE>：html5中定义该文档为html文档
2、文本标签：和文本有关的标签
注释：<!-- 内容 -->
<h1> to <h6>：标题标签，字体大小逐渐递减
<p>：段落标签
<br>：换行
<hr>：展示一条水平线
注：有一些属性：

  • color：改变颜色
  • width：改变宽度
  • size：改变高度
  • align：对齐方式
    • center
    • left
    • right

<b>：字体加粗
<i>：字体斜体
<font>：字体标签
<center>：居中标签
注：有一些属性：

  • color：颜色
  • size：大小
  • face：字体
    * 属性定义：
    color定义的几种方式：
    1. 英文单字：red，green，blue
    2. rgb(值1，值2，值3)：值的范围0~255（很多浏览器不支持了）
    3. #值1值2值3：值的范围00~FF之间
    width定义的几种方式：
    1. 数值：width=“20”，数值的单位，默认时px（像素）
    2. 数值%：占比相对于父元素的比例

在这里插入图片描述

3、图片标签：在页面上显示图片的标签
展示图片
<img src="指定图片的链接" align="" alt="加载失败显示的信息" width="宽度" height="高度"/>

<!--
相对路径
	以.开头的路径
	./:代表当前目录 ./image/1.jpg
	../:代表上一-级目录
--!>

4、列表标签：
有序列表

 <ol type=""> type 可以设置序号的样式
	 <li></li>
 </ol>

无序列表

<ul type=""> type 可以设置圆点的样式
	 <li></li>
</ui>

5、链接标签：

a：定义一个超链接
<a href="超链接或者是malto:邮箱" target="指定打开资源的方式，新网页是跳转还是在本页打开" >点我</a>
target属性：_self：默认值，在当前页面打开_blank：在空白页面打开
和<img>标签结合使用：
<a href="链接"><img src="图片链接"></a>
div和span标签：结合CSS使用的标签
<span></span>：文本信息在一行展示，行内标签，内联标签
<div></div>：每一个div占满一整行。会自动换行，块级标签
语义化标签：html5中为了提高程序的可读性，提供了一些标签。结合CSS使用
<header></header>：标识头
<footer></footer>标识尾

6、表格标签：
在这里插入图片描述

 table：定义一个表格
            border：边框
            width： 宽度
            cellpadding：定义单元格之间的距离
            cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线和为一条。
            bgcolor：背景色
            align：对齐方式
        tr：定义行
            bgcolor：背景色
            align：对齐方
        td：定义单元格
            bgcolor：背景色
            align：对齐方
            colspan：合并行
            rowspan：合并列
        th：定义表头单元格
        caption：表格标题
        thead：表示表格的头部分
        tbody：表示表格的体部分
        tfoot：表示表格的尾部分

表单标签 from

HTML 标签：表单标签

表单概念：用于采集用户输入的数据的。和服务器进行交互。
使用的标签：from：用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围
属性：

  • action：指定提交数据的URL
  • method：指定提交方式
    分类：一共7种，2种比较常用
    get：
    请求参数会在地址栏中显示。会封装到请求行中
    请求参数的大小是由限制的
    不太安全
    post：
    请求参数不会在地址栏中显示，会封装在请求体中
    请求参数的大小是没有限制的
    较为安全
    表单项中的数据要想被提交：必须指定其name属性
<form action="" method="">
用户名：<input name="username"><br>
密码：<input name="password"/><br>
<input type="submit" value="登陆"/>
</form>

表单项标签：
1、input：可以通过type属性值，改变元素展示的样式

  • type属性：

    • text：文本输入框
    • placehoder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。
    • password：密码框（密文显示）
    • radio：单选框
      注意：
    1. 要想让多个单选框实现单选的效果，则多个单选框name的属性值必须一样。
    2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    3. checked属性，可以指定默认值
    • checkbox：复选框
      一般会给每一个单选框提供value属性，指定其被选中后提交的值
      checked属性，可以指定默认值
    • file： 文件选择框
    • hidden：隐藏域，用于提交一些数据

  • 按钮：

    • submit：提交form表单

    • button：普通按钮

    • image：图片提交按钮

      • src：属性指定图片的路径

      lable：指定输入项的文字描述信息
      注意：
      label 的for属性值一般会和input 的 id 属性值对应。如果对应了，点击label 区域，会让input输入框获取焦点

<form action="" method="post">
	<label for="username">用户名</label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    密码：<input type="password" name="password" value="请输入密码"/><br>
    性别：<input type="radio" name="gender" vulue="male" checked="checked"/>男
    	<input type="radio" name="gender" value="female" />女
    爱好：<input type="checkbox" name="hobby" value="shoping"/>逛街
    	<input type="checkbox" name="hobby" value="java" checked="checked"/>java
   		<input type="checkbox" name="hobby" value="computer"/>游戏
        <br>
        
        图片：<input type="file" name="file"/>
        隐藏域：<input type="hidden" name="id" value="aaa"/><br />
        取色器：<input type="color" name="color" /><br />
        生日：<input type="date" name="birthday" /><br />
        生日：<input type="datetime-local" name="birthday" /><br />
        邮箱：<input type="email" name="email" /><br />
        数字：<input type="number" name="age"  />       <br />
    	<input type="submit" value="登陆"/>
    	<input type="button" value="一个按钮" /><br />
    	<input type="image" src="1.png" />
</form>

2、select：下拉列表

  • name：指定提交的值
  • 子元素：option：指定列表的项

3、textarea：文本域

  • cols：指定列数，每一行有多少字符
  • row：默认多少行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<h1>公司简介</h1>
<hr color="red"/>
<p><font color="red">字体为红色</font><b><i>斜体加粗</i></b>这是一个段落</p>
<p>这又是一个段落</p>
<hr color="red"/>
<font color="red" size="-1" face="Courier New, Courier, monospace"><center>这行字居中，并且改变了颜色</center></font>
<center<font color="red" size="-1" face="Courier New, Courier, monospace">这行字居中，并且改变了</font></center>
<img src="1.png" align="rigth" alt="学习截图" width="200" height="200">
<img src="1.png"/>

<table border="1" width="50%" cellpadding="0" cellspacing="0">
	<caption>学生成绩单</caption>
    <thead>
    
    <tr>
    	<td>编号</td>
        <td>姓名</td>
        <td>成绩</td>
        
    </tr>
    </thead>
    <tbody>
    <tr>
    	<td>1</td>
        <td>张三</td>
        <td>99</td>
    </tr>
    </tbody>
    <tr>
    	<td>2</td>
        <td>李四</td>
        <td>100</td>
    </tr>
    <tfoot>
     <tr>
    	<td>3</td>
        <td>王五</td>
        <td>98</td>
    </tr>
    </tfoot>
</table>

<br/>

<table border="1" width="50%" cellpadding="0" cellspacing="0">
	<caption>学生成绩单</caption>>
    
    <tr>
    	<th rowspan="2">编号</td>
        <td>姓名</td>
        <td>成绩</td>
        
    </tr>
    <tr>
        <td>张三</td>
        <td>99</td>
    </tr>
    <tr>
    	<td>2</td>
        <td colspan="2">李四</td>
    </tr>
</table>


<br/>
<form action="" method="post">
	<label for="username">用户名</label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    密码：<input type="password" name="password" value="请输入密码"/><br>
    性别：<input type="radio" name="gender" vulue="male" checked="checked"/>男
    	<input type="radio" name="gender" value="female" />女
    爱好：<input type="checkbox" name="hobby" value="shoping"/>逛街
    	<input type="checkbox" name="hobby" value="java" checked="checked"/>java
   		<input type="checkbox" name="hobby" value="computer"/>游戏
        <br>
        
        图片：<input type="file" name="file"/>
        隐藏域：<input type="hidden" name="id" value="aaa"/><br />
        取色器：<input type="color" name="color" /><br />
        生日：<input type="date" name="birthday" /><br />
        生日：<input type="datetime-local" name="birthday" /><br />
        邮箱：<input type="email" name="email" /><br />
        数字(年龄)：<input type="number" name="age"  />       <br />
        省份：<select name="province">
        		<option>请您选择</option>
            	<option value="1">北京</option>
            	<option value="2">上海</option>
            	<option value="3" selected="selected">郑州</option>
       		</select><br />
         自我介绍：<textarea cols="20" rows="5" name="description"></textarea><br />
    	<input type="submit" value="登陆"/><br />
    	<input type="button" value="一个按钮" /><br />
    	<!--<input type="image" src="1.png" />-->
</form>

</body>
</html>
其实我觉得你挺好的
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html基础总结
09-17
HTML 基础总结 HTML 是超文本标记语言（HyperText Markup Language），是一种标准的标记语言，用于创建网页。 HTML 由一系列的元素和属性组成，元素是 HTML 的基本组成部分，属性则提供了更多关于元素的信息。 ...
HTML基础总结推荐(段落)
09-28
1. **段落定义**： - 段落是通过`<p>`标签来定义的。例如： ... <p>This is a paragraph ...希望这个简短的HTML基础总结能对你有所帮助，如果你想要进一步深入学习，可以查阅更多的HTML教程和参考资料。
HTML 基础总结 (下）.xmind
03-30
HTML 基础知识的总结，适合初学者！
HTML基础总结推荐(文本格式)
09-28
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，它的基础总结主要关注文本格式化。在HTML中，我们可以使用一系列标签来对文本进行样式调整，使其更易读且更具表现力。以下是一些关键的HTML...
HTML基础总结推荐(标题)
09-28
总结，HTML的基础知识包括创建结构化的标题和添加视觉分隔的水平线。通过合理运用这些元素，开发者可以构建出清晰、有层次的网页内容。在实践中，应当遵循现代Web标准，利用CSS来实现样式控制，以确保兼容性和可维护...
教你web如何调用摄像头拍照并上传到服务器（谷歌浏览器亲测可用！）
热门推荐
weixin_45408862的博客
08-07 1万+
这几天公司有一个业务需求，就是需要在web前端（一般环境都是谷歌浏览器）调用本地摄像头进行拍照，然后上传到服务器上。有两种解决方案，一种是通过flash调用本地摄像头进行拍照，还有一种方式就是使用video标签获取本地摄像头摄像，然后结合canvas标签进行展示。 项目中前端使用的是layui，但并不影响迁移到其他框架，主语要把layui框架的一些语法换成迁移框架的即可。同时，项目中对启用摄像头，拍照生成照片（base64）等功能进行了封装，所以在使用此案例时可以直接导入封装好的js文件，然后再需要的地方引
第一次搭建React项目以及错误：getaddrinfo ENOTFOUND registry.npmjs.org解决办法
weixin_45408862的博客
06-15 6297
需要安装node.js，npm，为了下载速度，一般都是用阿里云的镜像。 我是用的版本如下： 在D盘下的workSpace文件夹下创建第一个React项目 发现报错 说是连接不上某个url。（大致就这个意思），咱们ping一下发现是能ping通的 说明url是有效的，使用npm update 命令更新一下 然后再执行 create-react-app first-react-demo这个命令，出现如下命令 说明我们创建成功 进入到first-react-demo 文件,然后dos窗口执行npm
关于使用通过ip访问网站无法使用多媒体，MediaDevices.getUserMedia()为undefined的解决方案--（亲测可用）。
weixin_45408862的博客
08-07 5965
当web前端通过vidoe+canvas+MediaDevices.getUserMedia()的方式调用本地多媒体设备（不局限于摄像头）时。存在一个安全问题，为了用户的隐私安全，http协议无法使用多媒体设备。 因为像摄像头和麦克风属于可能涉及重大隐私问题的API，getUserMedia()的规范提出了浏览器必须满足一系列隐私和安全要求。这个方法功能很强大，只能在安全的上下文中使用，在不安全的环境中为undefined。安全上下文就是使用HTTPS、file:///url方案加载的页面，或者是开发者本地
摄像头拍照图片上传之坑-我想参数是一个file对象该怎么办？
weixin_45408862的博客
08-07 517
公司业务需要，需要在web端调用摄像头进行拍照，然后把照片上传到服务器，拍照功能搞定，但是上传的时候却遇到了一点小麻烦。摄像头拍照之后生成的照片是base64编码格式的文件，由于照片是根据url回显的，所以我需要转换成file格式的文件进行上传，自己头一次搞也是一头雾水，百度大多数都是通过base64->Blob->file这种方式进行转换。看了其他博主的博客，逻辑上说得通，是一个可行的方法，但是我在使用的时候Blob->file转换的却报错，无论怎样都转换不成file 格式的文件，大多数
使用form 表单+aja提交数据无返回结果-你真的了解点击事件属性值submit和button吗?
weixin_45408862的博客
10-12 346
下午写项目 遇到了一个问题 ，使用ajax提交数据，后台能拿到数据， 但是一直无法进入回调函数，浪费了一个多小时的时间都没有解决。 百思不得琪姐，只好找度娘，才发现是知识漏洞，就是触发（点击按钮）事件的时候，属性不能为submit。 因为属性submit会提交form表单，当触发点击事件的时候会优先使用form表单提交数据，根据action属性提交到相应的路径。解决办法就是把submit改成b...
js使用时一些注意事项
weixin_45408862的博客
08-08 164
注意事项： js是弱语言，面向对象的语言，一般不会执行，通过事件触发 怎么调试JS代码？ 1.运行页面 2.快捷键发f12 3.弹出的页面 找到 调试器 找到js代码 4.打断点 5.刷新页面 6.进入调试的时候，按f11单步执行 下面这个代码没有问题，为什么在界面上显示不出结果？ 原因：因为html页面在加载的时候是根据代码的先后顺序加载的，所以会先加载js代码，再加载HTML，所以会出现HTM...
CSS
weixin_45408862的博客
08-06 130
CSS：页面美化和布局控制 1. 概念： Cascading Style Sheets 层叠样式表 * 层叠：多个样式可以作用在同一个html的元素上，同时生效 2. 好处： 1. 功能强大 2. 将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作更容易 * 提高开发效率 3. CSS的使用：CSS与html结合方式 1. 内联样式 * 在标签内使用st...
jQuery 基础
weixin_45408862的博客
09-21 119
Juery是什么？ 不是语言， 是一个框架 前端框架 是用js写的 本质上就是 写好的一个一个的函数，组成的一个库 2.write less do more 用更少的代码，实现更多的功能 3.什么时框架？ 半成品 框架优点：使用简单，开发周期短 程序员只需要在半成品的基础上，填上自己的功能就可以了。 推荐学习jquery的书籍：锋利的jQuery 4.怎么用 导入库文件 在WebContent...
AJAX：Asynchronous JavaScript and XML-原生及封装详解
weixin_45408862的博客
09-21 114
是一种技术 局部刷新 异步交互 ajax有原生的和封装的两种 主要使用封装好的 首先介绍一下原生的AJAX 原生态 未经加工的 前端代码 //index.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContext...
Filter-过滤器
weixin_45408862的博客
09-21 98
Spring 过滤器：拦截请求的 过滤器怎么用？ 1.创建filter实例 2.配置filter package com.zhiyou.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterCon...
本地小说阅读器可执行文件新版
08-29
导入小说，需通过文件-转换，选择txt小说，生成同名小说文件夹； 之后通过文件-小说，选择小说文件夹，就完成小说导入了。 txt小说只需转换一次。
452、基于单片机的智能水杯系统设计（原理图、源代码）
最新发布
08-29
452、基于单片机的智能水杯系统设计（原理图、源代码） 该系统为单片机的智能水杯系统，实现水质、水温检测，智能控温等设计； 功能： 1、使用51单片机为核心设计； 2、水质TDS值检测，检测水质情况； 3、水温检测； 4、温度和TDS值显示在LCD1602上； 5、按键实现水温阈值控制； 6、加热模块和制冷模块控制，控制水温； 7、声光告警电路，实现温度到达提醒； 8、提供原理图和源代码；
d3dcsxd_46.dll
08-29
Windows 8 SDK 此 SDK 于 2012 年 11 月发布，可用于创建适用于 Windows 8 或更早版本的 Windows 应用 () 使用 Web 技术、本机和托管代码;或使用本机或托管编程模型的桌面应用。
HTML5与CSS基础总结
"HTML5与CSS基础总结" 在网页设计领域，HTML5（HyperText Markup Language 第5版）和CSS（Cascading Style Sheets）是构建网页内容和样式的基础。HTML5是目前最新的HTML版本，提供了更强大的功能和更好的语义化结构...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值