HTML基础

最新推荐文章于 2022-12-05 21:16:24 发布
最新推荐文章于 2022-12-05 21:16:24 发布
阅读量705 收藏 5
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Moliay/article/details/88086321
版权
  • 笔记篇

1.html的操作思想：网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数
    据据包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化，只需要改变容器的属性值，就可
    以实现容器内数据样式的变化。
    一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式
    的变化
2.文字标签<font></font>
    属性：
        size：取值范围1~7（超出了7还是7）
        color：两种表示方法
            ①英文单词，eg color="yellow"
            ②十六进制：#ffff（借用工具即可，当然不用记颜色分别对应的颜色…）
3.特殊字符：
    ①空格   &nbsp;
    ②<      &lt;
    ③>      &gt;
    ④&      &amp;
    ⑤®      &reg; <!--注册符-->
    ⑥©      &copy;
4.<ul></ul>:无序列表的范围
    属性：type：实心圆disc（默认） 空心圆circle 实心方块square 
  <ol></ol>:有序列表的范围
    属性：type：阿拉伯数字 1 （默认） 小写字母 a   大写字母 A    小写古罗马数字 i    大写古罗马数字I
5.图像标签：<img/>
    属性：
        src:图片的路径
        width：图片的宽度
        height：图片的高度
        alt:图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
            <!--因为兼容性问题，有些浏览器上不显示，没有效果-->
6.相对路径：一个文件相对于另一个文件的位置
    ①当前文件和图片在同级目录下，可直接写文件名称
    ②当前文件在图片的下级目录：用../表示上级目录
        eg ：C:\if\model.html
             C:\example.jpg
             
             ../example.jpg
    ③当前文件在图片的上级目录：图片所在的目录\图片名称
        eg ：C:\if\model.jpg
             C:\example.html
             
             if\example.jpg
7.<a href=""></a>:超链接标签
    （1）链接资源：<a href="链接到资源的路径">显示在页面上的东西</a>
        属性：
            ①href:链接的资源的地址
            ②target：设置打开的方式
                * _self 在当前页面打开(默认)
                * _blank 在一个新的窗口打开
                * 当超链接不需要到任何地址，属性href为# 
                    eg：<a href="#">a example</a>
    （2）定位资源：若想要定位资源，eg:
                    ①定义一个位置
                        <a name="top">顶部啦</a>
                    ②回到这个位置
                        <a href="#top">回到顶部去</a>
8.<pre></pre>:原样输出，保留格式
9.表格标签：可以对数据进行格式化，使数据显示更加清晰
    (1)<table></table> 表示表格的范围
      属性
        ①border 表格线
        ②bordercolor 表格线的颜色
        ③cellspacing 单元格直接的距离
        ④width 表格的宽度
        ⑤height 表格的高度
    (2)<tr></tr> 表示一行
        属性： 
            align 设置对齐方式 left center right
    (3)<td></td> 表示一列
        属性：
            align 设置对齐方式 left center right
    (4)<caption></caption> 表示表格的标题
    (5)合并单元格
        rowspan 跨行
        colspan 跨列
10.表单标签：可以提交数据到网站的服务器
    <form></form> 定义一个表单的范围
        属性：
            ①action 提交到地址，默认提交到当前的页面
            ②method 表单提交的方式
                常用的两种：
                *get 默认 请求栏里会携带提交的数据 ；请求安全级别低；请求数据大小有限制
                *post 请求栏里不会携带提交的数据，数据在请求体里面；请求安全级别相对较高；没有请求数据大小的限制
            ③enctype 做文件上传时候需要设置，一般请求下不需要这个属性
    大部分的输入项使用<input type="输入项的类型"/>
    !在输入项里需要有一个name属性
    (1)<input type="text"/>普通输入项 
    (2)<input type="password"/>密码输入项
    (3)<input type="radio"/>单选输入项
        ①需要加上属性 name
        ②name 的属性值必须相同
        ③必须要有value值
        ④checked="checked"实现默认选中
    (4)<input type="checkbox"/>复选输入项
        ①需要加上属性 name
        ②name 的属性值必须相同
        ③必须要有value值
        ④checked="checked"实现默认选中
    (5)<input type="file"/>文件输入项
    
        ！！！不在input标签里面
    (6)下拉输入项
        <select name="xx">
            <option value="oo">11</option>
            <option value="nn">22</option>
            <option value="mm">33</option>
        </select>
        selected="selected"实现默认选中
    (7)文本域<textarea cols="2" rows="3"></textarea>
    
    (8)隐藏项 不会显示在页面上，但是存在于HTML代码中
        <input type="hidden"/>
    (9)提交
          <input type="submit"/>
          <input type="submit" value="注册"/><!--value属性设定显示内容-->
        使用图片提交<input type="image" src="图片路径"/>
    (10)重置按钮 回到输入项的初始状态
        <input type="reset"/>
    (11)普通按钮 用js添加特定事件
        <input type="button"/>
11.<meta http-equiv="refresh" content="5;url=qqLand.html">
12.base标签 设置超链接的基本设置
        (1)统一设置超链接的打开方式<base target="_blank"/>
13.link标签 引入外部文件       

 

（2）源码  

  •     简单应用
    1.列表的嵌套
    （1）效果图
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>菜单列表</title>
		<link rel="icon" href="fightingNow.jfif" type="image/x-icon"/>
	</head>
	<body>
		<h1>我的电脑文件列表</h1>
		<ul>
			<li>我的电脑
				<ul>
					<li>本地磁盘（C:）
						<ul>
							<li>我的文档</li>
							<li>我的收藏</li>
						</ul>
					</li>									
				</ul>
				<ul>
					<li>本地磁盘（D:）
						<ul>
							<li>我的游戏</li>
							<li>我的电影</li>
							<li id="show">我的资料</li>
						</ul>
					</li>									
				</ul>
			</li>				
		</ul>
	</body>
</html>

2.特殊字符的使用
（1）效果

（2）源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>HTML在线考评</title>
		<link rel="icon" href="fightingNow.jfif" type="image/x-icon"/>
	</head>
	<body>
		<h1>HTML在线考评</h1>
		
		<ol type="1">
			<li>
				在HTML中，换行使用的标签是（）。
				<ol type="A">
					<li>&lt;br/&gt;</li>
					<li>&lt;p&gt;</li>
					<li>&lt;hr/&gt;</li>
					<li>&lt;img/&gt;</li>
				</ol>
			</li>			
			<li>
				&lt;img/&gt;标签的（）属性用于指向图像的地址。
				<ol type="A">
					<li>alt</li>
					<li>href</li>
					<li>src</li>
					<li>addr</li>
				</ol>
			</li>
			<li>
				创建一个超链接使用的标签是（）标签。
				<ol type="A">
					<li>&lt;a&gt;</li>
					<li>&lt;ol&gt;</li>
					<li>&lt;hr/&gt;</li>
					<li>&lt;img/&gt;</li>
				</ol>
			</li>
			<li>
				&lt;img/&gt;标签的（）属性用于设置图片与旁边内容的水平距离。
				<ol type="A">
					<li>hspace</li>
					<li>vspace</li>
					<li>border</li>
					<li>alt</li>
				</ol>
			</li>
			<li>
				下列HTML结构中，不属于列表结构的是（）。
				<ol type="A">
					<li>ul-li</li>
					<li>vspace</li>
					<li>dl-dt-dd</li>
					<li>p-br</li>
				</ol>
			</li>
		</ol>
	</body>
</html>

3.文本，单选，多选，下拉，重置，关闭，文件等输入
（1）效果

（2）源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>QQ注册</title>
		<link rel="icon" href="qqIcon.jfif" type="image/x-icon"/>		
		<style type="text/css">
			#content{
				<!--float:left;-->
				color:#FFB6C1;
				background-color:#87CEFA;			
			}
		</style>
	</head>
	<body>			
		<div id="content">
			<form>
				<table>
					<tr>
						<td align="right">昵称</td>
						<td><input type="text" name="nickname"/></td>
					</tr>
					<tr>
						<td align="right">密码</td>
						<td><input type="password" name="code"/></td>
					</tr>
					<tr>
						<td align="right">性别</td>
						<td>
							<input type="radio" name="sex" value="girl" checked="checked"/>女侠
							<input type="radio" name="sex" value="boy"/>少侠
						</td>
					</tr>
					<tr>
						<td align="right">年龄</td>
						<td>
							<select name="age">
								<option value="18">18</option>
								<option value="28" selected="selected">28</option>
								<option value="38">38</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>兴趣爱好</td>
						<td>
							<input type="checkbox" name="hobby" value="write" checked="checked"/>敲代码
							<input type="checkbox" name="hobby" value="change"/>改代码
							<input type="checkbox" name="hobby" value="enjoy"/>看代码
						</td>
					</tr>
					<tr>
						<td>自我介绍</td>
						<td>
							<textarea cols="20" rows="4" name="introduce"></textarea>
						</td>
					</tr>
					<tr>
						<td>个人简历</td>
						<td>
							<input type="file" name="resume"/>
						</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>
							<!--<input type="submit" value="立即注册"/>-->
							<input type="image" src="submit.bmp"/>
						</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>
							<input type="reset" value="重置"/>
							<input name="" type="button" onClick="window.close();" value="取消"/> 
						</td>
					</tr>
					
				</table>
			</form>
		</div>		
	</body>
</html>

 

Html中img自带属性有哪些,HTMLIMG标签的属性是有哪些？了解IMG标签的用法
weixin_35732157的博客
06-04 3276
css控制图片缩放：.tu img{max-height:720px;max-width:640px;width:expression(this.width > 640 && this.height < this.width ? 640: true);height:expression(this.height > 720 ? 720: true);}说明：图片大于...
【前端学习笔记】HTML 基础
最新发布
2401_84304834的博客
04-18 2530
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
html5中图像水平边距,图像的垂直边距和水平边距属性
weixin_35663151的博客
06-30 7007
1.图像的垂直边距vspace垂直边距vspace用来调整图像与文字的垂直边距。语法：说明：在该语法中，vspace属性的单位是像素。举例：图像的垂直边距市机关幼儿园是一所省示范性幼儿园、市一级幼儿园。先后被评为浙江省科研兴校200强学校、首批“园本教研示范幼儿园”、市教育科学研究基地学校、市现代化幼儿园、市先进“结对园”、市中小学幼儿园'教师教育先进集体、市卫生先进单位、市绿化先进单位。幼儿...
html设置图像水平间距
行善之人必有余庆
05-17 2万+
设置图像的水平间距 选择您喜欢的头像 人物头像 另一组 效果：
CSS设置img属性让图片水平居中/居左/居右的写法
极客世杰
01-13 4288
一个图片的<img class="alignleft">，居左，设置图片的img属性左浮动；居右，设置右浮动；水平居中，设置margin:auto。后来一想，这个办法很不错，应该是一个在很多情况下都有效的方法！一般设置图片属性text-align:center水平居中，但这个方法经常无效，以后还是采用以下写法吧！.alignleft { display: inline; floa
html调整图片之间的距离,html中如何调整图片之间的间距
热门推荐
weixin_34632164的博客
07-02 3万+
html中，可以利用margin-left或margin-right属性来调整图片之间的间距，这两个属性分别可以设置元素的左右外边距，只需要给图片元素img添加“margin-left:值;”或“margin-right:值;”样式即可。本教程操作环境：windows7系统、HTML5版、Dell G3电脑。html中调整图片之间的间距新建一个html文件，命名为test.html；在test.h...
HTML基础模板
qq_61690596的博客
07-18 2161
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">
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4892
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
Web-作业1-1（html）
weixin_45875030的博客
06-20 470
1-1 李清照简介 人物简介 李清照(1084年3月13日~1151年5月12日) ,南宋女词人,号易安居士,婉约派代表，有“千古第一美女”之称。早期生活优裕，金兵入据中原时，流寓南方，境遇孤苦，前期多写其悠闲生活，后期多悲叹身世，情调伤感。形式上善用白描手法，自辟途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作诗文之法作词，留有诗集《易安居士文集》、《易安词》等。 ©2013&nb
html中的img、a、锚点、路径、列表、表格、表单的基本含义
m0_67883007的博客
12-05 482
1.img——属性：src.图片相对于代码文件的位置路径，也可以是绝对路径 alt.图片不能显示的时候，所代替的文字 title.鼠标悬停时显示的提示文字 width.设置图片的宽度 height.设置图片的高度2.a——属性：href.填写所需要跳转的页面地址，如果没有用#代替，可以自刷新页面
题型排版
qq_36074056的博客
10-11 331
无序排列 橘子 苹果 菠萝 柠檬 榴莲 橘子 苹果 菠萝 柠檬 榴莲 橘子 苹果 菠萝 柠檬 榴莲 树形菜单 我的电脑文件列表 我的电脑 本地磁盘(C:) 我的文档 我的收藏 本地磁盘(D:) 我的游戏 我的资料 我的电影 所属院校 北大青鸟 所属专业 计算机软件工程 在线考试试卷 HTML在线考试试卷 在HTML中,换行使用
html caption属性,html元素caption标签的使用方法及作用
weixin_33293848的博客
06-04 8515
html元素caption标签是用来定义table表格的标题，其使用方法及作用详解如下：标签的定义标签定义表格的标题，该标题会默认居中在表格顶部；标签必须直接放置到标签之后；标签的align属性已被html4废弃，而HTML5已不再支持；每个表格只能用一个标签定义一个标题。标签语法格式语法格式如下：表格标题标签是成对出现的，以为开始标签，以为结束标签。浏览器支持情况标签已被所有主流浏览器支持 。标...
HTML图像标记——img
CSDN blog of twy
11-12 1165
属性 描述 src 图像的源文件 alt 提示文字 width,height 宽度和高度 border 边框 vspace 垂直间距 hspace 水平间距 align 排列 dynsrc 设定avi文件的播放 loop 设定avi文件循环播放的次数 loopdelay 设定avi文件循环播放...
HTML img图片出现下边距的解决方法
maindek的博客
07-12 1万+
图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。 给图片定义vertical-align也可以解决这个问题，将图片的垂直对齐方式设置为 top 或 bottom，这个空隙会消失。 解决办法给img定义
HTML中CSS文本、子元素、图片水平居中和垂直居中的几种方法
Emily
01-17 2万+
CSS文本居中 1.单行文本居中 水平居中：text-align:center; 垂直居中：line-height:XXpx;/*line-height与该元素的height的值一致*/ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/t..
图片的水平间距 html,html - 我希望水平滚动图像之间的间距完全相同，如何实现？ - 堆栈内存溢出...
weixin_42501035的博客
06-05 353
我的CSS：#container {position: center;margin-top: 80px;z-index: 950;{block:IfGridTheme}margin-left: 430px;{/block:IfGridTheme}{block:IfNotGridTheme}margin-left: 435px;{/block:IfNotGridTheme}}.entry {posi...
html5中图像水平边距,约束布局中心两个按钮水平，边距小，垂直居中
weixin_29545475的博客
06-30 312
好吧，我解决了这个问题，通过在屏幕的水平中间添加垂直指引 使用(50％=> 0.5)。然后约束按钮这个理念为指导与android:id="@+id/gamepad_left_arrow"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/gamepad_lef...
HTML基础知识速览：文档结构与常用标签
"该文档是关于HTML基础知识点的总结，主要涵盖了HTML文档的基本结构、标题标签、文字属性、特殊符号、行控制、图片插入以及文字布局等方面的内容。适合初学者学习和参考。" HTML（HyperText Markup Language）是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值