HTML/CSS共7k字带你能独立完成简单网页的制作_css可以独立开发可视化网页吗-CSDN博客

本文链接：https://blog.csdn.net/m0_52586550/article/details/118073350

这篇博客介绍了HTML的基础知识，包括Hello World、语法、各种标签的使用，强调了行级和块级标签的区别。此外，还探讨了CSS的引入方式、常见样式，如字体、文本、背景、浮动和定位。通过实例，解释了如何使用CSS的position属性。最后，提到了软件架构的C/S和B/S模式，以及新建项目的步骤。

摘要由CSDN通过智能技术生成

HTML

HTML（Hyper texte mark-up language）:超文本标记语言，可以描述文字、数字、字母，特殊符号、声音、图片、图像等多媒体内容。

Hello World

<html>
	<head>
		<title>我的第一个网页</title>
	</head>
	<body>
		Hello World
	</body>
</html>

新建记事本，并命名为Hello
编写上例中的代码
修改文件扩展名，注意：如果文件没有显示扩展名，双击此电脑，点击查看按钮，并勾选文件扩展名。如下图所示。

在这里插入图片描述

语法

HTML标签都是成对出现，有开始标签和结束标签，结束标签比开始标签多一个斜杠，个别标签例外，如img、input等
HTML标签放置在尖括号中
HTML所有标签全部放置在根标签html中
HTML文档根标签中包含head标签和body标签
head标签可以放置样式表，JS脚本、SEO关键字等等
body标签放置网页的主体内容

标签	描述
span	不会独占一行，宽度与字符长度有关。强调文本和行级标签
i	显示斜体文本效果，所有浏览器都支持
em	定义强调文本，效果和i标签差不多
b	加粗文本
strong	加粗文本
s
a	链接标签
img	图片标签
u	文本下划线
sub	下标
sup	上标

1，内部链接
<a href="text.html">内部链接</a>
2，外部链接
<a href="http://www.baidu.com">跳转到百度</a>
3，空链接
<a href="#">我是空链接</a>

target属性
<a href="#" target="_self">在自身页面中打开链接（默认属性）</a>
<a href="#" target="_blank">在新的窗口中打开链接</a>
取消链接的下划线
a{
	text-decoration:one;
}

块级标签

标签名称	描述
div	常用于页面布局，独占一行。可以放置任何标签。主要用于布局网页
p	段落标签
h1-h6	文字标题，数字越大字越小
ol	有序列表，可以通过ol 的type属性修改序号样式，也可以通过li标签的type属性修改序号样式和转换成无序列表
ul	无序列表，可以通过ul 的type属性修改序号样式，也可以通过li标签的type属性修改序号样式和转换成有序列表
table	表格标签
hr	水平分割线
br	换行

HTML设置水平分割线

1. HTML设置一条水平分割线

```
<hr />
```

这是水平分割线的最基本应用。它是居中对齐的。

2. HTML设置水平分割线的宽度

```html
<hr width="200" />

```

水平分割线的宽度为像素（px）或者相对于屏幕宽度的百分比（%）。比如：

```html
<hr width="200px" /> <!--单位为像素。默认值是将px去掉，成为上面的格式-->
<hr width="20%" />   <!--单位是相对于屏幕宽度的百分比-->
```

3. HTML设置水平分割线的粗细

```html
<hr size="30" />
```

水平分割线的粗细单位仍然是像素（px）。

4. HTML去掉水平分割线的阴影

```html
<hr noshade="noshade" />
```

一般情况下，水平分割线是带有阴影的，具体显示为一条突出的或者凹下去的线条。使用此属性，可以去掉分割线的阴影，使之成为一条无阴影效果的实心线。

5. HTML设置水平分割线的对齐方式

```html
<hr width="30%" align="left" />
```

水平分割线的对齐方式默认为居中对齐。使用align属性可以改变它的对齐方式。并且只有当它的宽度设置小于屏幕的宽度时，才会显示出对齐方式的设置效果。

6. HTML设置水平分割线的颜色

```html
<hr color="#FF0000" />
```

可以给水平分割线设置不同的颜色。

7. HTML设置水平分割线的title属性

```html
<hr size="30" title="设置水平分割线的title属性" />
```

当浏览者将鼠标悬停在分割线上时会出现属性值设置的提示内容。

8. HTML水平分割线的综合应用

```html
<hr width="300" size="20" noshade="noshade" align="right" color="#0000FF" />
```

可以分别设置<hr />的属性：size、width、align、color和noshade等。属性不用全部设置，而是根据需要选择某些属性进行设置，未设置的属性浏览器会以默认的方式显示。

- 默认方式：浏览器在遇到属性不全的标签时，对于未设置的属性将根据浏览器内部定义好的样式进行显示。

行内块级标签

可以和其他元素保持在一行，还能设置宽高

标签名称	描述
textarea
input
img
button

表单元素

标签	描述
form	表单
input
select

input type属性值

属性	描述
text	文本输入框
password	密码框
datetime-local	日期时间选择器
date	日期选择器
time	时间选择器
color	颜色选择器
radio	单选按钮，按钮互斥必须具有相同的name值
checkbox	复选框
submit	提交按钮
reset	重置按钮
hidden	隐藏域，该input不可见