web——实验一——html和CSS初步使用

最新推荐文章于 2022-07-10 00:35:52 发布
最新推荐文章于 2022-07-10 00:35:52 发布
阅读量1.4k 收藏 5
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiwei935707936/article/details/89033206
版权

一.对于web开发总的过程的叙述

１.因特网和万维网（具体概念再扩充）

2.基本的结构框架和界面：html(基本和框架),CSS（界面设计）,Javaspcript（动态界面）

3.客户端和服务器端编程：PHP服务器端编程，cookie和session

4.文件：DOM

5.安全基础

6.方式

（有不对和需要扩充的）

二.HTML基础

１.框架必须要用的三个标签：

<!--这是注释,为方便以后就直接写了-->
<html>
      <head>  </head>

      <body> 
      </body>
</html>

２.在head里面添加的标签：

<title>收藏时出现的那个名字</title>

<link href="文件路径及名"　type="image/gif" rel="shortcut icon"/>收藏夹标签

<meta　charset="utf-8"/>描述网页元数据，网页爬取数据时会用到

 　(补充meta)　name="author" content="作者"

                                      description:描述

                                      keywords:关键字

                                      generator:生成工具

                                      robot:被检索的内容

                           http-equiv="Content-Type" content="字符集"

                                               expires:指定时间重新调用服务器

                                               refresh:指定时间重新刷新

３.在body里添加的标签：

1.
<p>段落</p>

2.
<br/>换行
<hr/>水平线

3.
标题
<h1></h1>
<h2></h2>
<h3></h3>

4.
<a　href="URL" >链接显示的文字</a>
<img src="文件路径及名"　alt="描述"/>
<!--而把图片标签放到链接里面就变成了图片链接-->

5.
<em></em>斜体
<strong></strong>粗体

6.
无序列表
<ul>   
　　　<li></li> 
　　　<li></li> 
</ul>
有序列表（在CSS list-style-type里面样式可选）
<ol>
    <li></li>
    <li></li>
</ol>
定义列表
<dl>
    <dt></dt>
        <dd></dd>
    <dt></dt>
        <dd></dd>
<dl>
表格
<table>
    <caption>标题</caption>
    <tr><th>表头</th></tr>
    <tr><td>元素</td></tr>
    <tr><td>元素</td></tr>
</table>

7.
<blockquote>整段引用</blockquote>
<q>段内引用</q>

8.
常用转义
":&quot    &:&amp       <:lt      >:gt
<code>代码</code>
<pre>预编排文字，会保留空格和回车</pre>

三.CSS基础

  1. CSS的架构和整体知识：

　　　 a.CSS是一个个类列出来的文件，没有什么架构，全都是类名字加花括号。

            b.CSS的推荐使用方法是CSS文件，而非嵌入html（嵌入直接把名字和花括号放到那里就可以了） 

　　　 c.CSS文件的嵌入是：（说明type和rel都是说明文件，media是用于设备，都是套路先记下来）。

<head>
    <link href="文件名"　type="text/css" rel="stylesheet" media="screen"/>
</head>

　　　  d.式样的优先级：浏览器<外部<内部<行内　同时它会有冲突也会有继承，还可以几个用一套

　　　　　（对于继承：　text,color,font是可以的　但border,margin,padding不可以）

　　２.具体样式内容：

            a. 字体颜色：color　　　（RGB）http://tool.oschina.net/commons?type=3

            　背景颜色：background-color

　　　　 背景图：backgroud-image:url(" ")

　　　　 相对于元素的背景位置：backgroud-position top,left,right,bottom,center,百分数，px,pt

               背景是否／如何被重复：backgroud-repeat      |*|repeat-x|repeat-y|

　　　　 背景是否随页面混动: background-attachment

　　     b. 字体：font-family   (SimSon:宋体　Garamond)

　　　　  字体斜体：font-style　（pt,px,em     90% 100%   xx-small x-small small medium large x-large ...）

                字体粗体：font-weight　（bold）

　　　　  字体大小：font-size　（italic）

　　　  c. 文本水平对其方式：text-align: left, right, center, justify

　　　　   文本修饰：text-decoration, overline, line-through (下，上，中划线)

　　　　   文本间隔：line-height, word-spacing, letter-spacing

　　　　   首字符缩进：text-indent

         3.类（选择器）:

                a.ID:

                    在html的某个（而不是一类哦）标签后加　id=" "　（只能一次）。

                　如果想要跳到页面的某处，那么可以用＃ｉｄ做链接的URL来跳转。

                　＃XXX  id选择器。

                b.class:

                    是和ID相似的概念，但可以多次出现。

　　　　　  可以有类选择器，或者多重类选择器。

　　　　  c.伪类：

　　　　　　它的样式在某个条件下是会变的。

　　　　　　     :active　：被激活或选择时

                           :focus　：键盘输入时

                           :hover　：鼠标悬浮

                           :link　：未被访问

                           :visited　：已被访问

　　　　　d.上下文选择器：

　　　　　　当一个标签套在另一个标签里面时，对这个标签使用

           ４.区域 与布局：（布局的顺序也是按以下顺序进行）

　　　　　a. 区域：

　　　　　　<span>内联</span>
　　　　　　<div>整块<div/> 可以和下几列一起构成多列布局

                  b.　盒子模型（边框）：

　　　　　　　margin,border,padding (大多数标签都有哦，而且有很多属性，请自己设置)

                  　　width,height (px,%)

　　　　　c.　浮动：

　　　　　　　float：悬停定位　left，right, none (必须要有width属性)

                      　clear不让浮动元素和这个元素重叠

                   　　overflow：auto,visible,hidden,scroll,inherit

　　　　　  e.定位：(position属性)

　　　　　　　　static:

                             relative:

                             absolute:以包含它的为参照

                             fixed:以浏览器为参照（滚动时任会停留在那个位置）

                    d.对齐

　　　　　　

无意识积累中
关注
使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】
孤寒者的博客
08-24 20万+
刮刮乐想必大家都玩过，小时候兜里一有钱，就喊上小伙伴兴冲冲的跑去家旁边的小卖部，用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱，满眼期待的刮着买来的刮刮乐，心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球… 认认真真看完本文，你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦！（当然如果你没有女朋友的话，也可以用你珍藏多年的美女图片哦！） ⛳️使用HTML、CSS和JavaS实现刮刮卡/刮刮乐♥️别着急，先看演示????使用HTML、CSS和JavaS实现刮刮乐????第①步：
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4778
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
web技术实验-使用层叠样式表CSS（附实验报告）
12-05
网站规划与网页设计 课程实验--使用层叠样式表CSS（code+report）凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数
HTML&CSS实验(1)---掌握基本HTML基本元素的使用方法
weixin_30867015的博客
04-03 1104
【实验题目】HTML&CSS实验(1) 【实验目的】掌握基本HTML基本元素的使用方法。 ----------------------个人作业，如果有后辈的作业习题一致，可以参考学习，一起交流，请勿直接copy 【实验内容】 1、根据下图提示(标出了元素)尽可能做出相似的网页（文字包含在...
web第一讲：html与css
connly的博客
10-24 200
本次归纳html与css是什么以及初步了解并使用它们
《Web前端设计与开发》实验三：HTML+CSS综合实验
无
10-09 5916
一、实验内容 用HTML+CSS实现如下页面，要求兼容主流浏览器，代码规范。 二、实验代码及成品 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>环球互联网产业园</title> <link rel="stylesheet" href="css1.css"> </head> <body&gt
Css初步认识及使用
IMPORTRANDOM的博客
06-29 303
Css案例&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;01_CSS样式使用案例&lt;/title&gt;    &lt;!--css样式分离的第一种方法: 写在页面的head标签里面--&gt;
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
- Web标准分为结构标准（如HTML），表现标准（如CSS），和行为标准（如JavaScript）。 - 采用Web标准的优势包括更佳的访问性、兼容性、可维护性和搜索引擎优化等。 4. HTML5文档结构 - HTML5文档基本结构包括...
基于web在线餐饮网站的设计与实现——蛋糕甜品店铺(HTML+CSS+JavaScr).md
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
HTML+CSS大作业——vivo官方商城
07-08
【HTML+CSS大作业——vivo官方商城】这个项目是一个基于HTML和CSS技术构建的模拟vivo官方网站的页面设计。这个任务旨在让学生掌握基础的网页布局、元素样式控制以及响应式设计等关键技能。 HTML（HyperText Markup ...
CSS实验~WEB技术小实验
09-17
CSS代码和HTML代码.一个简单的小实验用于熟悉CSS和HTML代码~对于想学习WEB技术的同学很有帮助.
html自动适配手机屏幕,手机web——自适应网页设计（html/css控制）
weixin_31999597的博客
05-30 4983
一. 允许网页宽度自动调整： "自适应网页设计"到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。对于viewport属性，我是真正在接触...
CSS初步--定义和应用样式
RainMcCom的博客
11-06 1066
定义和应用样式 CSS样式由一条或多条以分号隔开的样式声明组成，每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔。 例如：background-color:grey; color:white。1.使用元素内嵌方式：使用全局属性style将样式应用到具体的某些元素上去。例如：<a title="测试内容" href="http://www.baidu.com" style="backgro
web实验2 制作简单网页（HTML+CSS）
热门推荐
人生当苦无妨
08-20 2万+
web实验2 制作简单网页（HTML+CSS） 一、实验目的 1．掌握文本样式的设置。 2．掌握图像样式的设置。 3．掌握各种媒体的插入方法。 二、实验内容 采用DIV+CSS，制作“在线电影”页面。 三、操作提示 1．新建网站的文件夹，网站图像素材保存在images文件夹中，媒体文件放在flash文件中。 2．新建index.html页面，要求：  页面字体大小为14px，文本颜色为#000；  页面背景颜色为#edb8d2；  上下左右距均为0。 3．利用div布局，宽度为900px，居中对齐。
web应用基础 HTML & CSS 学习总结
mikumiku5的博客
07-10 304
标题是通过h1~h6来定义的 展现出来的效果是从大到小的文字，且每句话单独一行。 展现出来的效果是两行正常大小的文字。 展现出来的效果默认是带下划线的文字，点击可跳转到href指定站点。 a标签还可以设置target属性，target属性默认值为_self，即在本浏览器标签打开，可以设置为_blank在新的标签中打开。 默认会显示出图片的原本大小，src是图片的地址，alt是图片加载失败时出现的文字，title是鼠标移上去时显示的文字，且src地址以#开头，若后面跟的值存在元素id与之对应，则会跳转到该元素
2021-04-27 Web前端编程实验（一）
APPDREAMER的博客
04-27 1301
Web前端编程实验（一） 前言 本次实验所用编程语言为html，所用编辑文本工具为记事本。 注意事项 （1）。 （2）由于实验结果需要上传视频，因此没有将相关实验结果图片放置于博客中。 （3）具体所有实验请参考博客 Web前端编程（一）~（八）。 实验一 1、实验题目。（注：题目如下） 2、本实验所需掌握知识。 （所需掌握知识一：文本处理） 代码格式 代码例子 实现效果 <u> 文本 </u> <u> 苹果 </u> 下划线 <..
第2章 在HTML 中使用JavaScript
兴趣是最好的老师
12-21 541
1.元素 使用元素的方式有两种：直接在页面中嵌入JavaScript 代码和包含外部JavaScript文件。 在使用元素嵌入JavaScript 代码时，只须为指定type 属性。然后，像下面这 样把JavaScript 代码直接放在元素内部即可：     function sayHi() {         alert("Hi!");     } 如果要通
HTML中name属性和id的区别
米小豆的博客
05-08 1547
1,name常用于form表单 在网页做Post提交时，是以Form（即表单域）为单位进行提交的，一个Form里有若干个表单对象(如)，同一个页面里可以为多个Form（Asp.net不同，它只允许有一个，且名字必须为Form1），在表单表提交到服务器端后，可以直接通过Name属性取到表单域的值，却无法通过ID直接取到该表表单对象的值。 另外，同一个Form里不能有多个name属性相同的HTML
实验1：JSP动态网页基础（Html + CSS + JavaScript）实验
XGK8750的博客
11-10 2170
实验源代码地址：实验1JSP动态网页基础（Html+CSS+JavaScript）实验源代码.rar-DNS文档类资源-CSDN下载 Java web应用技术实验报告 实验1：JSP动态网页基础（Html + CSS + JavaScript）实验 姓名：_ __　_ ___ ___ 班级：_ _ _ ___　_ __　 学号：_ ____ ___ ___ 成绩：_ _ _ __　 一、实验目的： 掌握HTML的基本语法以...
一天一小时学会HTML和CSS web发布
"《Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day》是L.Lemay和R.Colburn合著的一本教程，旨在帮助读者自学如何使用HTML和CSS进行网站发布。该书由Sams Publishing出版，版权属于2011年...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值