html css，js基本知识和个人名片的制作

最新推荐文章于 2024-09-18 07:45:32 发布

梦nine

最新推荐文章于 2024-09-18 07:45:32 发布

阅读量3.7k

点赞数 3

分类专栏：网络文章标签： html css java

本文链接：https://blog.csdn.net/qq_54850622/article/details/115347732

版权

网络专栏收录该内容

19 篇文章

订阅专栏

HTML基础知识学习

HTML :构建一个PC和移动端展示的页面。[搭骨架]
CSS:样式，显示更加丰富。[ 装修]
JS: JavaScript(JS)，动起来，调用后端接口(API) 。

1.什么是html

用来描述网页的语言、超文本标记语言、不是编程，而是一种标记语言、使用标记标签来描述网页等等…由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

2.嵌套元素

可以把元素放到其它元素之中——这被称作嵌套。

<p>我爱我的<strong>祖国</strong></p>

这里使用 标签，来强调祖国这一内容。

3.块级元素和内联元素

<p>第一段</p>
 <p>第二段</p> 
 <p>第三段</p> 
 <p>第四段</p> 


<strong>第一句话</strong> 
<strong>第二句话</strong> 
<strong>第三句话</strong>
<strong>第四句话</strong>

块级元素在页面中默认以块的形式展现。更多的是表示一类段落的语义
内联元素不会导致文本换行。更多的表示一个词、一句话等语义

4.HTML 注释

为了将一段HTML中的内容置为注释，你需要将其用特殊的记号包括起来，比如：

<p>我在注释外！</p> 
<!-- <p>我在注释内！</p> -->

常见的元素介绍

1.标题元素：越往下字体越小

<h1> 到 <h6>越往下字体越小
<h1>学习 Java</h1>
<h2>学习 Java</h2> 
<h3>学习 java</h3> 
<h4>学习 java</h4>
<h5>学习 java</h5> 
<h6>学习 Java</h6>

2.段落：

段落：  <p>
<h1>为什么数据结构很重要</h1> 
<p>因为在计算机的使用过程中，数据结构使用的非常频繁。</p>

3.列表:

> 无序列表 <ul> 
> 有序列表: <ol> 
> 列表项目: <li>

<h1>早餐提供：</h1> 
<ul>
     <li>豆浆</li> 
     <li>油条</li> 
     <li>豆腐脑</li> 
     <li>米汤</li> 
</ul>

<h1>学校怎么走？</h1> 
<ol>
    <li>沿着条路走到头</li> 
    <li>右转</li> <li>直行穿过第一个十字路口</li> 
    <li>在第三个十字路口处左转</li> 
    <li>继续走 300 米，学校就在你的右手边</li> 
</ol>

4.超链接：

超链接可以从一个页面跳转到另一个页面，或是当前页面的其他位置
使用a标签来定义超链接
属性：
herf:指定跳转路径,
值可以是外部网站的地址
也可以写一个内部页面地址
超链接是行内元素，在a标签中可以嵌套除自身外任何元素

当我们需要跳转一个服务器内部页面时，一般我们会使用相对路径，
相对路径使用./或…/
./代表同级目录下，可以省略不写
…/代表当前目录的上级目录

超链接： <a>
<p>创建了一个指向<a href="http://bitedu.vip/">比特论坛</a>的超链接。</p>

<body>
     <a href="http://www.baidu.com">超链接</a>
</body>

5.图片元素

<img src="图片路径">
<h1>图片</h1> 
<img src="bite.jpg">

6.块级无语义元素：

无语义元素，通常是用来组织内容，方便之后通过 css 或者 js 对其进行布局或操作。

<!-- 某个版块 --> 
<div>
      <h2>...</h2> 
      <p>...</p> 
</div> 

<!-- 另一个版块 --> 
<div>
    <h2>...</h2> 
    <p>...</p> 
</div>

7.内联无语义元素：

内联无语义元素： <span>
<p>大家一起往前<span>冲</span>啊！</p>

8.input

input可以当作文本框，密码框，按钮

在这里插入图片描述

9换行

1）<br></br> 换行符
2)<p></p>  段落符
3><div></div>  无语义的容器符

CSS基础知识学习

在这里插入图片描述
样式优先选择权:级别最高是自己单独的样式，然后才是全局样式。

###使用CSS有3种方式

（1）内联
使用style属性，只是对当前标签有效，页面内容和样式高度耦合的。
（2）内部样式
在head中使用style标签，当前页面有效，内容和样式一定程度分离，但是不彻底
（3）外部样式
将样式写到一个单独CSS文件中，需要用到HTML文件，引用它即可。

基本语法

<style>
 .名称1 {属性的设置；}
 </style>
 <body>
 <标签 class = "名称1">内容
 </body>

对齐

即左对齐，居中对齐，右对齐。基本语法就是在选择器里加入属性：
text-align:center/left/right;
居中
在这里插入图片描述
外边距margin

颜色背景

<style>
div{
background-color:red;
}
</style>

个人名片代码：

<html>
<h1>xxx</h1>
<h2>基本信息</h2>
<img src="psc.jpg">
<ul>
	   <li>求职意向：测试工程师</li>
	   <li>联系电话：xxxxxxxxxxxx</li>
	   <li>邮    箱：xxxxxxxxxxxx</li>
	   <a target="_blank"href="https://www.baidu.com">我的GitHub</a><br>
	   <a target="_blank"href="https://www.baidu.com">我的博客</a><br>
</ul>
<h2>教育背景</h2>
<ol>
<li>小葵花幼儿园 幼儿园</li>
<li>小葵花小学   小  学</li>
<li>小葵花中学   中  学</li>
<li>小葵花高中   高  中</li>
<li>小葵花大学   大  学</li>
</ol>
<h2> 我的项目</h2>
<li>
   <strong>1.留言墙</strong> <p></p>
    开发时间：2008年9月到2008年12月<p></p>
	功能介绍：
	<ul>
	   <li>支持留言发布</li>
	   <li>支持匿名留言</li>
	</ul>
 </li>
 <li>
   <strong>2.学习小助手</strong> <p></p>
    开发时间：2008年9月到2008年12月<p></p>
	功能介绍：
	<ul>
	   <li>支持错题检索</li>
	   <li>支持同学探讨</li>
	</ul>
 </li>
<h2>个人评价</h2>
<p>在校期间，学习成绩优良，多次获得奖学金</p>
</html>