web基础---html

已于 2022-12-09 11:11:26 修改
阅读量283 收藏 3
点赞数 1
分类专栏： web 文章标签： html 前端
于 2022-12-07 23:07:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47181329/article/details/128227380
版权

一、html基本标签

  1. 段落标记：p
  2. 标题字：h1，h2，h3，h4，h5，h6
  3. 换行：br(只有一个标签，独目标签)
  4. 水平线：hr(独目标签)
  5. 预留格式：pre
    在这里插入图片描述
  6. 粗体字：b
  7. 斜体字：i
  8. 插入字：ins（带有下划线的字）
  9. 删除字：del
  10. 右上角加字：sup
  11. 右下角加字：sub
  12. font :字体标签

二、html实体符号

  1. 空格：&nbsp
  2. 小于号<：&lt
  3. 大于号>：&gt

三、html表格

3.1表格table

在这里插入图片描述

<body>
    <table boder="1px" width="50%" height="200px" align="center";>
    	<tr>
    		<td> 1 </td>
    		<td> 2 </td>
    		<td> 3 </td>
    	</tr>
		<tr align="center">
    		<td> 1 </td>
    		<td> 2 </td>
    		<td> 3 </td>
    	</tr>
    	<tr>
    		<td> 1 </td>
    		<td> 2 </td>
    		<td align="center"> 3 </td>
    	</tr>
    </table>
</body>

在这里插入图片描述

3.2表格单元格的合并

<body>
    <table boder="1px" width="50%">
    	<tr>
    		<td> 1 </td>
    		<td colspan="2"> xy </td>
    	</tr>
		<tr>
    		<td> 1 </td>
    		<td> 1 </td>
    		<td rowspan="2"> KINGford </td>
    	</tr>
    	<tr>
    		<td> 1 </td>
    		<td> 1 </td>
    	</tr>
    </table>
</body>

在这里插入图片描述

3.3表格的th标签

<body>
    <table boder="1px" width="50%">
    	<tr>
    	<!-- th可以代替td 做单元格，th 中的内容会自动加粗，自动居中。-->
    		<th>员工编号</th>
    		<th>员工姓名</th>
    		<th>员工薪资</th>
    	</tr>
		<tr>
    		<td>7369</td>
    		<td>SMITH</td>
    		<td>800.0</td>
    	</tr>
    	<tr>
    		<td>7370</td>
    		<td>KING</td>
    		<td>8000.0</td>
    	</tr>
    </table>
</body>

在这里插入图片描述

3.4表格的thead,tbody,tfoot(为javascript做铺垫）

<body>
    <table boder="1px" width="50%">
    	<thead>
	    	<tr>
	    	<!-- th可以代替td 做单元格，th 中的内容会自动加粗，自动居中。-->
	    		<th>员工编号</th>
	    		<th>员工姓名</th>
	    		<th>员工薪资</th>
	    	</tr>
	    </thead>
	    <tbody>
			<tr>
	    		<td>7369</td>
	    		<td>SMITH</td>
	    		<td>800.0</td>
	    	</tr>
	    	<tr>
	    		<td>7370</td>
	    		<td>KING</td>
	    		<td>8000.0</td>
	    	</tr>
    	</tbody>
    	<tfoot>
    		<tr>
	    		<td>7369</td>
	    		<td>SMITH</td>
	    		<td>800.0</td>
	    	</tr>
    	</tfoot>
    </table>
</body>

四、html图片

4.1背景颜色和背景图片

背景颜色：bgcolor=“red”

<head>
	<meta charset="utf-8">
	<title>测试</title>
</head>
<body bgcolor="red">

</body>

背景图片：background=“images/ce.jpg”

<head>
	<meta charset="utf-8">
	<title>测试</title>
</head>
<body background="images/ce.jpg">

</body>

4.2图片

	<img src="images/bd.jpg"></img>
	<!-- width属性：指定图片的宽度，高度会等比例缩放，手动设置高度，可能会使图片失真-->
	<!-- title属性用来设置鼠标悬停时的提示信息-->
	<img src="images/bd.jpg"  title="点击我跳转到百度哦！"></img>
	<!--alt用来设置当图片加载失败时候的提示信息-->
	<img src="im/bd.png" alt="图片找不到了哦！">

在这里插入图片描述

五、html超链接

超链接的特点：鼠标停留在超链接上自动变成小手，超链接自动添加下划线！
<a href="http://map.baidu.com">百度地图</a>
<!--图片也可设置超链接-->
<!-- 标签嵌套使用-->
<a href="http://map.baidu.com">
	<img src="images/bd.jpg" width="200px" title="点击我跳转到百度地图哦！"></img>
</a>

在这里插入图片描述

超链接的target属性

target属性：

  • _blank:新窗口
  • _self:当前窗口
  • _parent:当前窗口的父窗口
  • _ top:当前窗口的顶级窗口
<a href="http://www.baidu.com" target="_self">百度（当前窗口）</a>
<a href="http://www.baidu.com" target="_blank">百度（新窗口）</a>
<a href="http://www.baidu.com">百度（默认为当前窗口）</a>
<br>
<!-- 一个窗口中的内部窗口 -->
<iframe src="http://www.baidu.com"></iframe>

在这里插入图片描述

六、html列表

无序列表：

<ul>
	<li> 中国 
		<ul>
			<li> 北京 
				<ul>
				    <li> 东城区 </li>
					<li> 西城区 </li>
					<li> 海淀区 </li>
					<li> 朝阳区 </li>
				</ul>
			</li>
			<li> 上海 </li>
			<li> 天津 </li>
			<li> 重庆 </li>
		</ul>
	</li>
	<li> 美国 </li>
	<li> 日本 </li>
	<li> 俄国 </li>
</ul>

在这里插入图片描述

type属性改变样式

1.type=“circle”（白圆圈）
2.type=“square”（黑方块）
3.type=“disc”（黑圆圈）
在这里插入图片描述

有序列表：

<ol type="A"> 
	<li>水果
		<ol type="a"> 
			<li>香蕉</li>
			<li> 哈密瓜 </li>
		</ol>
	</li>
	<li>蔬菜</li>
	<li> 茶 </li>
</ol>
type属性改变样式

1.type=“A”
2.type=“a”
3.type="1 "
4.type=“Ⅰ”（罗马数字）
在这里插入图片描述

七、html表单

1.表单定义：

1）input按钮，提交表单的按钮，只要点击这个提交按钮，就发送请求了！
type必须是submit，不能随便写
2）button是一个普通按钮，不能提交表单。
3）submit提交按钮放在form外面也是不行的！

<!-- 超链接-->
<a href="http://www.baidu.com">百度</a>
<br><br><br>

<!--表单-->
<form action="http://www.baidu.com">
	<!-- value设置按钮上显示的文本-->
	<input type="submit" value="百度"/>
	<!-- button是一个普通按钮，不能提交表单-->
	<input type="button" value="百度"/>
</form>

在这里插入图片描述

2.表单提交数据格式：

表单最终提交的时候，表单项的name属性非常重要，有name的才会提交。没有name是不会提交的。
type不同，展示样式不同，text表示文本框，password表示密码框

<!--
	http://192.168.145.2：8080/crm/login
	协议：http协议
	访问的服务器IP地址是什么？192.168.145.2
	访问这个服务器上的那个软件：8080端口对应一个服务。
	/crm/1ogin：是这个服务器上的某个资源名！（它可能是一段处理登录的java程序！！！）
-->
<form action="http://192.168.145.2:8080/crm/login">
	<!--input 是输入域-->
	用户名：<input type="text" name="username"/>
	<br>
	密码：<input type="password" name="userpsd"/>
	<br>
	<input type="submit" value="登录"/>
</form>

3.用户注册表单：

1）name有，就能提交，没有name属性就不能提交。
2）提交格式：name=value&name=value&name=value
3）同一组的单选按钮，name是需要一致的，这样才可以做到单选的效果

<form action="http://192.168.145.2:8080/crm/login">
	用户名：<input type="text" name="username"/>
	<br>
	密码：<input type="password" name="userpsd"/>
	<br>
	性别：<!--checked表示默认选中此项-->
		<input type="radio" name="sex" value="1" checked/>男
		<input type="radio" name="sex" value="0"/>女
	<br>
	兴趣：<!--复选框-->
		<input type="checkbox" name="aohao" value="2"/>抽烟
		<input type="checkbox" name="aihao" value="3" checked/>喝酒
		<input type="checkbox" name="aihao" value="4" checked/>烫头
	<br>
	学历：<!--下拉列表-->
	<select name="xuexi">
		<option value="gz">高中<option>
		<option value="zk">专科<option>
		<option value="bk" selected>本科<option><!--selected表示默认选中此项-->
		<option value="sh">硕士<option>
	</select>
	<br>
	简介：<!--文本域-->
	<textarea rows="10" cols="60" name="jianjie">
	</textarea>
	<br>
	<!--提交表单-->
	<input type="submit" value="登录"/>
	<!--重置按钮-->
	<input type="reset" value="重置"/>
</form>

在这里插入图片描述
4 ) multiple表示下拉列表支持多选
5 ) size是设置下拉列表一次最多显示的条目数量

<select name="province" size="3" multiple>
	<option value="hb">河北省</option>
	<option value="hn">河南省</option>
	<option value="sd">山东省</option>
	<option value="sx">山西省</option>
	<option value="bh">湖北省</option>
	<option value="nh">湖南省</option>
</select>

在这里插入图片描述
file控件：文件上传

<!--后台ava程序使用IO流的方式接收这个文件！-->
<form action="http://www.baidu.com">
	文件：<input type="file"/>
	<br><br><br>
	<input type="submit" value="文件上传"/>
</form>

在这里插入图片描述
6） 隐藏域：不希望用户在浏览器上看到，但是希望可以将这个数据提交过去！

		<!--隐藏域-->
		<input type="hidden" name="usercode" value="111"/>
		<br>
		<input type="submit" value="提交"/>

在这里插入图片描述
7）readonly和disabled都是只读的！
readonly修饰的表单项可以提交给服务器，但是disabled修饰的不会提交！
8）maxlength属性用来限制最多输入字符数目

	<form>
		机构代码<input type="text" name="ucode" value="111" readonly />
		<br>
		用户代码<input type="text" name="usercode" value="122" disabled />
		<br>
		<!--最多输入3个字符-->
		注册代码<input type="text" name="usecode" maxlength="3" />
		<br>
		<input type="submit" value="提交"/>
	</form>

在这里插入图片描述
10）id属性：

  • 在HTML中任何一个节点上，多有id属性
  • 在同一个网页中，id属性是不能重复的。
  • id代表了这个节点，id是这个节点的身份证号。
  • 后期学习了javascript之后，我们要通过javascript对HTML的节点进行增删改，对节点增删改的时候，需要先获取到该节点对象，id属性可以让我们方便的获取到该节点对象。
<form id="myform">

</form>

八、html盒子div和span

  1. div和span都是图层。（div和span都是盒子）
  2. 每一个图层在网页当中都是一个独立的盒子。图层的最主要作用就是：网页布局
  3. 每一个浏览器都内置了调试器。使用快捷键F12，可以调出来调试器。
  4. div默认情况下独自占用1行。span不会独占行！
	<div id="div1">
		我是一个div!
	</div>
	是新的一行吗？
	<span id="myspan">我是一个span标签！</span>

在这里插入图片描述

落日语秋
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【HTML的基本标签】
xjh15053412243的博客
01-18 778
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>基本标签</title> </head> <body> <a name='top'></a> <!-- 1、排版标签 --> <p align="left">hello world...</p> <.
html怎么打出黑方块,方块怎么打，特殊符号黑方块
weixin_30268555的博客
06-07 3670
方块怎么打，特殊符号黑方块来源：互联网/编辑：佚名/时间：2020-05-14 在手机上看扫一扫进入手机端类型：休闲益智 语言：简体中文选择并单击插入-符号-，然后选择符号-中□-确定。 具体步骤如下：1.插入下拉符号-... 1.在计算机上打开Word，或打开其他页面。 2. Ctrl + Shift切换到搜狗中文输入法。 3 ...您可以单击Word中的输入复选标记并...
五彩斑斓的黑色方块
imoo的笔记
12-21 304
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body{ --size: 100.
html中黑色小方块如何添加,word里有这种小黑色方块是什么符号如何替换
weixin_29091105的博客
07-16 2791
这个是“零宽度非断开空格”(“无宽非分隔符”)。用查找替换功能时，查找内容：^z谢谢，我试过了，符号的样子和您说的“无宽非分隔符”确实是一样的。可是在我这个文档里，使用^z查找和替换，无法搜索到这个符号，半角和全角也切换了。不知道是为什么呢？请百度私信我，研究一下。word2010自动生成的目录左边的黑色小方块如何去掉？目录左边的竖线是什么，是不是你的修订打开了，如果是，选择最终状态。另外，目录左...
HTML与CSS结合制作相应的盒子模型
qq_64314976的博客
08-19 1615
综合应用HTML基本技术、CSS表格技术和相应的盒子模型概念来设计实践内容，以更简洁、更丰富的效果呈现出来。利用盒子模型完成相应内容，除显示新闻、公告列表可以使用表格外，其他布局尽量使用div等元素。页面布局参考如下：Banner栏横向填充，width=“100%”；主体内容区固定宽度，width=“1000”，使用嵌套表格进行布局和排版；底边栏横向填充，width=“100”%。
web基础-HTML.ppt
11-20
web基础-HTML.ppt
web--bootstrap入门基础笔记
09-26
作者为专科计算机软件设计专业大二学生， 笔记为一个月，32节课（90分钟）学习内容所总结， 图表和卡片轮播稍后更新， 适宜0基础、想了解的玩家，亦供资深玩家批评指导。
WEB应用开发基础-HTML
04-11
当我们畅游Internet时，...到的网站，是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标 签语言 ) 是一种建立网页文件的语言，透过标签 式的指令 (Tag)，将影像、声音、图片、文字等 连结显示出来
Web编程基础-CSS、JavaScript、jQuery第一部分-网页基础(共114张PPT).pptx
11-16
Web编程基础涵盖了许多关键概念，特别是CSS、JavaScript和jQuery，这些都是构建现代网页不可或缺的组成部分。在Web标准中，我们首先需要理解的是Web标准的核心意义及其重要性。Web标准旨在规范网页设计，确保不同...
html-css:Web开发基础
05-25
html-css 使用html＆css的简单简历（基本） 用法 HTML CSS
html怎么给表格添加盒子,div+css table布局实现代码
weixin_29164185的博客
06-16 1206
div+css table布局实现代码发布时间：2009-03-10 00:44:56 作者：佚名 我要评论下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居下面是我翻译的内容，是根据我对...
html表格在盒子里居中,经典题-设置盒子在浏览器中垂直水平居中
weixin_42303627的博客
06-20 659
基础结构、样式 盒子 复制代码html,body {height: 100%;}复制代码一、基于定位的方法盒子宽高已知方法1：需要宽高进行计算body{position：relative;}.box {position: absolute;top: 50%;left: 50%;margin-top: - height/2 px;margin-left: - width/2 px;}复制代码方法2：...
盒子模型，表格案例
zhansan的博客
07-16 345
盒子模型，表格案例
Eclipse中HTML全面变成黑色了，将颜色还原
weixin_41697424的博客
11-08 4954
Eclipse中HTML全面变成黑色了，将颜色还原 原因： 可能时设置了打开html文件的方式。我用浏览器打开的时候，勾选了设置。 还原方法： 1. window &gt; preference &gt; General &gt; Editors &gt; File Associations 2. 选中 *html  &gt; 选中 'HTML Editor' &gt; Default ...
html无序列表怎么黑心方块,MarkDown学习与Typora快捷键
weixin_39798579的博客
06-04 640
MarkDown学习[TOC]零，目录(TOC)输入[toc]然后回车，即可创建一个“目录”。TOC从文档中提取所有标题，其内容将自动更新。一，标题#+空格+内容 表示标题一个#最大，一级标题。支持六级标题Typora快捷键是Ctrl+数字 0是普通段落大小补充：类Setext形式，用底线的形式，利用 = (最高阶标题)和 - (第二阶标题)，例如：This is an H1===========...
html无序列表怎么黑心方块,Markdown语法学习
weixin_29159441的博客
06-04 837
Markdown语法学习阅读说明此笔记在马克飞象的介绍基础上，作了重新排版并完善了基本语法的使用介绍，如果对正在观看的你有帮助，可以使用马克飞象支持一下原作者。整理匆忙，若存在遗漏并被正在阅读你的发现了，劳烦指正，我会尽快做出修改，以帮助更多后来能看到的人。内容补充当前版本最后修改时间：2015.12.12反转义 用\，如把\>引用，***等标识出来目录- [标题](#标题)- [分隔线]...
html矩形框填充颜色的代码,javascript – 用颜色部分填充形状的边框
weixin_33391446的博客
06-16 930
这应该可以与Canvas一起使用,甚至可以使用CSS本身通过玩多个元素等,但我肯定会建议你使用SVG. SVG在编码,维护和生成响应输出方面提供了很多好处(与Canvas不同,Canvas在缩放时往往会变得像素化).以下是组件：>一个rect元素,与父svg的大小相同,并且具有线性渐变填充.渐变有两种颜色 – 一种是基色(浅灰色),另一种是进度(青色).>应用于rect元素的蒙版.面具...
Web前端技术开发学习笔记(HTML标记语言篇)——第4章 文字与段落标记
chanciecarney的博客
04-02 2221
第4章 文字与段落标记 4.1文字标记 文字标记主要用于设置网页中的所有有关文字方面的内容，具体包括普通文字、特殊文字、标题字、字体及文字格式等方面的标记。常用的文字标记如下表： 标记 描述 文字内容 包括普通文字、空格及特殊符号等 标题字标记 以某几种固定的字号显示的文字，共分为6个级别（H1～H6），对应着6种字号 文字的修饰标记 通过这些修饰标记，可以设定文字的不同格式，如粗体、斜体等 字体标记 设定文字的字体、字号、颜色等 4.1.1 文字内容的输入 根据文字输入方式
web渗透基础 html
最新发布
07-25
回答: 在web渗透基础中，HTML是一个重要的概念。HTML是一种标签语言，用于填充网页的内容，并且可以直接由浏览器执行。HTML文档是由HTML标签组成的超文本文档，它可以独立于各种操作系统平台，并且可以包含各种标签...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值