HTML+CSS笔记

最新推荐文章于 2021-06-29 15:21:41 发布

recember_

最新推荐文章于 2021-06-29 15:21:41 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/recember_/article/details/110237971

版权

HTML(5)+CSS(3)

:文档类型声明，表示该文件为 HTML5文件。声明必须是 HTML 文档的第一行，位于标签之前

一、HTNL标签
html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个"/"
1.标签对：标签位于HTML文档的最前面，用来标识HTML文档的开始；标签位于HTML文档的最后面，用来标识HTML 文档的结束；
这两个标签对成对存在，中间的部分是文档的头部和主题。

2.<head></head>标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签

3.<body></body>标签对：它是HTML文档的主体部分，在此标签中可以包含<p><h1><br>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合。

4.<p></p>:段落标签

5.<span>标签自定义文字样式

6.标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级
 语法：<hx>标题文本</hx> (x为1-6)

7.在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

8.<header>我是头部标签</header> / <footer>我是底部标签</footer> / <section>我是一个区域</section> / <aside>我是侧边栏</aside>

9.<br />:换行标签；  &nbsp;：空格  <hr />:水平分隔横线

10.实现无序列表： <ul>
				<li>信息</li>
				<li>信息</li>
				......
			</ul>
  实现有序列表：<ol>
			<li>信息</li>
			<li>信息</li>
			......
		   </ol>

11.插入图片：<img>  语法：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">   图像可以是GIF，PNG，JPEG格式的图像文件

12.为网页添加超链接：<a>  语法：<a href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
  a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。

13.<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
	(1) <tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
	   <td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。表格中列的个数，取决于一行中数据单元格的个数。
	   <th>…</th>：表格的头部的一个单元格，表格表头。
	   border属性可以为表格添加边框，属性值为数字。
	(2) <thead> 标签定义表格的表头
	   <tbody>…</tbody>：如果不加<thead><tbody><tfoot> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，
	   <tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

14.<form></form>:创建表单，与用户交互，所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间
	(1)语法：<form   method="传送方式"   action="服务器文件">
	  action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)
	  method ： 数据传送的方式（get/post）
	(2)当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框
	  <form>
		<input type="text/password" name="名称" value="文本" placeholder="请输入用户名" checked="checked"/><br />
	  </form>
	  type：可以有以下值
		  type="text"：文本输入框；"password"：密码输入框； "number"：数字输入框； "url"：网址输入框； "email"：邮箱输入框；
		  "radio"：单选框，:同一组的单选按钮，name 取值一定要一致这样同一组的单选按钮才可以起到单选的作用。"checkbox"：复选框；
		  "submit"：提交；"reset"：重置
	  name：为文本框命名，以备后台程序ASP 、PHP使用
	  value：为文本输入框设置默认值。(一般起到提示作用)
	  placeholder：输入框占位符,里面可以放提示的输入信息
	  checked：当设置 checked="checked" 时，该选项被默认选中
	(3)<textarea>意见 - 使用标签创建文本域，语法：<textarea  rows="行数" cols="列数">文本</textarea>
	(4)label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。
	就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
	语法：<label for="控件id名称">  注意：标签的 for 属性中的值与相关控件的 id 属性值一定要相同。

15.<select></select>、<option></option>标签创建下拉菜单，select标签里面只能放option标签，表示下拉列表的选项，option标签放选项内容，不放置其他标签，
	<option value="向服务器提交的值">显示的值</option>，设置selected="selected"属性，则该选项就被默认选中

二、CSS
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
1.从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。
(1) 内联式：css代码直接写在现有的HTML标签中，如：

这里文字是红色

(2) 嵌入式：css样式代码写在标签之间，且一般情况下嵌入式css样式写在之间
(3) 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在

3.字体样式
(1) 设置字体：body{font-family:“宋体”;}
(2) 字体大小：body{font-size:12px;}
(3) 加粗：p span{font-weight:bold;}
(4) 设置字体样式：font-style normal：正常字体 italic：斜体，字体本身有斜体 oblique：斜体，强制字体倾斜
(5) 设置字体颜色：p{color:red;}、p{color:rgb(133,45,200);}、p{color:rgb(20%,33%,25%);}、p{color:#00ffff;}
缩写：body{
font-style:italic;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:“宋体”,sans-serif;
}
等价于：
body{
font:italic bold 12px/1.5em “宋体”,sans-serif;
}
4.文本样式
(1) text-decoration：可以设置添加到文本的修饰，默认值为none, 定义标准的文本；值为underline为定义文本下的一条线；值为overline为定义文本上的一条线。
值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。
(2) text-indent：为文本添加首行缩进，如：p{text-indent:2em;}
(3) line-height：为文字设置行间间距，如：p{line-height:1.5em;}
(4) letter/word-spacing：增加或减少字符间的空白；文字间隔或者字母间隔就使用：letter-spacing，英文单词之间的间距使用：word-spacing
(5) text-align：设置文本对齐方式，center：居中；left：居左；right：居右

5.元素分类.
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素
display：block就是将非块级元素显示为块级元素，将内联元素a转换为块状元素，从而使a元素具有块状元素特点：a{display:block;}
display：inline将元素设置为内联元素。如将块状元素div转换为内联元素，使 div 元素具有内联元素特点：div{display:inline;}
display：inline-block就是将元素设置为内联块状元素
display:none：设置此元素不会被显示
background-color:颜色值：为标签设置背景颜色
盒模型：
盒子的宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
border为盒子添加边框
border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。
border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。
border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用像素（px）。
border-top：上边框、border-right：右边框、border-left：左边框、border-bottom：下边框
border-radius：设置圆角，圆角可分为左上、右上、右下、左下。如代码：div{border-radius: 20px 10px 15px 30px;}，分开写div{border-top-left-radius: 20px;}
padding：为盒子设置内边距（填充）
div{padding:20px 10px 15px 30px;}：上、右、下、左；分开写：div{padding-top:20px;}
margin为盒子设置外边距（边界）
div{margin:20px 10px 15px 30px;}：上、右、下、左；分开写：div{margin-top:20px;}

(1) 常用的块状元素有：
	<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
    块状元素的特点：
	 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
	 2、元素的高度、宽度、行高以及顶和底边距都可设置。
	 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
(2) 常用的内联元素有：
	<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
	内联元素特点：
	 1、和其他元素都在一行上；
	 2、元素的高度、宽度及顶部和底部边距不可设置；
	 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
(3) 常用的内联块状元素有：
	<img>、<input>
	内联块状元素特点：
	 1、和其他元素都在一行上；
	 2、元素的高度、宽度、行高以及顶和底边距都可设置。

6.css布局模型
在网页中，元素有三种布局模型：
(1) 流动模型（Flow）：默认的网页布局模式
特征：
第一点：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
第二点：第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
(2) 浮动模型 (Float)
设置元素为浮动模式，并且左对齐：div{float:left;}
(3) 层模型（Layer）：层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作
层模型有三种形式：
绝对定位(position: absolute)：将元素从文档流中拖出来，然后使用left（向右移）、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位
相对定位(position: relative)：通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置
固定定位(position: fixed)：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身，由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化
(4) 弹性盒模型
设置div{display:flex}属性可以把块级元素在一排显示；flex需要添加在父元素上，改变子元素的排列顺序；默认为从左往右依次排列,且和父元素左边没有间隙。
justify-content属性：定义了项目在主轴上的对齐方式。属性值分别为：justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start：交叉轴的起点对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
align-items属性：设置纵轴排列方式。属性值分别为：align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：默认值，左对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

	给子元素设置flex占比：
		给子元素设置flex属性,可以设置子元素相对于父元素的占比。
		flex属性的值只能是正整数,表示占比多少。
		给子元素设置了flex之后,其宽度属性会失效。

7 .水平居中设置
行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置
块状元素
定宽块状元素：块状元素的宽度width为固定值-———通过设置“左右margin”值为“auto”来实现居中的
不定宽块状元素：
**已知宽高实现盒子水平垂直居中
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。
3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。
**未知宽高实现盒子水平垂直居中，通常使用定位以及translate完成
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%。
3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果，例：transform: translate(-50%, -50%);

recember_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS笔记

HTML(5)+CSS(3):文档类型声明，表示该文件为 HTML5文件。声明必须是 HTML 文档的第一行，位于标签之前一、HTNL标签html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个"/"1.标签对：标签位于HTML文档的最前面，用来标识HTML文档的开始；标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。2.<head></head>标签对：标签包含有关HTML文
复制链接

扫一扫