初学HTML+CSS+JS_js+css+html个人博客-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_37931576/article/details/103667622

本文介绍HTML、CSS和JS的基础知识，包括HTML标签、CSS样式和JS的基本概念。详细解析HTML文档结构，常见标签如标题、段落、列表等的使用，以及CSS如何应用于样式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学HTML+CSS+JS

HTML初识
HTML标签

HTML初识

html：超文本标记语言，类似于房屋结构
css：装修
js：

<!DOCTYPE html>
<html lang="en"><!--根标签-->
<head><!--思想-->
    <meta charset="UTF-8"><!--编码,gbk-->
    <title>淘宝网！淘，我喜欢</title><!--标题-->
</head>
<body><!--身体-->
</body>
</html>

HTML标签


标题，独占一行，加粗，由大到小

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

独占一行，成段展示
<p></p>

删除线
<del></del>

独占一行，斜体，加粗
<address></address>

斜体
<em></em>

加粗
<strong></strong>

标签嵌套
<strong><em>标签嵌套，斜体，加粗</em></strong>

**独占一行
<div></div>
**没有效果
<span></span>
div,span用的最多，作用是容器：
1.充当容器，分门别类，结构化【例如橱柜，衣柜，鞋柜】
2.充当容器，捆绑操作【例如搬书和搬书架】


html编码
空格：&nbsp
回车：br
转义：<div>==&lt;div&gt;


单标签：不需要修饰，比如水平线<hr>
双标签：需要修饰其中的内容，比如<body></body>


无序有序列表
<ol type="" reversed="reversed" start=""></ol>
type=[1；a；A]：按数字排序；按小写字母排序；按大写字母排序
reversed：倒叙排列
start：从第几个开始排
ol几乎不用


<ul type=""></ul>
type=[disc实心圆；square实心方块；circle空心圆]
用的很多，比如导航栏

实例：
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style:none;#没有样式
}
li{
colout:#f40;淘宝红
font-size:16px;
font-weight:bold;加粗
float:left;横过来
margin:10px;横过来 留缝隙

height:25px;
line-height:25px;
padding:0 5px;
}
li:hover{ #鼠标滑过发生的事
background：#f40;
colout:#fff;
border-radius:15px; #圆角
}
</style>


<img src="" alt="" title="">
src：目标路径
alt：图片加载失败的提示
title：图片正常，鼠标滑过图片时的说明


<a href="">百度</href>
href=""详解：
超链接：目标路径
锚点：href="#demo1"  <div id="demo1"></div>
打电话：href="tel:15595687896"
发邮件：href="mailto:1571703063@qq.com"
js:href="javascript:while(1){alert('你上当了')}"


前端向后端发送数据，关注发送数据的名字name，发送数据的值value
<form method="" action="">
	<input type="" name="" value="" checkbox="checkbox">
	<select name="">
		<option>天生值</option>
	</select>
</from>
method：发送数据的方式get/post
action：发送数据给谁

name：发送数据的名字
value：发送数据的值

type=""
text：文本框 + value="请输入姓名"
password：密码
submit：提交 + value='提交'
radio：单选框，name的值一样，valu的不一样
checkbox：复选框，name的值一样，value的值不一样
radion or checkbox中checkbox="checkbox"：是否被选中