HTML-CSS-js教程

最新推荐文章于 2024-08-10 10:42:27 发布

Alex Tech Bolg

最新推荐文章于 2024-08-10 10:42:27 发布

阅读量657

点赞数

分类专栏：我的转码路文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_41103204/article/details/128895708

版权

我的转码路专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML

双标签<html> </html>
单标签<img>

html5的DOCTYPE声明

<!DOCTYPE html>

html的基本骨架

<!DOCTYPE html>
<html> 
</html>

head标签

用于定义文档的头部。文档的头部包含了各种属性和信息，包括文档的标题，在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者

<!DOCTYPE html>
<html> 
	<head>
	</head>
</html>

body标签
定义文档的主体，包含文档的所有内容，在页面中显示出来，用户可以直接看到的内容

<!DOCTYPE html>
<html> 
	<head>
	</head>
	<body>
	</body>
</html>

title标签
定义文档的标题，可以显示在浏览器的标签栏或状态栏上。<title>标签是<head>标签中唯一必须要求包含的东西，就是说head一定要写title，title的增加有利于SEO（搜索引擎优化）优化

<!DOCTYPE html>
<html> 
	<head>
		<title> </title>
	</head>
	<body>
	</body>
</html>

meta标签
用来描述HTML网页文档的属性，关键词等。例如charset=“utf-8”

<!DOCTYPE html>
<html> 
	<head>
		<meta charset=utf-8">
		<title> </title>
	</head>
	<body>
	</body>
</html>

标题

<h1></h1>
<h6></h6>

生成h1～h6快捷键：h$*6

请确保将HTML标题标签只用于标题
不要因为生成粗体或大号的文本而使用标题
正确使用标题有益于SEO

标签位置
<h1 align="left"> </h1>

段落标签<p>
文本换行 <br>
水平线 <hr>

图片 <img src="" >

src：路径名称
alt：图片显示有问题后的替代文本
width，height 通常只更改width从而保持图片的原比例
title：鼠标悬停的提示

路径

绝对路径
相对路径
- 子集关系 /
- 父集关系 ../
- 同集关系 ./ (可以省略)
网络路径

超文本链接 <a href=""> name </a>

<a href=" "> 
<img > (可以放图文)
 </a>

文本标签

<em> 着重文字
<b> 粗体文字
<i> 斜体字
<strong> 加重语气
<del> 删除字
span 元素没有特定的含义

有序列表

<ol type="i">
	<li>
	<li>
<ol>

type更改每列开头为数字或字母…

无序列表

<ul type="disc">
	<li>
	<li>
<ul>

表格

<table>
	<tr>
		<td> </td> 
		<td> </td> 
	</tr>
	<tr>
		<td> </td> 
		<td> </td> 
	</tr>
</table>

快捷键生成 table>tr*8>td*2{sss}

合并单元格

水平合并colspan
垂直合并rowspan

表单

表达是由容器和控件组成，输入框叫做控件，表单就是容器，能够容纳各种各样的控件 <form action="url" method="get|post" name="myform"></form>

action：服务器地址
name：表单名称

method中get和post的区别

数据提交方式，get把提交的数据url 可以看到，post看不到
get一般用于提交少量数据，post用来提交大量数据

表单元素：表单标签，表单域，表单按钮

文本框
提交按钮

    <form>
        username: <input type="text">
        password: <input type="password">
        <input type="submit" value="Login">
    </form>

元素分类

块元素与行内元素
请添加图片描述

请添加图片描述

HTML5新增标签

请添加图片描述

容器 <div>

H5新标签

头部 <header>
导航 <nav>
定义文档中的节，比如章节、页眉、页脚 <section>
侧边栏 <aside>
脚部 <footer>
代表一个独立、完整的相关内容块，比如完整的帖子，博客文章等 <article>

请添加图片描述

CSS

css (Cascading style sheets) 样式表 .css
用于html文档中元素样式的定义

语法

css规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）

请添加图片描述

CSS的引入方式

内联样式

<p style="color:red; font-size: 20px;">内联样式</p>

不建议。缺乏整体性和规划性，不利于维护，维护成本高

内部样式

使用 <style> 标签在文档头部定义内部样式表

单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

外部样式（推荐）

请添加图片描述

<link rel="stylesheet" href="./public.css">

选择器一

CSS语法规则：选择器，以及一条或多条声明（样式）

全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化

        *{
            font-size: 30px;
            color: red;
        }

元素选择器

HTML文档中的元素，p，d，div，img

类选择器
用圆点. 来定义，针对你想要的所有标签使用
优点：灵活

选择器二

ID选择器
针对某一个特定的标签来使用，只能使用一次

#text{
    color: red;
    font-size: 30px;
}


<p id="text">Hello</p>

请添加图片描述

关系选择器

后代选择器 E F{ }

直接子元素 E>F{ }

相邻兄弟选择器 E+F{ }：E元素之后紧邻的一个F

通用兄弟选择器 E~F{ }：E元素之后的所有F

CSS 盒子模型 Box Model

请添加图片描述

弹性盒子 flex box

JavaScript

Some Questions

Node.js 是什么：

一种javascript的运行环境，能够使得javascript脱离浏览器运行
node.js就是一个前端觉得写个功能还要等后端捣鼓半天，然后干脆就自己用javascript把后端搞定的一个东西。

Alex Tech Bolg

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录