初学web知识-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_49519243/article/details/115045327

初学web

1.htm基本知识

html是一种用来告知浏览器如何组织页面的一种语言，相当于网页的一个框架。
1.1html结构包括两个部分<head>和<body>。
<head>里面可以用<title>定义显示在网页标题栏中的文字；<style>用于指定文的个性化样式如字体颜色大小，间距等等；<meta>标签提供了一些html文档的元数据，虽然不显示到页面上，但是对于解析html的工具而言是可读的。比如搜索引擎就会读取页面的meta标签中的一些内容来抓取关键信息。
<body>里面主要包括页面的内容，属性如下：
在这里插入图片描述
1.2<p>标签主要用于段落的标记；<br>用于换行；<pre>按代码中文字的原样显示文本内容；&nbsp显示空格；<div>为块级元素。
1.3<a></a>标签用于标记链接如：

<a target="_blank" href="https://blog.youkuaiyun.com/m0_49519243?spm=1001.2101.3001.5343">我的博客</a>

1.4一个文本表示为：

 数字1：<input id = "num1" type="number", placeholder="请输入数字1">

1.5<ul>为无序序列表，<ol>为有序列表，<li>为项目列表；
有序列表代码如下：

<ol>
			<li>
				2006 - 2012 **小学
			</li>
			<li>
				2012 - 2015 **中学
			</li>
			<li>
				2015 - 2018 **中学
			</li>
			<li>
				2018 - 2022 **大学
			</li>	
		</ol>

有序列表页面浏览内容为：
在这里插入图片描述
无序代码如下：

<ul>
			<li>
				JAVA核心技术
			</li>
			<li>
				数据结构与算法
			</li>
			<li>
				 mysql
			</li>
			
		</ul>

页面浏览效果如图：
在这里插入图片描述

2.css基本知识

css主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式,主要在html的基础上做一些美化功能。
2.1CSS 创建样式表分为三种情况：
内部样式表

<head>
  <style type="text/CSS">
      选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
      div{width:200px; height:200px; border:1px solid red;}
  </style>
</head>

行内式(内联样式)

<div style="width:200px;height:100px;border:1px solid black;"></div>

外部样式表(外链式)

 <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>

样式优先级：内联样式>内部样式>外部样式
三种样式表区别：
行内样式表：优点书写方便；缺点没有实现样式和结构相分离；使用情况较少；控制范围控制一个标签(少)。

内部样式表：优点部分结构和样式相分离；缺点没有彻底分；使用情况较多；控制范围控制一个页面(中)。

外部样式表：优点完全实现结构和样式相分离；缺点需要引入；使用情况最多，推荐；控制范围控制整个站点(多)。
2.2 id和class选择器
ID选择器：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。

HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 “#” 来定义。注意： id 属性不能以数字开头。

id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

class 选择器用于描述一组元素的样式，也叫做类选择器。
class 可以在多个元素中使用，并且一个元素也可以指定多个类名。
在 CSS 中，类选择器以一个点 “.” 号来定义。
同样的类名的第一个字符也不能使用数字。
语法：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

ID 选择器和类（class）选择器的区别：
相同点：都可以应用于任何元素
不同点：ID 选择器只能在文档中使用一次，而类选择器可以使用多次。可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名)，而ID只能指定一个。

CSS元素选择器:最常见的CSS选择器就是元素选择器，也就是标签选择器，也就是在HTML中元素的最基本的选择器。

语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

3.javaScript基本知识

JavaScript是一种描述性语言，也是一种基于对象（Object）和事件驱动（Event Driven）的，并具有安全性的脚本语言。
3.1引用javaScript的格式：
*使用<script>标签。
*使用外部JavaScript文件。
希望多个页面中运行JavaScript实现相同效果，通常使用外部文件为.js的文件。如何引用.js为扩展名的文件：

<script src=”../1.js”></script>

注意：外部文件不能包含
*直接在HTML标签中

<input name='btn' type=”button” value=”弹出消息框” onclick=”javascript:alert(“欢迎你”);”/>

以上就是初学web第一节课的大概内容，如有遗漏或错误之处请多多包涵。