第一周预习-HTML+CSS入门

最新推荐文章于 2024-08-03 22:09:54 发布

Hygge666666

最新推荐文章于 2024-08-03 22:09:54 发布

阅读量756

点赞数 9

文章标签： html css 前端

本文链接：https://blog.csdn.net/2301_80098008/article/details/136856923

版权

一、HTML入门

①html结构

<html>
    <head>
        <meta charset="utf-8">
        <title> 这里插入标题</title>        
    </head>
<body>
这里写内容
</body>
</html>

1)<html></html>:这是HTML文档的文档标记，即HTML标记。分别表示网页的开始，结束。

2）<head></head>HTML头文件标记，又称HTML头信息开始标记。用来包含文件基本素材（网页标题、关键字，可以放<title><meta><style>等）。

3）<title></title>HTML文件标题标记，网页的主题，显示在浏览器窗口。

4）<body></body>网页主体部分，其内可以包含<p></p><h1></h1><br><hr>等。

5）<meta></meta>必须放在head元素里。提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。

②html常用标签

1）标题标签（h1——h6）

<html>
<head>
<meta charset="utf-8">
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</head>
</html>

如下，效果图

2）段落标签<p></p>

该标签用于将一段内容包裹起来，标签内的内容与标签外的内容空一行（自动换行）。

3）段内换行<hr/>

中间不空行。

4）水平线标签 <hr/>

<html>
<head>
<meta charset="utf-8">
<body>东北师范大学信息科学与技术学院所设专业</body>
<hr/>
<body>。。。</body>
</head>
</html>

5）图片标签（img)

其形式为为

6）超链接标签（a）

用法一：将多个页面关联在一起，使用超链接可以直接访问另一个页面。

<a href="Demo1.html" target="_black">我的第一个网页</a>

其中，href指定关联页面（超链接默认效果为替换当前页面），

target指定显示目标，_black在新窗体显示。

用法二：用于锚记页面中某个位置或其他页面中的某个位置。

<a name="ne1"></a><h2>哈哈哈哈哈</h2>

name为标记名。

<html>
<head>
<meta charset="utf-8">
<body>
	<a href="Demo1.html" target="_black">我的第一个网页</a>
</body>
</head>
</html>

7)列表标签

a.有序列表

<html>
<head>
<meta charset="utf-8">
<body>
    <ol type="I"><!--设置序号-->
        <li>姓名</li>
        <li>性别</li>
        <li>学号</li>
    </ol>
</body>
</head>
</html>

b.无序列表

<html>
<head>
<meta charset="utf-8"><!--设置项目符号-->
<body>
    <ul type="I">
        <li>姓名</li>
        <li>性别</li>
        <li>学号</li>
    </ul>
</body>
</head>
</html>

8）div

div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记，那么该标签的作用会变得更加有效。

9）文本设置标签

a.<b></b>字体加粗

b.<i></i>设置斜体

c.<u></u>设置文本下划线

d.<s></s>在文本上设置一个删除线

<html>
<head>
<meta charset="utf-8">
<body>
	<b>字体加粗</b>
	<i>设置斜体</i>
	<u>加下划线</u>
	<s>文本上设置一个删除线</s>
</body>
</head>
</html>

③全局属性

a.class：为元素设置类标识

作用：规定元素的一个或多个类名

值：多个类名用空格分隔

注意：类名不能以数字开头

b.data-*:为元素增加自定义属性

作用：用于存储页面或应用程序的私有定制数据

注意：属性名不应包含任何大写字母，且在前缀data-之后必须有至少一个字符；属性值可以是任意字符串

c.draggable：设置元素是否可拖拽

值：true/false/auto

注意：链接和图像默认是可拖动的

d.id:元素id，文档内唯一。

注意：若浏览器中出现多个id名的情况，CSS样式对所以该id名的元素都生效，但javascript脚本仅对第一个出现该id名的元素生效

e.lang:元素内容的语言

f.style：行内CSS样式

g.title:元素相关的建议信息

作用：规定关于元素的额外信息，鼠标移到元素上时显示一段提示文本

④input类型

1）什么是input标签？

输入，大多数表单都是使用input标签来实现的。

语法如下代码：

<input type="表单类型"/>

说明：

input是自闭合标签，可以看到它是没有结束符号的。

2）类型

a.单行文本框-text

语法

<input type="text"/>

举例说明

<form>
    姓名:<input type="text"/>
</form>

效果

常用属性

I.value属性

默认的，单行文本框的输入区域是空白的，如果想给该区域设置显示文字，value就派上用场啦！

<form>
    姓名：<input type="text" value="这里输入您的名字"/>
</form>

II.size属性

单行文本框默认长度20像素，如果想改变默认长度，就使用size属性

<form>
    姓名：<input type="text" size="30"/>
</form>

III.maxlength属性

我们注册名字时经常会遇到这种情况，名字太长无法注册。我们可以用该属性改变其限制。

<form>
    姓名：<input type="text" maxlength="5" />
</form>

b.密码文本框-password

语法举例说明

密码：<input type="password"/>

密码文本框中输入字符不可见，这是和单行文本框的区别。

密码文本框和单行文本框拥有相同属性，这里不重复说明。

c.单选框-radio

type属性取值为radio

<input type="radio" name="组名" value="取值" />
<!--name单选按钮所在的组名-->
<!--value单选按钮的取值-->

举个栗子

<form>
    性别
    <input type="radio" name="sex" value="男" />男
    <input type="radio" name="sex" value="女" />女
</form>

如果还想为单选框设置默认选项，则用checked属性实现

<form>
    性别
    <input type="radio" name="sex" value="男" />男
    <input type="radio" name="sex" value="女" checked />女
</form>

·注意事项一：不能忘记加name属性

·注意事项二：同一组的单选框，必须设置相同的name

d.多选框-checkbox

<input type="checkbox" name="组名" value="取值" />

举个例子


<form>
    休闲时刻你最想做的事<br/>
    <input type="checkbox" name="play" value="听音乐" />听音乐
    <input type="checkbox" name="play" value="看电影" />看电影
    <input type="checkbox" name="play" value="锻炼" />锻炼
</form>

注意事项、默认，与单选相同。

e.按钮-button、submit、reset

I.button普通按钮

配合js实现各种操作

<input type="button" value="我是按钮"/>

II.submit提交按钮

<input type="submit" value="我是按钮"/>

外观上与button没差别，本质差别在于功能

III.reset重置按钮

<input type="reset" value="重新填写"/>

按钮区别：

f.文件上传-file

文件上传用input标签实现

<input type="file" />

二、CSS入门

①CSS引入方式

css引入方式主要有四种：行内样式、内嵌式、外链式、导入式。

1）行内样式

该样式是直接把css代码放到HTML标签里面，作为style属性的属性值。

<div style="width: 100px; height: 100px;border: 1px solid black;">这是一个长宽都为100px的div</div>

2）内嵌式

在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，通常写在head标签内。

<style>
    div{
        width: 100px;
        height:100px;
        border:1px solid black;
        }
</style>
<div>这是一个长宽都为100px的div</div>

3）外链式

把css样式写在.css文件内，然后通过link标签链接。

/*css代码*/
div{
    width:100px;
    height:100px;
    border:1px solid black;
        }

<link rel="stylesheet" href="url">
    <div>这是一个长宽都为100px的div</div>

4）导入式

导入式与外链式差不多，都是在外部创建一个css文件，然后再style标签内通过@import url（url）；

但是与外链式不同的是，外链式是先加载css，再显示HTML，导入式刚好相反，所以推荐使用外链式。

②CSS选择器

常用的选择器

1、元素选择器

语法：标签名{}

作用：选中对应标签中的内容

eg，p{}，div{}，ol{}，ul{}......

2、类选择器（class选择器）

语法：class属性值{}

作用：选中对应class属性值的元素

eg，<p class='A'>段落1</p>

A{}......

注意:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值。

3、id选择器

语法：#id属性值{}

作用：选中对应id属性值的元素

eg，<p id='A'>段落1</p>

#A{},......

注意 : id的属性值只能给1个,可以重复利用,不能以数字开头。

4、通配符选择器

语法：*{}

作用：让页面中所有的标签执行该样式，通常用来清除间距。

eg：*{

margin：0；//外间距

padding：0；//内间距

}

群组选择器

语法：选择器1，选择器2，选择器3...{}

作用：同时选中对应选择器的元素

eg，

<html>
<head>
<meta charset="utf-8">
<body>
<style>
    div,p,h3,.li2{
        font-size:30px;
    }
    div,.li2,.text3{
        color:red;
    }
    p{
    color:blue;
    }
    h3{
    color:pink;
    }
</style>

       <div>盒子1</div>
        <p>段落1</p>
        <p>段落2</p>
        <h3>文本标题3</h3>
        <h3 class="text3">文本标题3</h3>
        <ol>
            <li>有序列表</li>
            <li class="li2">有序列表</li>
            <li>有序列表</li>
        </ol>

</body>
</head>
</html>

关系选择器

1、后代选择器（包含选择器）

祖先元素直接或间接包含后代元素

<style>
 
  /* 后代选择器(包含选择器),选择到的是box下面的所有后代p */
     .box p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    } 
 
</style>
 
 
  <div class="box">
    <p>0000</p>
    <div>
      <p>11111</p>
      <p>22222</p>
    </div>
    <div class="box2">
      <p>333</p>
    </div>
    <p>444</p>
  </div>

2、子代选择器

父元素直接包含子元素，子元素被父元素包含

<style>
 
   /*子选择器选中的是.box下所有的儿子p
   .box>p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    } 
 
</style>
 
  <div class="box">
    <p>0000</p>
    <div>
      <p>11111</p>
      <p>22222</p>
    </div>
    <div class="box2">
      <p>333</p>
    </div>
    <p>444</p>
  </div>

3、相邻兄弟选择器

4、通用兄弟选择器

属性选择器

属性选择器一共有7种写法

1.某某[属性]

2.某某[属性=属性值]

3.某某[属性^=属性值]

4.某某[属性$=属性值]

5.某某[属性*=属性值]

6.某某[属性~=属性值]

7.某某[属性|=属性值]

伪类选择器

③简单样式

1、行内样式表（内联样式表）

是在元素标签内部的style属性中设置的CSS样式，适合修改简单样式。

<div style="color: red;font-size:12px;">hahahahaha</div>

·style是标签的属性，可以控制当前的标签设置样式。

·使用行内样式设定CSS，也被称为行内式引入。

2、内部样式表（内嵌样式表）

写到html页面内部，将所有的CSS代码抽取出来，单独放在一个<style>标签中。

<style>
div {
color: red;
font-size: 12px;
}
</style>

·<style>标签理论可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中。

3、外部样式表（引入.css文件）***重点！！！

核心：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

两步走：

i）建一个.css文件，把css代码放进；

ii）HTML页面中，使用<link>标签引入文件

<link rel="stylesheet" href="css文件路径">

④简单定位方法

1、静态定位-static

css中默认的定位方式

2、相对定位-relative

相对定位的特点就是元素本身在文档流中的占位不变，无形的东西就是B元素在文档流中的占位，这也是为什么C元素不会浮动过去的原因。可以想象成B元素的本体依然处于普通文档流中，它的替身在参照本体进行移动。

3、绝对定位-absolute

绝对定位并不是参照页面进行定位，而是参照父元素的relative进行定位，如果元素的所有父元素都没有设置relative，那么将参照根元素html进行定位

4、固定定位-fixed

无论如何滑动页面，固定定位的元素位置都不会被改变，完全脱离文档流。

Hygge666666

关注

9
点赞
踩
29

收藏

觉得还不错? 一键收藏
9
评论
第一周预习-HTML+CSS入门

输入，大多数表单都是使用input标签来实现的。
复制链接

扫一扫