学习记录_学习帮扶记录表博客-CSDN博客

本文链接：https://blog.csdn.net/weixin_45065743/article/details/102824595

今天前端学习记录

第一次博客随便写点，主要也就自己看看。当个仓库。

一，html

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。 [1]

	<!doctype html>

二，css

1， css的定义。

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]

2，盒子模型。

盒子模型解释
元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：

盒子模型示例图片

把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

设置宽高

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
设置边框
设置一边的边框，比如顶部边框，可以按如下设置：

border-top:10px solid red;
其中10px表示线框的粗细；solid表示线性。

设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

border:10px solid red;
设置内间距padding

设置盒子四边的内间距，可设置如下：

padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */
上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
四个方向的内边距值。 */
padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */
设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。

外间距居中技巧
如果子元素是块元素，且它的宽度小于父元素，可以将子元素左右设置auto来水平居中子元素

/* 子元素上下外边距设为0，左右设置为auto */
margin:0px auto
盒子的真实尺寸
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

3, css表格

html表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、<form>标签 定义整体的表单区域

action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式和“post”方式
2、<label>标签 为表单元素定义文字标注

3、<input>标签 定义通用的表单元素

type属性
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
value属性 定义表单元素的值
name属性 定义表单元素的名称，此名称是提交数据时的键名
4、<textarea>标签 定义多行文本输入框

5、<select>标签 定义下拉表单元素

6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项

<!doctype html>

		<form action='https://www.baidu.com' method='get'>
			<p>
				<label>
					姓名：
				</label>
				<input type='text' name='username' placeholder='请输入您的姓名'/>
			</p>
			<p>
				<label>
					密码：
				</label>
				<input type='password' name='password' placeholder='请输入您的密码'/>
			</p>
			<p>
				<label>
					性别：
				</label>
				<!-- 单选框需要几个选项姓名相同，表明他们是同一个选题 -->
				<input type='radio' name='gender' value='0'/>男
				<input type='radio' name='gender' value='1'/>女
			</p>
			<p>
				<label>
					爱好：
				</label>
				<input type='checkbox' name='like' value='sing'/>唱歌
				<input type='checkbox' name='like' value='dance'/>跳舞
				<input type='checkbox' name='like' value='coding'/>编程
				<input type='checkbox' name='like' value='boxing'/>拳击
			</p>
			<p>
				<label>
					照片:
				</label>
				<input type ='file' name='person_pic'>
			</p>
			<p>
				<label>
					籍贯:
				</label>
				<select style='name:site;width:100px'>
					<option value='北京'>北京</option>
					<option value='上海'>上海</option>
					<option value='湖南'>湖南</option>
				</select>
			</p>
			<p>
				<input type='submit' name='1' value'提交'>
				<input type='reset' name='2' value'重置'>
			</P>
		</form>
		
		
		
		<iframe src='todaynews.html' name='mainframe' frameborder='0' width='320px' 
		height='350px' >
			page 1
		</iframe>
		<div>
			<a href='html.html' target='mainframe'  >001页面</a>
			<a href='html1.html' target='mainframe'>002页面</a>
			<a href='todaynews.html' target='mainframe'>003页面</a>
		</div>
	</div>
	
</body>