文章目录

HTML
- - Hello World
  - 语法
  - 标签
  - - 行级标签
    - a标签属性
    - 块级标签
    - HTML设置水平分割线
    - 行内块级标签
    - 表单元素
    - input type属性值
    - input 属性
    - 常用特殊符号
    - - 区别
- 软件架构
CSS
- CSS引入方式
- css样式
- - 字体样式
  - 文本样式
  - - 背景样式
    - 隐藏样式
    - 浮动属性
    - 盒子模型
    - position定位属性
  - CSS选择器
新建项目

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不可见

input 属性

属性	描述
checked	单选按钮或者复选框被选中
name	该input的名称，用于服务端获取该input的值
placeholder	用于配置文本框的提示信息，当输入内容时该提示信息自动消息

<html><head><title>我的第一个网页</title></head><body><div style="background:yellow">我是一个div</div><div>我也是一个div</div><i style="background:green">你是个I，阁下何不同风起，扶摇直上九万里</i><i>你还是个I</i><p>早期的计算机主要用于数值计算，现在，计算机主要用于非数值计算，包括处理字符、表格
和图像等具有一定结构的数据。这些数据内容存在着某种联系，只有分清楚数据的内在联系，合
理地组织数据，才能对它们进行有效的处理，设计出高效的算法。如何合理地组织数据、高效地
处理数据，这就是 “数据结构” 主要研究的问题。本章简要介绍有关数据结构的基本概念和算法
分析方法。</p><p>计算机主要用千数值计算时， 一般要经过如下几个步骤：首先从具体问题抽象出数学模型，
然后设计一个解此数学模型的算法，最后编写程序，进行测试、调试，直到解决问题。在此过程
中寻求数学模型的实质是分析问题，从中提取操作的对象，并找出这些操作对象之间的关系，然
后用数学语言加以描述，即建立相应的数学方程。例如，用计算机进行全球天气预报时，就需要
求解一组球面坐标系下的二阶椭圆偏微分方程；预测人口增长情况的数学模型为常微分方程。求
解这些数学方程的算法是计算数学研究的范畴，如高斯消元法、差分法、有限元法等算法。数据
结构主要研究非数值计算问题，非数值计算问题无法用数学方程建立数学模型，下面通过三个实
例加以说明</p><h1>这里是一个h1</h1><h2>这里是一个h2</h2><h3>这里是一个h3</h3><h4>这里是一个h4</h4><h5>这里是一个h5</h5><h6>这里是一个h6</h6></body>
</html>

常用特殊符号

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
`	撇号	'(ie不支持)	'

区别

行级标签宽度至于内容有关
块级标签宽度默认是父容器的百分之百，宽度与内容无关
行级标签和块级标签可以相互转换

提示：

这只是一部分标签，更多的标签需要不断地练习才能记得牢靠，不用刻意的去背这些标签名称以及用法，等你一个小项目实战做下来，这些看似复杂的标签以及关系都可以被很好的掌握，前期只需要用到什么标签，去查找他的属性就行。

所谓的行级标签，块级标签，其实可以根据需要，在开发过程中通过css样式互相转换。即通过设置display属性，他的属性值中，inline（元素一行内标签进行展示），block（元素以块级标签进行展示），inline-block（元素以行内块级标签进行展示），none（隐藏标签）

软件架构

C/S:(客户端/服务器)：

需要安装客户度
当软件更新时必须更新客户端或者重新安装
主要的运算都在客户端进行，因此客户端负担较重

B/S:(浏览器/服务器)：

不需要安装客户度，只要有浏览器即可使用软件
软件更新时用户不需要更新，只需要开发人员更新服务端资源即可，用户无感知
主要运算在服务端进行，服务端负担较重
分布式，不受地域限制

CSS

用于修饰和美化html标签

CSS引入方式

行内样式/内联样式

<div style="font-family: "microsoft yahei";" >待到秋来九月八，我花开后百花杀，冲天香阵透长安，满城尽带黄金甲</div>

内嵌样式

<head><meta charset="utf-8"><title>文字样式</title><style>div{font-family: simsun;}</style>
</head>

外部样式

<link rel="stylesheet" type="text/css" href="css/index.css"/>

css样式

字体样式

样式名称	描述	可选值
font-family	修改字体
font-weigth	修改字体是否加粗及加粗程度	100-900/bold,bolder
font-size	修改字体字号
font-style	字体样式	italic\|normal

文本样式

样式名称	描述	可选值
color	修改文本颜色
text-shadow	添加字体阴影	1.x轴偏移量 2.y轴偏移量 3.模糊程度 4.阴影颜色
text-decoration	修饰文本	underline（下划线）\|overline（上划线）\|line-through（穿过）
text-align	文本对齐方式	left\|right\|center
line-height	设置文字行高	文字行高=标签高度（height）时垂直居中
text-indent	设置文字缩进	一个字符占16px

字符间距：

背景样式

样式名称	描述	可选值
background-color	设置背景颜色
background-image	设置背景图片
background-repeat	设置背景图片是否重复及重复方向	repeat-x\|repeat-y\|no-repeat
background-size	设置背景图片的大小
background-position	设置背景图片的位置

隐藏样式

样式名称	描述	可选值
display	控制元素的显示方式	none\|block\|inline
visibility	控制元素的显示和隐藏	hidden

浮动属性

属性	描述	可选值
float	让元素浮动，但是会脱离文档流	left\|right
clear	清除元素的浮动	both

盒子模型

样式名称	描述	可选值
width	定义容器的宽度
height	定义容器的高度
border	定义容器的边框，包括边框宽度，边框样式，边框颜色
margin	容器的外边距，容器边框外层距离周围容器的距离
padding	容器的内边距，容器边框内侧和内容的距离
border-radius	容器边框的弧度

position定位属性

转载于：https://blog.csdn.net/qq9764312/article/details/80204950?utm_source=app&app_version=4.9.0&code=app_1562916241&uLinkId=usr1mkqgl919blen

在html网页中可以看成一个立体空间，一个完整的页面是由多个页面堆积形成的，如下图所示：

CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。

◆position:static　无定位

该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。

◆position:absolute　绝对定位

使用position:absolute，能够很准确的将元素移动到你想要的位置，

◆position:fixed　相对于窗口的固定定位

这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。
请特别注意，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。

◆position:relative　相对定位

所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。
————————————————
版权声明：本文为CSDN博主「qq9764312」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq9764312/article/details/80204950

CSS选择器

标签选择器

标签名称{样式名称:样式值}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>标签选择器</title><style>/* 标签名称{样式属性:样式值} */*{margin: 0;padding: 0;}div{width: 200px;height: 200px;background-color: magenta;}p{width: 200px;height: 200px;background-color: magenta;}</style></head><body><div></div><p></p><p></p></body>
</html>

ID选择器

W3c标准规定id选择器只能使用一次。

#ID{样式名称:样式值}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ID选择器</title><style>#box{width: 200px;height: 200px;background-color: red;}#txt{width: 200px;height: 200px;background-color: red;}</style></head><body><div id="box"></div><p id="txt"></p></body>
</html>

class选择器（类选择器）

可以使用多次

.className{样式名称:样式值}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{width: 200px;height: 200px;background-color: red;}</style></head><body><div class="box"></div><p class="box"></p></body>
</html>

伪类选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>伪类选择器</title><style>/* 链接默认的样式 */a:link{text-decoration: none;}/*链接被访问过后的样式*/a:visited{color: red;}/* 鼠标悬停在标签上的样式 */a:hover{font-size: 20px;color: blue;/*鼠标指向链接时变成小手*/cursor:pointer;}/*鼠标点击但是未松开时的状态*/a:active{color: #008000;}</style></head><body><a href="http://www.baidu.com">百度一下，你就知道</a></body>
</html>

隔行变色的效果
<style>p:nth-child(even){background:yellow;//偶数行}p:nth-child(odd){background:red;//奇数行}
</style>
<body><h1><p>第一行</p><p>第二行</p><p>第三行</p><p>第四行</p><p>第五行</p></h1>
</body>

新建项目

使用的开发软件是HBuilder

方式1：

方式二：

在开发工具左侧项目列表空白处点击右键—>新建——>项目

新建页面：

在新建的项目上点击鼠标右键选择新建—>html文件

HTML/CSS共7k字带你能独立完成简单网页的制作相关推荐

【笔记】汉字拼音互转（带音标和笔顺）共20842字
1 爬取拼音和笔顺拼音爬自https://zidian.900cha.com/.数据文件汉字拼音带音标和笔顺共20842字("壭亪寽兯嚸"这五个字没收) 笔顺爬自http:// ...
计算机安全的加密技术,计算机安全加密技术研究(4篇)(共14695字).doc
计算机安全加密技术研究(4篇)(共14695字) 计算机安全加密技术研究(4篇)(共14695字) 第一篇:计算机安全防护中数学签名技术应用摘要:近几年来,随着全球互联网领域的飞速发展,计算机网络已 ...
HTML网页设计制作大作业(div+css) ~中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化)
HTML网页设计制作大作业(div+css) ~ 中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
Web 基础之CSS (全文5w字，超级详细)
文章目录 CSS学习 00. 使用CSS样式的方式 0.0 HTML的局限性 0.1 HTML <! DOCTYPE>声明标签 0.2 内链(行内)样式表(行内式) 0.3 嵌入式(内部) ...
关于计算机的英语作文带翻译100字,有关英语作文100字带翻译
[导语]英语作文是对学生综合能力考核最彻底的一类题型,对单词的掌握.对语法的熟悉程度.谴词造句的能力都会在写作文的水平中体现的一览无余.下面是由无忧考网为你整理的英语作文100字带翻译,希望对你有帮助 ...
小学校园里计算机文字,中小学计算机教学论文(共2228字).doc
中小学计算机教学论文(共2228字) 中小学计算机教学论文(共2228字) 一.中小学计算机教学现状计算机作为信息时代发展产物,对人们的生活影响深远,并逐渐成为不可或缺的重要部分.我国计算机教学随着 ...
计算机技术应用及信息管理,计算机应用技术与信息管理整合研究(共2808字).doc...
计算机应用技术与信息管理整合研究(共2808字) 计算机应用技术与信息管理整合研究(共2808字) 摘要:随着现代信息技术的不断发展,计算机技术已广泛应用于各行各业的管理和运行中,且呈现迅猛的发展趋势 ...
计算机与安全工程专业结合应用论文,安全工程专业教学论文(5篇)(共17517字).doc...
安全工程专业教学论文(5篇)(共17517字) 安全工程专业教学论文(5篇)(共17517字) 第一篇:安全工程专业的大学物理课程改革研究 [摘要]以安全工程专业为例,从该专业的人才培养特点和培养方案 ...
计算机工程领域的应用论文,工程项目管理中计算机应用论文(共2052字).doc
工程项目管理中计算机应用论文(共2052字) 工程项目管理中计算机应用论文(共2052字) 1在工程项目管理中应用计算机技术存在的问题计算机软件是计算机运行的重要保障,一个好的计算机软件直接决定计算 ...

HTML/CSS共7k字带你能独立完成简单网页的制作