HTML入门-学习web前要会的基本语法

最新推荐文章于 2022-12-11 14:28:00 发布

暇月

最新推荐文章于 2022-12-11 14:28:00 发布

阅读量266

点赞数

分类专栏：前端文章标签： html 前端学习 css

本文链接：https://blog.csdn.net/rulerrr_r/article/details/123099146

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html标签：
标签分为：
1.围堵标签：有开始和结束标签:<html></html>
2.自闭合标签：开始标签和结束标签在一起：<br/>
3.标签可以嵌套
4.在开始标签中可以定义属性。属性由键值对构成，值需要用单引号或者双引号引起来
5.学习：
1.文件标签
1.根标签<html></html>
头标签<head></head>
体标签<body></body>
标题标签<title></title>
定义文档类型（HTML5）
<!DOCTYPE html>定义为html文件
2.文本标签
1.注释: 
2. <h1> to <h6> 字号
3.<p> 段落标签
4.<br/> 换行
5.<hr/> 水平线绘制，属性 color=“red” width=“200” size=“10” align=“left”(size是粗细，align是对齐方式：center,left,right)
6.<b>:字体加粗
7.<i>:斜体
8.<font>：字体标签：color size face：字体
9.<center>:文字居中（包裹文本（标签）使用）
属性分析：
color:英文单词
rgb(0，0，255)0-255
#v1v2v3 00-FF比如：#00FF00是绿色
width：
数值：width=“40” 单位是像素px
数值%:占比相对于父元素的比例

3.图片标签
1.
属性：align=""(right left center)
alt=“文本"图片加载失败后显示其中内容
height=”" width="";
(关于其中的这个路径，如果采用相对路径的方法默认是在前边加上./如果想要表示前一级目录下的某个文件夹要采用…/)
4.列表标签

<ol type="A" start="4">
<li>M1</li>
<li>M2</li>
...
</ol>

	有序列表就是ol
	<ul type="square">(将每一项前边的小圆点变成小方块)
	<li>M1</li>
	<li>M2</li>
	...
	</ul>

5.链接标签

<a href="http://www.baidu.com" target="_self">这是一个链接</a>

（href：horizontal reference）
这里边的URL地址也可以写上本地的html文件：./5_list.html，或者:mailto:邮箱地址
target决定了打开新的链接的方式：1_self 在当前页面打开2._blank 打开一个新的选项卡
6.div和span
结合CSS
<span></span>：文本信息在一行中显示，行内标签，内联标签（不足一行不会换行）
<div></div>：文本标签占满一整行，块级标签
7.语义化标签
只是为了增强可读性，配合CSS使用

<header></header>
<footer></footer>

8.表格标签


```handlebars
<table>
<caption>这是一个标题</caption>
<thead>
	<tr>
		<th rowspan="2">v1</th>
		<th>v2</th>
		<th>v3</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>v1</td>
		<td>v2</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="2">v1</td>
				<td>v2</td>
			</tr>
		</tfoot>
		...
		</table>

(使用table在最外层包裹，tr代表一行，td代表一个单元格，td可以替换为th，表现为表头单元格，加粗显示且居中)
(属性：border=“2"这个可以设定边框的粗度，height=”" width="",也支持设置数值和百分比
cellpadding="“规定的是单元格边沿和内容间夹的空白，cellspacing 规定的单元格之间的空白
bgcolor=”“设置背景色 align=”"是对齐方式)
三个包裹语句也是为了能够更方便的进行控制，有顺序
rowspan(合并行)和colspan(合并列)都是td或者th中的属性，可以设置这个单元格的行和列的跨度（实现单元格合并）

记录：
放在<head></head>里面的

<meta charset="UTF-8">

可以设定为UTF-8的编码模式，否则无法正常显示中文

<font></font>
<br/>

特殊字符：＆nbsp;空格

9.表单：
使用<form></form>进行包裹：属性：action="(URL)" method="get/post"(action确定的是发送到的位置，method确定的是发送方式)
<input name="userName">这是给了一个输入框，如果没有给定name值的话无法将数据提交过去
method确定了两种提交方式：get和post，
get的请求参数会在地址栏中显示(封装到请求行中)

参数大小是有限制的
不太安全（可被看到）
post的请求参数不会在地址栏中显示(封装到请求体中)
参数大小是无限制的
较为安全
表单项标签：
input：小的输入框
select：下拉列表
textarea：文本域，大的输入框

input属性type：（想要提交上去的话都要带上name属性）
1.text，默认的文本输入框
1.placeholder=“内容” 提示输入的内容，输入框变化后自动清空
2.password：密码输入框，有效隐藏
3.radio：单选框（要想实现单选，必须采用同一个name；
每一个单选框需要有一个value，指定被选中后提交的值
加入checked属性，可以指定默认值）
4.checkbox：复选框
也后接有value属性，指定被选中后提交的值
checked指定默认值
5.id：作为选择标记
<label for="某个input的id">内容</label>，使用了这个会使得点击这个label后直接把光标放在对应的input处，如果是radio或者是checkedbox的话会选择上这个选项
6.submit和image：都是提交按钮，image使用的图片
7.file：传递文件，是选择器
8.hidden：隐藏域，加上value属性可以不可视化地提交上去一些信息，信息就放在value里边
9.color：取色器，选择颜色，返回%0-255形式
10.date/datetime-local:日期：格式不同，都可以选择时间
11.email：邮箱，HTML5判断条件是必须含有@才能提交
12.number：数字传递，必须输入数字
1. select 下拉列表
  1.

						<select>
							<option>--请选择--</option>
							<option>第一项选项</option>
							<option>第二项选项</option>
							<option>第三项选项</option>
					    </select>

实现下拉列表功能
2.<option value="v1">1</option>可以给选项赋值（最好是将最上边的一个设置value为""空），这样的话就不会提交一个不合法的选项了
<option value="v2" selected>2</option>可以将这个选项选为默认
3. textarea 文本域

<textarea cols="20" row="5" name="description"></textarea>

🔺HTML和CSS：内联样式：<div style="color:red;">Hello CSS</div>
			 外联样式：在head中：<style>
									div{
										color:red;
									
										}
			 
								 </style>
								 可以将这个文件的所有的div区块设置为color="red"
			 外部样式：建立一个css文件夹，里面加入一个后缀为.css的文件，写入：
								 div{color:red;}
								并且在需要用到的文件中的<head></head>中写入link标签进行引入即可
CSS：基础选择器：
1.id选择器：选择具体id值的元素，建议在一个html文件中id值唯一
			格式：#id属性值{设置内容}（这里设置的id中要包含英文字符，不可以是纯数字）
2.类选择器：选择具有相同class属性的元素，class元素可以重复
			格式：.class属性值{设置内容}（这里设置的class中要包含英文字符，不可以是纯数字）
3.元素选择器：选择具有相同标签名称的元素：（比如<p></p>,<div></div>,<span></span>等等）
			格式：标签名称{设置内容}
		优先级：
			(id选择器>类选择器>元素选择器)
			
扩展选择器：
		1.选择所有元素：
			*{}
		2.并集选择器：（两种选择同时修改，加入的不一定是元素选择器，id和类选择器一样适用）
			选择器1,选择器2{}
		3.子选择器：筛选选择器1下的选择器2（加入的不一定是元素选择器，id和类选择器一样适用）
			选择器1 选择器2{}
		4.父选择器：筛选选择器2的父类选择器1（加入的不一定是元素选择器，id和类选择器一样适用）
			选择器1>选择器2{}
		5.属性选择器：选择元素名称，属性名=属性值的元素
			元素名称[属性名="属性值"]{}
		6.伪类选择器：选择一些元素具有的状态
			元素:状态{}
			如：<a>(超链接)
				状态：
					link：初始化状态
					visited：被访问过的状态
					active：正在访问状态
					hover：鼠标悬浮状态
属性（{}内的内容）：<style>
					p{
					color:pink;
					font-size:30px;
					text-align:center;
					line-height:200px;
					border:1px solid red;
					}
					div{
					border:1px solid pink;
					height:200px;
					width:200px;
					background:url("img/logo.jpg") no-repeat center;
					}
					</style>
			margin是外边距
			padding是内边距，相对于不同的盒子是不同的概念
			可以设置margin/padding-top/button/left/right来确定这个块相对于某方位的内外边距
			（margin:auto自动使这个块 水平居中）
			在默认情况下，设置margin不会改变盒子的大小，但是padding会改变，此时需要加上：box-sizing:border-box;
			float是指的块漂浮，正常设置div之后默认是往下排（相当于换行，但是可以通过设置float的方向来将这几个div块叠到左边或者右边去，
															正常的换行排列相当于：float:top;）
															
补充：border-radius: 5px;可以使得文本输入框的边缘钝化（变圆润）
	  对于图片或者其他的什么块区域：如果想要让其水平居中，则将其margin设为：margin:auto;
	  想要改变上下间距，要使用：margin: auto;
								position: absolute;（设置为绝对位置）
								left: 0px;
								right: 0px;
								bottom: 260px;（下间距，可变）
								top: 70px;（上间距，可变）
								width=...px;即可
	  设置图片水平居中时，使用的是：vertical-align: middle;（不是center！）

暇月

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML入门-学习web前要会的基本语法

html标签：标签分为：1.围堵标签：有开始和结束标签:<html></html>2.自闭合标签：开始标签和结束标签在一起：<br/>3.标签可以嵌套4.在开始标签中可以定义属性。属性由键值对构成，值需要用单引号或者双引号引起来5.学习：1.文件标签1.根标签<html></html>头标签<head></head>体标签<body></body>标题标签<title&gt
复制链接

扫一扫