复习上学期的HTML CSS(1)

自己跟着网上教程复习上学期的HTML CSS,因为已经忘得差不多了,而且现在学的js也要以HTML CSS为基础,坚持每天持续更新。

 

B/S 网络结构

 

Browser/Server 浏览器/服务器,这是现在最流行的网络模式。如新浪网、凤凰网等。

 

C/S Client/Server 客户端/服务器。最关键的地方,在自己电脑上安装一个客户端软件,通过客户端访问服务器。QQ

 

 

 

HTML 简介

 

HTML  Hypertext Markup Language 超文本标注语言。

HTML是一种规范,是一种标准,编写网页的一种标准。

超文本:就是网页上不光有文本,还有图片、音乐、视频等。

标注:是一种记号,是一种标志。如:红绿灯。

语言:这里的“语言”就是代码,跟所谓“程序语言”一点关系都没有。

HTML的主要目的:就是用来显示网页的不同效果,不同部分。如:<b>文本</b>

 

HTML文件结构

 

<html>

       <head>

              <title>新浪首页</title>

</head>

<body>

       网页正文··、、、、、、

</body>

</html>

HTML文件结构的说明

l  <html></html>标记的含义:告诉浏览器,其中的代码用什么格式(图片、视频)来编译。

l  <head></head>标记的含义:告诉浏览器,网页中的汉字用什么字符集(GB2312、BIG5、JIS)显示。不使用正确的字符集,网页会出现乱码。GB2312(简体中文)、BIG5(繁体中文)、JIS(日文)、utf-8(多国语言)

l  <title></title>中只能是纯文本,任何标记都会原封不动的显示。

l  <body></body>是网页主要内容的显示区域,网页中99%的内容都必须放在<body>中,最终浏览器翻译以后,才能看见结果。

 

l  功能:告诉浏览器,如何翻译汉字

 

l  Content-type:内容类型

l  Control:详细内容类型介绍

l  Text/html:网页是text格式,html是文本中的小格式

l  Charset:字符集,主要控制汉字如何显示

l  Utf-8:多国语言编码,什么国家的语言都可以正常显示

 

HTML标签格式

 

HTML标记,大致分两类:(1)双边标记;(2)单边标记

1、 双边标记

  双边标记,是指有开始和结束标记,内容放在开始和结束标记之间。如:<b>内容</b>

  语法格式:<标签 属性1=“值1” 属性2=“值2”>内容</标签>

  “属性”的理解:人的特征(属性)有身高=170cm、体重=70KG、姓名=张三

2、 单边标记

  单边标记,只有开始标记,而没有结束标记,单边标记一般是没有内容。如:<br />

  单边标记一般起一个特殊的功能。

单边标记常用的有10多个标记。

语法格式:<标签 属性1=“值1” 属性2=“值2” />

 

HTML标签编写规范

 

l  HTML标记不区分大小写。如:<font>=<Font>=<fOnt>

l  HTML标记属性可有可无,有的标记是没有属性的。如:<html><head><title>等

l  双边标记的内容在开始和结束标签之间,单边标记没有内容。

l  HTML标记可以相互嵌套,但一定注意是顺序嵌套,外层套内层,一层套一层

 

 

<body>的常用属性

 

l  bgcolor:网页背景色。如:<body bgcolor=”red”>

l  background:网页背景图片地址。如:<body background=”images/1.jpg”>

 

 

HTML文本修饰标记

 

l  <b></b>:加粗bold。如:<b>HTML文件</b>

l  <i></i>:斜体italic。如:<i>HTML文本</i>

l  <u></u>:下划线underline。如:<u>HTML文本</u>

l  <s></s>:删除线strike。如:<s>HTML文本</s>

l  <sup></sup>上标。

l  <sub></sub>下标。

 

 

 

 

l  <font></font>字体标记

  • Size:文本大小,取值1-7。1小,7大
  • Color:颜色值。
  • Face:字体。楷体、黑体、宋体、微软雅黑

 

 

 

 

 

HTML排版标记

l  <p></p>表示一个段落

  • 常用属性:align:水平对齐方式,取值:left(左)、center(居中)、right(右)
  • 例:<p align=“right”>段落段落段落段落段落段落段落段落</p>

l  换行标记(单边标记)<br />

l  水平线标记(单边标记)<hr />

  • Size:水平线的粗细,单位一般为px。
  • Color:水平线的颜色。
  • Width:水平线的宽度。可以用百分数 %
  • Noshade:去掉水平线的阴影(值等于本身)。如:noshade=”noshade”

 

 

l  <pre>预排版标记

  • 功能:将保留所有的空白字符(空格、换行符),换句话说就是原封不动输出。

 

 

 

 

l  标题标记:<h1></h1>………<h6></h6>

  • 功能:定义各种标题
  • 属性:align水平对齐,取值:left、center、right。
  • 语法:<h1 align=”left | center | right”></h1>

 

 

 

<div>和<span>标记

<div>是没有任何意义的标记,但是又是使用最多的标记。<div>一般要与CSS配合使用,<div>是一个块元素。

<span>是没有任何意义的标记,但是又是使用最多的标记。<span>一般要与CSS配合使用,<span>是一个行内元素。

(1)块元素

  • 块元素一般是单独占一行,
  • 块元素有哪些?<div>、<p>、<h1>、<h2>、<pre>等

       (2)行内元素

  • 行内元素不会单独占一行。
  • 行内元素的宽度,主要是根据内容决定。
  • 多个行内元素,会排在一行。
  • 行内元素有哪些?<font>、<b>、<i>、<u>、<sub>、<sup>等

结论:在标记嵌套时,一般是块元素中嵌套行内元素。

 

 

HTML字符实体

  • 空格:&nbsp;代表一个半角空格。一个汉字是2个字节:1个字节相当于1个半角空格。
  • <:&lt;
  • >:&gt;
  • &:&amp;
  • ¥:&yen;
  • ×:&times;
  • ÷:&divide;

 

 

 

 

HTML项目符号

<ul>

       <li>内容1</li>

       <li>内容2</li>

       <li>内容3</li>

</ul>

  • <ul>或<li>的常用属性
  • Type:项目符号的类型,取值:disc(小黑点)、circle(空心圆)、square(实心方块)。

 

 

 

 

 

注意:在HTML标记中,内容应该放在最底层标记中。

       <ul>和<li>是块元素。

HTML编号列表(有序列表)

<ol>

       <li>…………</li>

       <li>…………</li>

       <li>…………</li>

</ol>

  • <ol>或<li>的常用属性

       Type:编号类型,取值:1、a、A、i、I

       Start:从第几个开始编号(数字)。

 

 

 

 

滚动字幕标记<marquee>(已淘汰)

语法格式:<marquee>滚动的内容</marquee>

常用属性

  • Width:滚动宽度
  • Height:滚动高度
  • Bgcolor:滚动背景色
  • scrollAmount:滚动步长值。值越大,滚动越快。
  • scrollDelay:两步之间的停留时间,以毫秒单位。1秒=1000毫秒。
  • Loop:循环滚动的次数。
  • Behavior:滚动的方式。取值:alternate(循环滚动)、scroll(单方向循环滚动)、slide(只滚动一次)

注意:当取值为scroll时,可改变方向(和direction配合使用。Direction:滚动方向,取值:up、down、left、right)

 

 

 

 PS:1点了,所有内容都是从自己文档笔记直接复制上来的,有些项目符号显示不出来,还有着重颜色也没有了,将就看吧,觉得有意思的可以联系我发源文档和一些代码例子。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369912.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

星战前夜服务器维护时间,EVE星战前夜开测时间在什么时候 什么时候测试

EVE星战前夜什么时候开测&#xff0c;EVE星战前夜的测试时间在什么时候&#xff0c;想要知道EVE星战前夜测试时间的小伙伴一起来看看EVE星战前夜的相关资讯&#xff0c;了解一下游戏的开测时间吧。EVE星战前夜目前仍在开发阶段&#xff0c;目前没有进行大范围的测试&#xff0c…

3、预测模型笔记

预测模型 1、简介 预测建模&#xff08;Predictive modeling&#xff09;是一种用来预测系统未来行为的分析技术&#xff0c;它由一群能够识别独立输入变量与反馈目标关联关系的算法构成。根据观测值创建一个数学模型&#xff0c;然后用这个模型去预测未来发生的事情。 预测模型…

常见问题_智能切膜机常见问题

hoco.智能切膜机&#xff0c;如果使用了错误方式&#xff0c;会导致操作失误&#xff0c;整理4个常见问题&#xff0c;还有错误示范&#xff0c;请跟随视频去了解&#xff0c;你使用正确了吗?1. 膜切反这个需要留意切割膜的正反&#xff0c;有文字面就是正面&#xff0c;无文字…

bootstrap的栅格系统和响应式工具

关于bootstrap的响应式布局&#xff0c;昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗&#xff0c;在这里记录一下 一&#xff1a;meta标签的引用 <meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" conte…

小熊错误_新手爸妈第一年带娃时,很容易犯的7个错误,对照看看你中了没

文 /关注小熊育儿&#xff0c;帮您轻松育儿带娃不是一件容易的事&#xff0c;对爸妈的时间和体力都是一种考验&#xff0c;不仅“熊孩子”让人头疼&#xff0c;育儿知识差&#xff0c;不懂科学育儿理念的“熊爸妈”也是让人很无奈的&#xff0c;最终受伤的还是孩子&#xff0c;…

python--装饰器、生成器、迭代器、元类

一、装饰器 def w1(func):def inner():func()return innerw1 def f1():print(1111111) 1.只要python解释器执行到装饰器&#xff0c;就会自动进行装饰&#xff0c;而不是等到调用的时候才进行装饰。 2.有参数的函数&#xff0c;装饰器定义方法 def w1(func):def inner(*args, *…

scss的使用方式(环境搭建)

我用的是Koala。 IDE是intellij_idea&#xff08;其他IDE也可&#xff09; 下载Koala&#xff1a;http://koala-app.com/ 2.安装&#xff08;选好位置&#xff0c;下一步即可&#xff09; 3.打开Koala&#xff0c;创建项目 》创建css文件夹》创建XXX.scss文件&#xff0c;拖到…

小程序 按需_小程序想要留住用户需哪些举措?

**当下许多企业在进行长沙小程序开发后&#xff0c;都会费劲心思在推广引流上&#xff0c;很多企业也确实起到了不错的效果&#xff0c;用户们也是纷纷来到企业的小程序中。只不过有的小程序却无法将用户留下来&#xff0c;导致用户流失&#xff0c;令推广付之东流。下面长沙小…

渍渍渍~来一发豆瓣自动登录玩玩~

今天来一个比较屌的自动化登陆工具&#xff0c;selenium模块&#xff0c;这个模块&#xff0c;比较装逼啦~具体自行百度吧&#xff01;这篇博客实现了什么功能呢~可以自动使用用户名和密码登录&#xff0c;当然&#xff0c;豆瓣对登录次数还有ip地址做了一些策略&#xff0c;例…

Redis数据库入门学习(下载与安装、常用命令、在Java中操作Redis)

简介 下载与安装 数据类型 常用命令 1.字符串操作命令 2.哈希操作命令 3.列表操作命令 push是将元素总是插入到第一个 0表示第一个&#xff0c;1表示第二个。-1表示倒数第一个&#xff0c;-2表示倒数第二个。当前命令的意思是第一个到倒数第一个&#xff0c;即就是全部元素 rpo…

.NET使用Office Open XML导出大量数据到 Excel

我相信很多人在做项目的都碰到过Excel数据导出的需求&#xff0c;我从最开始使用最原始的HTML拼接&#xff08;将需要导出的数据拼接成TABLE标签&#xff09;到后来happy的使用开源的NPOI, EPPlus等开源组件导出EXCEL&#xff0c;但不久前&#xff0c;我在一个项目碰到一个需求…

CSS自定义消息提示

1.效果 2.源码 <% page contentType"text/html;charsetUTF-8" language"java" %> <html> <head><style type"text/css">#confirm{position: absolute;z-index: 1;display: inline-block;border: 1px solid black;backgr…

file 选择的文件胖多有多大_如何删除 macOS 压缩包中的隐藏文件?

如何删除 macOS 压缩包中的隐藏文件&#xff1f;在工作中&#xff0c;压缩打包文件是不可缺少的一项工作。为了避免文件的损坏和缺失&#xff0c;我们通常在macOS系统中&#xff0c;把多个文件或文件夹压缩后进行传输&#xff0c;我们一般使用访达&#xff08;Finder&#xff0…

CSS画各种二维图形

1.效果 2.源码 <% page contentType"text/html;charsetUTF-8" language"java" %> <html> <head><style type"text/css">#triangle_top{display: inline-block;width:0;height:0;border-left:50px solid transparent;bor…

数据库的开启与关闭

今天&#xff0c;为了一些原因&#xff0c;要重启数据库&#xff0c;但因为当时安装的时候&#xff0c;同学随便装了&#xff0c;导致很多文件都找不到&#xff0c;想使用绝对路径重启数据的计划卡死在了路上。以下&#xff0c;我写下我的数据库开启、关闭的方法&#xff0c;方…

leetcode怎么用时间刷_刷完700多题后的首次总结:LeetCode应该怎么刷?

推荐观看&#xff1a;java技术进阶&#xff1a;膜拜&#xff01;字节大神总结的666页大师级算法宝典&#xff0c;分分钟团灭LeetCode​zhuanlan.zhihu.com2020最新马士兵老师联手左程云老师丨数据结构与算法丨面试BATJ必备​www.bilibili.com我是大二的时候开始接触LeetCode的&…

IntelliJ IDEA:使用Google Guava生成equals,hashCode和toString

问题 在Java领域&#xff0c;我们经常需要编写equals &#xff0c; hashCode和toString方法。 老实说&#xff0c;这通常只是一个样板义务。 得益于智能IDE&#xff0c;我们通常不再自己这样做。 我们只是让和IDE一起努力。 不过有一个问题。 生成的代码通常非常丑陋。 让我们…

Appscan_web安全测试工具 (含修改启动浏览器的方法)

安全测试应该是测试中非常重要的一部分&#xff0c;但他常常最容易被忽视掉。 尽管国内经常出现各种安全事件&#xff0c;但没有真正的引起人们的注意。不管是开发还是测试都不太关注产品的安全。当然&#xff0c;这也不能怪我们苦B的“民工兄弟”。因为公司的所给我们的时间与…

传说之下地图素材_【开阔眼界】地图上的史记——名著轻松读

购买链接&#xff1a;https://j.youzan.com/Zns-38我读了无数次《史记》&#xff0c;每次都是读了开头没几页就放弃&#xff0c;文言文看不懂&#xff0c;翻译的白话文内容又太枯燥&#xff0c;现在居然有图画版的史记&#xff0c;还附有说明&#xff0c;真是太好了&#xff0c…

go int 转切片_「快学 Go 语言」第 4 课——低调的数组

数组就是一篇连续的内存&#xff0c;几乎所有的计算机语言都有数组&#xff0c;只不过 Go 语言里面的数组其实并不常用&#xff0c;这是因为数组是定长的静态的&#xff0c;一旦定义好长度就无法更改&#xff0c;而且不同长度的数组属于不同的类型&#xff0c;之间不能相互转换…