Web前端学习笔记（第一周）

最新推荐文章于 2024-10-08 17:21:35 发布

zhangjun666dd

最新推荐文章于 2024-10-08 17:21:35 发布

阅读量790

点赞数 24

文章标签：学习笔记

本文链接：https://blog.csdn.net/zhangjun666dd/article/details/142360670

版权

Web、网页、浏览器

Web（World Wide Web）即全球广域网，也称为万维网。

网页是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成，还可以包含音频、视频以及Flash等。

浏览器是网页运行的平台。

Web标准

HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。

CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。

JS（JavaScript）：。从交互的角度描述页面的行为。相当于人的动作，让人有生命力。

HTML

基础结构


<!--html语言中的注释-->
<!doctype html><!--html文档的文档类型声明：这是一个html的文档，版本是5-->
<html><!--html标签：html文档正式开始-->
<head><!--html文档的头部区域开始，主要是用来说明html文档的一些相关属性或者设置-->
	<meta charset="utf-8"><!--meta标签：元信息标签，用来给网页添加一些相关信息或设置。charset:字符集。指定此网页的编码为UTF-8-->
	<!--常见的编码：国际化——utf-8,中文编码——GBK-->
	<title>HTML基础结构样例</title><!--title标签：设定此网页的标题-->
</head><!--html文档的头部区域结束-->
 
<body><!--body标签：表示html文档的主体区域开始，对应浏览器的对应呈现窗口-->
</body><!--body标签：表示html文档的主体区域结束-->
</html><!--html标签：html文档正式结束-->

lang语言种类

用于定义当前文档显示的语言

en定于为英语
zh-CN定义为中文

语法结构

<标签名属性=“值” 属性=“值”>...</标签名>
HTML标签通常是成对出现的（双边标记），比如 <div> 和 </div>；也有少部分单标签（单边标记），如：<br />、<hr />和<img src="images/1.jpg" />等。

常见元素

文本格式化标签

语义	标签
加粗	<strong></strong>或者<b></b>
倾斜	<em></em>或者<i></i>
删除线	<del></del>或者<s></s>
下划线	<ins></ins>或者<u></u>

表格标签

基本语法

<table>

	<tr>
		<td>单元格内的文字</td>
		<td>单元格内的文字</td>
        ...
	</tr>

    <tr>
		<td>单元格内的文字</td>
		<td>单元格内的文字</td>
        ...
	</tr>
	...

</table>

<table></table>用于定义表格的标签

<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中

<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

列表标签

无序列表基本语法

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

有序列表基本语法

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

自定义列表基本语法

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

<dl></dl>里面只能包含<dt>和<dd>。

<dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>。

表单标签

基本语法

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

属性

属性	属性值	作用
action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式
name	名称	用于指定表单的名称，以区分同一个页面的多个表单域

head区域：meta、title、style、link、script、base...
body区域：div、p、span、em、strong...
表格元素：table、tr、td...
列表元素：ul、ol、dl、dt、dd...
表单元素：form、input、select...

...

CSS

绝对单位与相对单位

绝对单位：1in = 2.54cm = 25.4mm = 72pt = 6pc。

相对单位：px：像素；em：印刷单位（相当于12个点）；%：百分比，相对周围文字的大小。

字体属性

font-size: 50px; 		/*字体大小*/

line-height: 50px;      /*行高*/

 font-family: 'Times New Roman', Times, serif;/*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/

font-style: italic ;		/*italic表示斜体，normal表示不倾斜*/

font-weight: bold;	/*粗体*/

font-variant: small-caps;  /*小写变大写*/

必须包含size和family属性

使用font属性时，必须按照以下格式的顺序书写，不能更换顺序，并且每个属性用空格隔开

body{
    font: font-style font-weight font-size/line-height font-family;
}

行间距 = 上间距 + 文本高度 +下间距

文本属性

背景属性

background-color:#ff99ff; 设置元素的背景颜色。
background-image:url(images/2.gif); 将图像设置为背景。
background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要）
background-position:center top; 设置背景图片在当前容器中的位置。
background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。属性值可以是：scroll（与fixed属性相反，默认属性）、fixed（背景就会被固定住，不会被滚动条滚走）。

CSS的引入方式：样式表

内部样式表：写在html页面内部，是将所有CSS代码抽取出来，单独放入<style>标签中

行内样式表：是在元素标签内部的style属性中设定CSS样式，适用于修改简单样式。

<div style="color:red;font-size:12px;">我要成为全栈高手</div>

外部样式表：适用于样式比较多的情况。核心是样式单独写到CSS文件中，再将CSS文件引入到HTML页面中使用。

创建后缀为.css的文件，将CSS代码写入文件中。
```
div{
    color:red;
    font-size:12px;
   }
```
在HTML页面中，使用<link>标签引入这个文件。
```
<link rel="stylesheet" href="CSS文件路径">
```