天天看点
返回

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

文章目录

  • 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>
  1. 新建记事本，并命名为Hello
  2. 编写上例中的代码
  3. 修改文件扩展名，注意：如果文件没有显示扩展名，双击此电脑，点击查看按钮，并勾选文件扩展名。如下图所示。
HTML/CSS共7k字带你能独立完成简单网页的制作HTMLCSS新建项目

语法

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

标签

行级标签
标签 描述
span 不会独占一行，宽度与字符长度有关。强调文本和行级标签
i 显示斜体文本效果，所有浏览器都支持
em 定义强调文本，效果和i标签差不多
b 加粗文本
strong 加粗文本
s
a 链接标签
img 图片标签
u 文本下划线
sub 下标
sup 上标
a标签属性 
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. 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>
HTML/CSS共7k字带你能独立完成简单网页的制作HTMLCSS新建项目
常用特殊符号
显示结果 描述 实体名称 实体编号
空格
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
` 撇号 '(ie不支持) '

区别

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

提示：

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

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

软件架构

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

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

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

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

CSS

用于修饰和美化html标签

CSS引入方式

  1. 行内样式/内联样式 
<div style="font-family: "microsoft yahei";" >待到秋来九月八，我花开后百花杀，冲天香阵透长安，满城尽带黄金甲</div>
  1. 内嵌样式 
<head>
		<meta charset="utf-8">
		<title>文字样式</title>
		<style>
			div{
				font-family: simsun;
			}
		</style>
</head>
  1. 外部样式 
<link rel="stylesheet" type="text/css" href="css/index.css"/>
HTML/CSS共7k字带你能独立完成简单网页的制作HTMLCSS新建项目

2

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

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网页中可以看成一个立体空间，一个完整的页面是由多个页面堆积形成的，如下图所示：

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

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选择器

  1. 标签选择器 
标签名称{样式名称:样式值}
           
<!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>

  1. 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>

  1. 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>
  1. 伪类选择器 
<!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/CSS共7k字带你能独立完成简单网页的制作HTMLCSS新建项目
HTML/CSS共7k字带你能独立完成简单网页的制作HTMLCSS新建项目

方式二：

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

新建页面：

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

HTML/CSS共7k字带你能独立完成简单网页的制作HTMLCSS新建项目
html/css css html 定位
上一篇: 基本的SQL语句
下一篇: 游戏开发随手记:cocos2d ccLayer响应触摸事件方法

继续阅读