HTML（day 1）

最新推荐文章于 2022-03-03 16:46:05 发布
最新推荐文章于 2022-03-03 16:46:05 发布
阅读量142 收藏
点赞数
分类专栏： vue框架学习 文章标签： html 表格 超链接 层
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42306803/article/details/87837297
版权

文章目录

一、HTML基础知识（1）

1.1 HTML文档结构

  • <html></html>表示HTML文件的开始和结束
  • <head></head>构成HTML文件的头部部分
  • <body></body>时html文档的主体部分

1.2 META标记

META标记是html语言的head部分的一个辅助性的标记的它位于head和title标记之间，他提供给用户不可见的信息。

1.3 Title标记

<title></title>之间的文字会显示在浏览器视窗上最上面蓝色部分里。

1.4 文字上的分隔标记

<br>换行
<p>分段
& nbsp(没中间的空格)空格

1.5 排版的标记

<center>内容<center>使内容置中
<pre>内容</pre> 格式不变
<p></pr> 在<p>中加上一些简单的属性设置，就可以让内容实现文件置左，置右，置中。

1.6 字体标记
<h1>内容</h1>设置标题字体尺寸
<font color=" " size=" "> 设置字体的颜色尺寸和颜色
<b>加粗
<i>斜体
<u>底线
<kbd>用粗体等宽字体显示
<var>用较小的固定宽度显示字体

1.7 字体变化标记

<dfn><</dfn>用于名词解释，斜体显示
<sup></sup> 上标
<smap></smap>用于字母序列等宽
<sub></sub> 下标
<em></em> 强调
<address></address>模拟信封上的字体
<strong></strong> 加强
<s></s>删除线
<strike><strike>删除线
<big></big>比默认字号大一号
<small></small>比默认字号小一号
<code></code>以等宽字体显示计算机程序代码

1.8背景标记

例如:<body bgcolor=“red”> background=“123.jpg”>

  • bgcolor可以设置背景颜色
  • background可以设置背景图片

二、HTML基础知识（2）

2.1 IMG标记—插入图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	    //src是图片的路径
		<img src="img/307811.jpg" alt="这是一张图片" height="100px" width="100px">
	</body>
</html>
结果:

2.2 序列标记

  • 无序列表<ul>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<ul>
			<li>^(*￣(oo)￣)^</li>
			<li>^(*￣(oo)￣)^</li>
			<li>^(*￣(oo)￣)^</li>
		</ul>
	</body>
</html>
 - ^(*￣(oo)￣)^
 - ^(*￣(oo)￣)^
 - ^(*￣(oo)￣)^
  • 有序列表<ol>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<ol>
			<li>^(*￣(oo)￣)^</li>
			<li>^(*￣(oo)￣)^</li>
			<li>^(*￣(oo)￣)^</li>
		</ol>
	</body>
</html>

 1. ^(*￣(oo)￣)^
 2. ^(*￣(oo)￣)^
 3. ^(*￣(oo)￣)^
  • 自定义列表<dl>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<dt>
			<dl>你好呀</dl>
			<dl>你好呀</dl>
			<dd>你不好</dd>
			<dd>你不好</dd>
		</dt>
	</body>
</html>

结果如下:
你好呀
你好呀
你不好
你不好

2.3 特殊字符—转义字符

&lt；<
&nbsp；空格
&qout ;"
&amp ;&
&gt ;>

2.4 超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com">百度一下</a>
	</body>
</html>

2.5 表格

2.5.1 定义

<table>…</table>的作用是在html上创建表格。

2.5.2 表格的结构

  • <th></th>标签用来书写列名
  • &lttr></tr>表示表格的行
  • &lttd></td>表示表格的列
  • <caption></caption>表示表格的名称

2.5.4 表格用到的参数

  • boder 设置为0，不显示表格边框，设置为1，显示表格边框
  • width=“500px” 设置表格的款
  • height=“500px” 设置表格的高
  • align=“center” 设置表格的对齐方式
  • cellspacing=“0” 设置表格线条的间距
  • cellpadding=“0px” 设置表格中的内容和单元格的内间距
  • background=“img/1.jpg” 设置表格的背景图片
  • bgcolor="#ADFF2F" 设置表格的背景颜色
  • rowspan=“2” 上下合并单元格
  • colspan=“2” 左右合并单元格

2.4.5 创建表格实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellpadding="0" height="400" width="600px" cellspacing="0">
			<caption>学生信息表</caption>
			<tr>
				<th>姓名</th>
				<th>姓名</th>
				<th>姓名</th>
				<th>姓名</th>
			</tr>
			<tr>
				<td>
					<table border="1" cellspacing="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
						<tr>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
						</tr>
					</table>
				</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

运行结果:
学生信息表
姓名姓名姓名姓名

三、其他标签

3.1 Input标签分类

  • text -文本框
  • button -按钮
  • submit-提交
  • reset-重置
  • password -密码
  • checkbox-多选
  • radio-单选
  • file -上传文件
  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间（小时和分钟）
  • datetime - 选取时间、日、月、年（UTC 时间）
  • datetime-local - 选取时间、日、月、年（本地时间）

3.2 举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="">
			<table border="1" cellspacing="0" cellpadding="" height="400px" width="600px">
				<tr align="center">
					<td>姓名</td>
					<td><input type="text" name="" id="" placeholder="填写姓名" /></td>
				</tr>
				<tr align="center">
					<td>密码</td>
					<td><input type="password" name="" id="" placeholder="填写密码" /></td>
				</tr>
				<tr align="center">
					<td>性别</td>
					<td><input type="radio" name="sex" id="nan" placeholder="" checked="checked" /><label for="nan">男</label>
						<input type="radio" name="sex" id="nv" placeholder="" /><label for="nv">女</label></td>
				</tr>
				<tr align="center">
					<td>地址</td>
					<td><textarea rows="5" cols="40">

				</textarea></td>
				</tr>
				<tr align="center">
					<td>爱好</td>
					<td></td>
				</tr>
			</table>
		</form>
	</body>
</html>

3.3 一些输入框

  • 邮箱输入框

<input type=“email” name=“user_email” />

  • 数字输入框

<input type=“number” name=“points” min=“1” max=“10” />

  • 数字范围输入框（进度条）

<input type=“range” name=“points” min=“1” max=“10” />

  • 颜色选择框

<input type=“color” name=“colortext”/>

3.4 补充

  • 在input标签里placeholder参数与value参数都是作为提示信息，而placeholder在输入时会自动删除提示信息，而value不会。
  • 在性别一栏里，lable标签的for参数和前main的input标签里的id一致，作用是在点击"男"或者"女"或者radio时，都去起选择作用，checked作用是默认选中checked所在的属性。
  • 同一个name的作用是，是选择只能选择相同name中的一个值。
  • textarea可以自定义行列属性。
初心魏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML（二）
mhfaaa的博客
03-22 113
文本元素 所谓文本元素，就是将一段文本设置成相匹配的结构和含义 文本元素总汇 HTML5规范指出：使用元素应该完全从元素的语义出发。但是由于历史遗留及用户至上的原则，这种语义会宽松许多。 a 生成超链接 br 强制换行 wbr 可安全换行 b 标记一段文字但不强调 strong 表示重要 i 表示外文或科学术语 em 表示强调 code 表示计算机代码 var 表示程序输出 samp 表示变量 kdb 表示用户输入 abbr 表示缩写 cite 表示其他作品的标题 del 表示被删除的文字 s 表示文字已不
制作网站的过程 Day1-HTML基础（Python）
m0_64492647的博客
03-27 2008
用python建网站，day-1，持续更新中...
四天学会JavaScript(Day1~Day4)
热门推荐
qq_41424688的博客
10-06 5万+
七天学完JavaSctipt~Day1 前言        在9月22号当时距离国庆还有8天的时候,原本是说国庆计划五天的时间来总结微服务的(详情见微服务架构设计模式与CAP定理),可没想到自己太过心急...提前过了一遍。。所以这次就打算用国庆的时间来好好学学JavaScript。其实前端这一块呢,我几乎是一个小白。过去也只是写写Ajax,或者整几个XX事件,接收接收数据而已。所以这个国庆我是计划用七天的时间把JavaScript语言从头
【Vue-day1】Vue获取Html标签中的值
m0_57450589的博客
03-03 7069
方法1：在自定义函数中加上$event，在js函数中可以获取到点击事件的标签，从而获取对应标签的值，易于分离。 Html代码： <a href="javascript:;" @click="getCity($event)">北京</a> Js代码： getCity:function(event){ console.log(event.target.innerHTML); } 方法2：vue的ref和$refs方法（在Js中test不知道如何分离多...
day1 HTML.txt
04-10
针对0基础的从头解读
day1
03-18
第一天 我于3月17日上午9点在我第一个本地制作的github存储库中添加了此存储库
day1firstrepo
02-16
:bust_in_silhouette: 作者1 :handshake: 贡献 欢迎提供文稿，问题和功能要求！ 随时检查。 表示支持 给一个 :star: 如果您喜欢这个项目！ 致谢 给使用过代码的任何人的提示 灵感 等等 :memo: 执照 该项目是许可...
day01-HTML附件
最新发布
07-23
day01-HTML附件
HTML5_day01
08-05
HTML5_day01:主要记录了sublime的信息以及安装，和Package Control的插件管理器，和Emmet插件的简略使用
vscode配置vue环境
初心魏的博客
11-15 4361
1.1 vscode开发vue visual studio code 配置vue开发环境
vue 3 day(1)
初心魏的博客
11-19 880
@[TOC](vue 3 day(1)) 一、基本语法 1.1 变量的定义 定义变量 export default { data() { return { name: "jack", name1:"rose", name2:"lili" } }, } 使用变量 <div class="about" id="about"> <h1>This is an about page</h1>
spring boot day(2)
初心魏的博客
11-29 573
一、与前端交互存在的问题 1.1 关闭spring boot项目中的spring secyrity exclude = {SecurityAutoConfiguration.class @SpringBootApplication(exclude = {SecurityAutoConfiguration.class}) //@SpringBootApplication(exclude= {DataSourceAutoConfiguration.class}) public class Helloworl
vue day(3) 过渡，生命周期，自定义指令
初心魏的博客
02-04 288
一、transition过渡 1.1 单元素过渡 使用<transaition></transition>标签进行控制 1.2 多元素过渡 多元素的意思是多个元素中一次只能选中一个元素进行动画展示 前提是多个元素的key值不一样，或者标签的类型不同，不然不会有动画效果。 mode:out-in/in-out,来控制动画切换的方式 1.3 多个组件过渡 和多元素过渡方式一...
vue.js补充 组件,v-for,v-model,computed
初心魏的博客
01-14 287
1.1 vue的好处 通过vue绑定的数据可以直接更改此数据在内存中的值，如果用js的话需要调用相应的API才可以完成此功能，提高了程序的性能。
vue day(2)　表单，请求，组件，父子通信
初心魏的博客
02-02 227
文章目录一、表单，请求，组件1.1 表单绑定相关修饰符1.2 fetch请求资源1.3 axios请求资源1.4 vue计算属性1.5 计算属性方式模拟数据过滤1.6 定义全局组件1.7 定义局部组件1.8 组件和vue实例的区别1.9 组件中的父传子二、组件相关知识2.1 属性验证2.2 子传父2.3 ref通信2.4 ref通信模拟父传子2.5 中央事件总线2.6 动态组件2.7 slot插槽...
vue day(1)
初心魏的博客
02-01 208
文章目录一、基本语法1.1 基本概念1.2 测试1.3 指令1.4 动态绑定class1.5 动态绑定style1.6 条件渲染1.7 列表渲染 一、基本语法 1.1 基本概念 el： 对应标签中的id属性 data：对应标签中的对应变量 methods：对应标签中的方法 {{}}中可以是变量，基本类型，表达式，方法，方法是{{method()}}这种形式，字符串类型是{{‘str’}}。 ...
前端基础学习
初心魏的博客
02-08 117
一、前端基础学习 1.1 vue vue 1.2 html 1.3 css 1.4 js
day10_JavaScript高级1
08-08
1. BOM对象：BOM对象是JavaScript的浏览器对象模型，通过BOM可以控制浏览器的行为和属性。本节课主要学习了BOM对象的使用方法，其中包括常用的window对象的属性和方法，如location对象用于获取和设置当前页面的URL，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值