网页设计基础知识

最新推荐文章于 2024-09-11 20:59:43 发布

爱编程的大李子

最新推荐文章于 2024-09-11 20:59:43 发布

阅读量933

点赞数 13

分类专栏：前端开发文章标签： html

原文链接：https://blog.csdn.net/weixin_43715012/article/details/114122130

版权

前端开发专栏收录该内容

6 篇文章 1 订阅

订阅专栏

一、Emmet语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, VScode内部已经集成该语法.

快速生成HTML结构语法
快速生成CSS样式语法

1.1 快速生成HTML结构语法

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成
如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签，用 + 就可以了比如 div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了
如果生成的div 类名是有顺序的，可以用自增符号 $
如果想要在生成的标签内部写内容可以用 { } 表示
shilt+alt+鼠标左键:可以让光标在多行
Ctrl+F:查找
Ctrl+G:跳到指定行数

1.2 快速生成CSS样式语法

CSS 基本采取简写形式即可.

比如 w200 按tab 可以生成 width: 200px;
比如 lh26px 按tab 可以生成 line-height: 26px;

1.3 快速格式化代码

Vscode 快速格式化代码: shift+alt+f
也可以设置当我们保存页面的时候自动格式化代码:

1）文件 ------.>【首选项】---------->【设置】； 2）搜索emmet.include;
3）在settings.json下的【工作区设置】中添加以下语句： “editor.formatOnType”: true,
“editor.formatOnSave”: true

二、HTML标签

1. 基本结构标签

在这里插入图片描述

2. 基本标签

1. 文件标签

文件标签：构成html最基本的标签

html:html文档的根标签
head：头标签。用于指定html文档的一些属性。引入外部的资源 > title：标题标签。
body：体标签
<!DOCTYPE html>：html5中定义该文档是html文档

2. 文本标签

注释：<!-- 注释内容 -->
		  <h1> to <h6>：标题标签
			  h1~h6:字体大小逐渐递减
		  <p>：段落标签
		  <br>：换行标签
		  <hr>：展示一条水平线
			  属性：
				  color：颜色
				  width：宽度
				  size：高度
				  align：对其方式
					  center：居中
					  left：左对齐
					  right：右对齐
		  <b>：字体加粗
		  <i>：字体斜体
		  <font>:字体标签
		  <center>:文本居中
			  属性：
				  color：颜色
				  size：大小
				  face：字体

		  属性定义：
			  color：
				1. 英文单词：red,green,blue
				2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
				3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
			  width：
				1. 数值：width='20' ,数值的单位，默认是 px(像素)
				2. 数值%：占比相对于父元素的比例

3. 图片标签：

	* img：展示图片
			* 属性：
				* src：指定图片的位置

4. 列表标签：

  有序列表：
	  ol:
	  li:
  无序列表：
	  ul:
	  li:
  自定义列表：
	 <dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	</dl>

5. 链接标签

 a:定义一个超链接
	  属性：
		  href：指定访问资源的URL(统一资源定位符)
		  target：指定打开资源的方式
			  _self:默认值，在当前页面打开
			  _blank：在空白页面打开

6. div和span：

	  div:每一个div占满一整行。块级标签
	  span：文本信息在一行展示，行内标签 内联标签

7. 语义化标签

html5中为了提高程序的可读性，提供了一些标签。

1. <header>：页眉
2. <footer>：页脚

8. 表格标签

	  1.table：定义表格
		  width：宽度
		  border：边框
		  cellpadding：定义内容和单元格的距离
		  cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
		  bgcolor：背景色
		  align：对齐方式
	  2.tr：定义行
		  bgcolor：背景色
		  align：对齐方式
	  3.td：定义单元格
		  colspan：合并列
		  rowspan：合并行
	  4.th：定义表头单元格
	  <caption>：表格标题
	  <thead>：表示表格的头部分
	  <tbody>：表示表格的体部分
	  <tfoot>：表示表格的脚部分

9. 表单标签

* 表单：
	* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
	* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
        * 属性：
            * action：指定提交数据的URL
            * method:指定提交方式
                * 分类：一共7种，2种比较常用
                   * get：
                        1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                        2. 请求参数大小是有限制的。
                        3. 不太安全。
                   * post：
                        2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                        2. 请求参数的大小没有限制。
                        3. 较为安全。

        * 表单项中的数据要想被提交：必须指定其name属性

表单项标签：
		1.input：可以通过type属性值，改变元素展示的样式
			* type属性：
				* text：文本输入框，默认值
					* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息	
				* password：密码输入框
				* radio:单选框
					* 注意：
						1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
						2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
						3. checked属性，可以指定默认值
				* checkbox：复选框
					* 注意：
						1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
						2. checked属性，可以指定默认值

				* file：文件选择框
				* hidden：隐藏域，用于提交一些信息。
				* 按钮：
					* submit：提交按钮。可以提交表单
					* button：普通按钮
					* image：图片提交按钮
						* src属性指定图片的路径	

		   * label：指定输入项的文字描述信息
			   * 注意：
				   * label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
		2.select: 下拉列表
			* 子元素：option，指定列表项
			
		3. textarea：文本域
			* cols：指定列数，每一行有多少个字符
			* rows：默认多少行。