南京网站建设培训班,服装设计师的个人网站,wordpress部分图片,卢氏住房和城乡建设厅网站参考学习网站:
网页简介 (w3schools.com)
我的学习思路是#xff1a;网站实践视频。
视频很重要的#xff0c;因为它会给你一种开阔思路的方式。你会想#xff0c;噢#xff01;原来还可以这样。这是书本或者网站教程 所不能教给你的。而且#xff0c;对一些教程#…参考学习网站:
网页简介 (w3schools.com)
我的学习思路是网站实践视频。
视频很重要的因为它会给你一种开阔思路的方式。你会想噢原来还可以这样。这是书本或者网站教程 所不能教给你的。而且对一些教程它的用法你可能 在工作或者以后都用不上这种情况下看视频也是一种很好的解决方式。 比较跟网址或者书本学习以及和跟视频学习的比较
前期过基础建议跟网站或者app这些现在的网址或者app 已经开发的比较发达全面了以后也会更新更好用的。但是如果难度变大要从基础之上去提升。这个时候我的建议是去看视频。视频听别人讲一遍跟着别人的思路去思考可以扩展你的思维提高你的视界并提高你学习难关时的效率。 一、什么是HTML
HTML 代表 超文本标记语言HTML 是用于创建网页的标准标记语言HTML 描述网页的结构HTML 由一系列元素组成HTML 元素告诉浏览器如何显示内容HTML 元素标记内容片段例如“这是一个标题”、“这个 是一个段落“”这是一个链接“等。 二、基本概要 网页文档
所有 HTML 文档都必须以文档类型声明 开头。!DOCTYPE html
HTML 文档本身以 开头和结尾。html/html
HTML 文档的可见部分位于 和 之间。body/body 声明表示文档类型并帮助浏览器正确显示网页。!DOCTYPE
它只能出现在页面顶部在任何 HTML 标记之前一次。
声明不区分大小写。!DOCTYPE HTML 标题是使用 to 标记定义的。h1h6
h1定义最重要的标题。 定义最不重要的 标题h6
HTML 段落使用标记定义p
HTML 链接使用标记定义a
HTML 图像是使用标记定义的。img HTML 元素
HTML 元素是从开始标记到结束标记的所有内容 标签名称内容在这里.../标签名称 一些 HTML 元素的示例 H1我 第一个标题/h1 p我的第一段。/p 注意有些HTML元素没有内容如br 元素。这些元素称为空元素。空元素没有结束标签
HTML 标记不区分大小写 二、2.5网页属性
所有 HTML 元素都可以具有属性属性提供有关元素的其他信息属性始终在开始标记中指定属性通常以名称/值对的形式出现例如name“value” src 属性
该标记用于嵌入 HTML 页面中的图像。属性 指定要显示的图像的路径imgsrc
有两种方法可以在属性中指定 URLsrc
绝对网站不好。使用别人的网址图片的地址
相对网址使用这个相当于下载在本地的文件里面
宽度和高度属性
标记还应包含 和 属性这些属性指定宽度和 图像的高度以像素为单位imgwidth height
alt 属性
标记的必需属性指定 图像的替换文本如果由于某种原因无法显示图像。 这可能是由于 连接速度慢、属性错误或用户使用屏幕 读者。img src“” alt“” 样式属性后续会讲更多
该属性用于将样式添加到 元素例如颜色、字体、大小等。style 朗属性
应始终包含属性 在标记内声明 网页的语言。这是为了帮助搜索引擎和浏览器。langhtml
例如html langen 表示指定英语作为语言。
改进方法html langen-US
国家/地区代码也可以添加到属性中的语言代码中。因此前两个字符定义了 HTML 页面的语言 最后两个字符定义国家/地区。 标题属性 这个有意思捏
该属性定义了一些额外的 有关 元素。title
标题属性的值将显示为工具提示当 将鼠标悬停在元素上
例如:p title你是我的狗这是一个段落/p 注意引号的选择当属性值本身包含双引号时必须使用单引号。反之是同样的。 三、基本结构和用法
更大的标题
每个 HTML 标题都有一个默认大小。但是您可以指定任何标题的大小 与属性一起使用使用 CSS 属性style font-size这个是字体大小的方法。
例如h1 stylefont-size:60px;Heading 1/h1 网页段落
HTML 元素定义一个段落。p
段落总是从新行开始浏览器会自动在段落前后添加一些空格边距。 该标记定义了 HTML 页面中的主题分隔符并且通常是 显示为水平线。hr
该元素用于分隔 HTML 中的内容或定义更改 页hr HTML 元素定义换行符。br HTML 元素定义预先格式化的文本。pre
元素内的文本以固定宽度的字体显示通常 Courier它保留了空格和换行符pre 网页样式
HTML 属性用于向元素添加样式例如颜色、字体、大小等。style
例如
tagname styleproperty:value;
该属性是一个 CSS 属性。该值是 CSS 值。 css样式后续要专门学一下 CSS 属性定义背景色 的 HTML 元素。background-color
例如body stylebackground-color:powderblue;
它还可以为不同的标签元素的背景设置颜色p stylebackground-color:tomato;This is a paragraph./p CSS 属性定义 一个 HTML 元素文本颜色color
例如h1 stylecolor:blue;This is a heading/h1 CSS 属性定义要使用的字体 对于 HTML 元素字体选择font-family
例如h1 stylefont-family:verdana;This is a heading/h1 CSS 属性定义 一个 HTML 元素字体大小font-size
例如h1 stylefont-size:300%;This is a heading/h1 CSS 属性定义 HTML 元素的水平文本对齐方式text-align
例如h1 styletext-align:center;Centered Heading/h1 HTML 文本格式
HTML 包含几个用于定义具有特殊含义的文本的元素。
格式元素旨在显示特殊类型的文本
b- 粗体文本strong- 重要文本i- 斜体文字em- 强调文字mark- 标记文本small- 较小的文本del- 删除文本ins- 插入文本sub- 下标文本sup- 上标文本 引用和引文元素
介绍,, , , , 和 HTML 元素。blockquoteqabbraddresscitebdo 块引用 blockquote
HTML 元素定义了一个部分 引用自其他来源。quoteblock
浏览器通常会缩进元素。blockquote HTML 标记定义一个简短的引号。q
pWWFs goal is to: qBuild a future where people live in harmony with nature./q/p 缩写 用于缩写abbr(这个有意思捏)
HTML 标记定义缩写或首字母缩略词如“HTML” “CSS” “先生” “博士”“尽快”“自动取款机”。abbr
标记缩写可以为浏览器提供有用的信息翻译 系统和搜索引擎。
提示使用全局标题属性可以 显示 的描述 将鼠标悬停在元素上的缩写/首字母缩略词。 HTML 标记定义文档作者/所有者的联系信息 或一篇文章以斜体呈现。address HTML 标记定义 创意作品例如一本书、一首诗、一首歌、一部电影、一幅画、一件雕塑等。cite
注意一个人的名字不是作品的标题。
元素中的文本通常以斜体呈现。cite bdo 用于双向覆盖
BDO 代表 双向覆盖。
HTML 标记用于覆盖 当前文本方向bdo dirrtl表示反向输出信息。
用法bdo dirrtlThis line will be written from right to left/bdo 隐藏内容
注释可用于隐藏内容。
如果您暂时隐藏内容这会很有帮助 !-- pThis is another paragraph /p -- 网页颜色
HTML 颜色使用预定义的颜色名称指定或使用 RGB、HEX、HSL、RGBA 或 HSLA 值。
前面已经介绍了 网页的背景颜色、字体颜色。
边框颜色
您可以设置边框的颜色
例如h1 styleborder:2px solid Tomato;Hello World/h1 RGB 颜色值表示红色、绿色和蓝色光 来源。
RGBA 颜色值是 RGB 的扩展具有 Alpha channel不透明度。 选择合适的颜色
随便在网上选择一个RGB颜色选择。
灰色阴影
灰色阴影通常使用所有三个参数的相等值来定义
RGBA 颜色值
RGBA 颜色值是具有 Alpha 通道的 RGB 颜色值的扩展 - 指定颜色的不透明度。
RGBA 颜色值为 指定为
RGBA红、绿、蓝、 阿尔法) 十六进制颜色值
在 HTML 中可以使用十六进制值指定颜色 形式
#rrggbb
其中 rr红色、gg绿色和 bb蓝色是介于 00 和 ff 之间的十六进制值与十进制 0-255 相同。
它的用法和RGB的用法是一样的阴影部分也是通过三个颜色一样的值。 HSL和HSLA颜色
HSL 代表色调、饱和度和亮度。
HSLA 颜色值是具有 Alpha 通道的 HSL 的扩展 不透明度。
HSL色相、饱和度、亮度)
色相是色轮上的度数从 0 到 360。0 为红色120 为绿色240 为蓝色。
饱和度是一个百分比值。0% 表示灰色阴影100% 表示全色。
亮度也是一个百分比值。0% 为黑色100% 为白色。
灰色阴影通常通过将色调和饱和度设置为 0 来定义并且 将亮度从 0% 调整到 100% 以获得更深/更亮的阴影 HTML 样式 - CSS 分为style 和 link
CSS 代表 层叠样式表。
CSS节省了大量的工作。它可以控制多个布局 一次全部网页。 什么是 CSS
级联样式表 CSS 用于设置网页布局的格式。
使用CSS您可以控制颜色字体文本大小间距 元素之间元素如何定位和布局背景 使用图像或背景颜色不同设备的不同显示 和屏幕尺寸还有更多
提示层叠一词意味着样式 应用于父元素也将应用于 父母。因此如果您将正文文本的颜色设置为“蓝色”则所有标题 段落和正文中的其他文本元素也将获得相同的颜色除非您指定 别的东西 使用CSS
可以通过 3 种方式将 CSS 添加到 HTML 文档中
内联 - 通过使用 HTML 元素中的属性style内部 - 通过使用部分中的元素stylehead外部 - 通过使用元素链接到外部 CSS 文件link
添加 CSS 的最常见方法是将样式保留在外部 CSS 中 文件。但是在本教程中我们将使用内联和内部样式因为这更容易 演示并且更容易让您自己尝试。 内联 CSS 使用 HTML 元素的属性应用于单个 HTML 元素。style
例如h1 stylecolor:blue;A Blue Heading/h1 内部 CSS 在 HTML 页面的部分中定义应用于某个标签所有元素。headstyle
例如
head style body {background-color: powderblue;} h1 {color: blue;} p {color: red;} /style /head 外部CSS样式表请在每个 HTML 页的部分中添加指向该样式表的链接head
例如 head link relstylesheet hrefstyles.css //指向样式文件。 /head
“样式.css”
body { background-color: powderblue; } h1 { color: blue; } p { color: red; } CSS 边框
CSS 属性定义边框 在 HTML 元素周围。border
CSS 填充文本和边框的距离
CSS 属性定义填充 空格在文本和边框之间。padding
CSS 边距边框和外界的距离
CSS 属性定义边距 空格在边界之外。margin HTML 链接 - 语法
HTML 标记定义超链接。 它具有以下语法a 目标属性
默认情况下链接的页面将显示在当前浏览器窗口中。 若要更改此设置必须为链接指定另一个目标。
该属性指定打开链接文档的位置。target
该属性可以具有以下值之一target
_self-违约。在 中打开文档 单击时相同的窗口/选项卡_blank- 在新窗口或选项卡中打开文档 最常用的_parent- 在父框架中打开文档_top- 在窗口的整个正文中打开文档
例
使用 target“_blank” 在新的浏览器窗口或选项卡中打开链接的文档
a hrefhttps://www.w3schools.com/ target_blankVisit W3Schools!/a 使用图像作为链接
要将图片用作链接只需将标签放在标签内imga 链接到电子邮件地址
在属性中使用以创建打开用户电子邮件程序的链接 到 让他们发送一封新电子邮件 mailto: href
a hrefmailto:someoneexample.comSend email/a 按钮作为链接
要使用HTML按钮作为链接您必须添加一些JavaScript代码。
JavaScript 允许您指定在某些事件中发生的情况例如单击按钮
button οnclickdocument.locationdefault.aspHTML Tutorial/button HTML 链接 - 不同的颜色改变链接的样式
HTML 链接以不同的颜色显示具体取决于 它是否已访问、未访问或处于活动状态。
默认情况下链接将显示如下在所有浏览器中
未访问的链接带有下划线和蓝色访问过的链接带有下划线和紫色活动链接带有下划线和红色
您可以使用 CSS 更改链接状态颜色
例 这个需要记一下a:link(未访问)、a:visited(访问过之后)、a:hover鼠标悬停、a:active(活动链接)
在这里未访问的链接将为绿色没有下划线。访问过的链接 将为粉红色不带下划线。活动链接将为黄色并带有下划线。 此外当鼠标悬停在链接上ahover时它将变为红色并带有下划线
style a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { //感觉这个活动链接 没有什么用 color: yellow; background-color: transparent; text-decoration: underline; } /style
完整的例子
!DOCTYPE html
html
head
style
a:link {color: green;background-color: transparent;text-decoration: none;
}
a:visited {color: pink;background-color: transparent;text-decoration: none;
}
a:hover {color: red;background-color: transparent;text-decoration: underline;
}
a:active {color: yellow;background-color: transparent;text-decoration: underline;
}
/style
/head
bodyh2Link Colors/h2pYou can change the default colors of links/pa hrefhtml_images.asp target_blankHTML Images/a /body
/html 链接按钮就是使用一些样式不是使用vant组件的按钮方式之后会学这个的
也可以通过使用 CSS 将链接样式设置为按钮
style a:link, a:visited { background-color: #f44336; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } /style HTML 链接 - 创建书签有意思捏
HTML链接可用于创建书签以便读者可以 跳转到网页的特定部分。
如果网页很长书签可能很有用。
要创建书签 - 首先创建书签然后添加链接 到它。
单击链接时页面将向下或向上滚动到带有 书签。
例如
首先使用该属性创建一个 书签id
h2 idC4Chapter 4/h2
然后从同一页面中添加指向书签的链接“跳转到第 4 章”
a href#C4Jump to Chapter 4/a
当点击chapter 4它会跳转到Jump to Chapter 4。 图像语法
HTML 标记用于嵌入 网页中的图像。img
标签有两个必需项 属性img
src - 指定映像的路径alt - 指定图像的替换文本
宽度和高度
您可以使用该属性指定宽度和 图像的高度。style
stylewidth:500px;height:600px; 注意区分一下样式表的使用方式 和 宽度高度的使用差别其实就是 内联css 和外联css的区别 要将图片用作链接请将标签放在标签内imga 图像浮动
使用 CSS 属性让图像浮动到文本的右侧或左侧float
例如pimg srcsmiley.gif altSmiley face stylefloat:right; width:42px;height:42px; The image will float to the right of the text./p 图像映射
HTML 标记定义图像映射。图像映射是具有 可点击区域。区域由一个或多个标签定义。maparea 使用标记插入图像。 与其他图像的唯一区别是您必须 添加属性imgusemap
img srcworkplace.jpg altWorkplace usemap#workmap
该值以哈希标记开头后跟图像映射的名称用于创建关系 在图像和图像映射之间。usemap#
提示您可以将任何图像用作图像映射 步骤
1.创建图像映射 首先使用标记插入图像img src然后在是创建图像映射。
map name
然后添加一个元素。map
该元素用于创建图像映射并使用 必需属性map nameworkmap
map nameworkmap
该属性的值必须与 的属性相同。img usemap“#workmap” 2.创建领域
然后添加可单击区域。
可单击区域是使用元素定义的。area
形状
您必须定义可单击区域的形状并且可以选择其中之一 值
rect- 定义一个矩形区域circle- 定义一个圆形区域poly- 定义多边形区域default- 定义整个区域
您还必须定义一些坐标才能将可单击区域放置在 图像
形状“矩形”
的坐标成对出现一个用于 x 轴一个用于 y 轴。shaperect 坐标位于 270 左边距像素和顶部 350 像素270,350 得到画出矩形的范围
area shaperect coords34, 44, 270, 350 hrefcomputer.htm 怎么得出一个页面的x和y的位置呢
参考文章
怎么才能看到自己鼠标在桌面上的位置X Y_百度知道 (baidu.com)
用qq也可以其实就是使用屏幕截图的方式然后它会出现你截屏的页面大小然后那个大小如果你是从左上开始的那么它的终点就是我们需要的xy的值。 同理形状“矩形” 337300是x,y的坐标44是这个图像的半径。
area shapecircle coords337, 300, 44 hrefcoffee.htm 形状“多边形”
包含多个坐标 点用于创建由直线多边形形成的形状。shapepoly
这可用于创建任何形状。
例如area shapepoly coords140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147 hrefcroissant.htm 图像映射和JavaScript
可单击区域也可以 触发 JavaScript 函数。
向元素添加事件 要执行 JavaScript 函数 area shapecircle οnclickmyFunction() HTML 元素的背景图像
若要在 HTML 元素上添加背景图像请使用 HTML 属性 和 CSS 属性style background-image
例如p stylebackground-image: url(img_girl.jpg); 或者在样式表中使用。
style p { background-image: url(img_girl.jpg); } /style 注意如果背景图像小于元素图像将重复 水平和垂直直到到达元素的末尾。
改正若要避免背景图像重复自身请设置属性 自。background-repeat no-repeat
例如
style body { background-image: url(example_img_girl.jpg); background-repeat: no-repeat; } /style 背景封面
如果您希望背景图像覆盖整个元素您可以 可以将属性设置为background-sizecover.
此外若要确保始终覆盖整个元素请将该属性设置为background-attachment fixed:
这样背景图像将覆盖整个元素没有拉伸图像将 保持其原始比例 图片元素 意思就是根据屏幕尺寸选择使用哪种图像。这种方式 在手机模式和网页模式下用的吧
HTML 元素允许 您显示不同的图片 不同的设备或屏幕尺寸。picture
每个元素都有一个属性用于定义图像何时为 最合适。source media“” 该元素有两个主要用途picture
1. 带宽
如果您的屏幕或设备较小则无需加载大型 图像文件。浏览器将使用具有匹配属性值的第一个元素并忽略以下任何元素 元素。source
2. 格式支持
某些浏览器或设备可能不支持所有图像格式。通过使用元素您可以添加所有图像 格式浏览器将使用它识别的第一种格式并忽略任何 的以下元素。picture 网站图标
网站图标是显示在浏览器选项卡中页面标题旁边的小图像。
图标图像的通用名称是“favicon.ico”。
例如 head titleMy Page Title/title link relicon typeimage/x-icon href/images/favicon.ico /head 表格
表行tr tr
表单元格td/td
表头th /th
th放在tr的下面一般只用一次td用的最多 表格边框 在CSS样式里面
table, th, td { border: 1px solid black; }
不过这种会存在一点问题会出现双边框的问题。
折叠成单个边框
将 CSS 属性设置为 。border-collapse collapse
在上面的css样式添加border-collapse: collapse; 举例说明
设置每个单元格的背景颜色 并赋予边框白色
table, th, td { border: 1px solid white; border-collapse: collapse; } th, td { background-color: #96D4D4; } 圆桌边框
对于该属性边框变为圆角border-radius
th, td { //省略table变为边框 border: 1px solid black; border-radius: 10px; } 虚线表边框
使用该属性您可以设置 边框的外观。border-style 边框颜色
使用该属性可以设置边框的颜色。border-color 表格大小 将表格的宽度设置为 100%
table stylewidth:100%
注意使用百分比作为宽度的大小单位意味着 此元素与其父元素相比的宽度在本例中为 是元素。body 表格列宽
若要设置特定列的大小请在 or 元素上添加属性stylethtd
将第一列的宽度设置为 70% th stylewidth:70%Firstname/th 表格行高
同上tr styleheight:200px 对齐表标题
默认情况下表格标题为粗体且居中
左对齐表标题请使用 CSS 属性text-align
例如th { text-align: left; } 多列的标题colspanth
标题可以跨越两列或多列th colspan2Name/th 表标题caption 单元格填充padding
padding-bottom padding-left padding-right 单元格间距border-spacing table
默认情况下空间设置为 2 像素。
例table { border-spacing: 30px; } 若要使单元格跨多列请使用以下属性colspan 前面讲了一次
同理行跨度rowspan 斑马条纹:在每隔一行表格上添加背景颜色
使用如下选择器:nth-child(even)
tr:nth-child(even) { background-color: #D6EEEE; } 垂直斑马条纹
设置 for 表数据元素:nth-child(even)
td:nth-child(even), th:nth-child(even) { background-color: #D6EEEE; } 水平分隔器:border-bottom tr
tr { border-bottom: 1px solid #ddd; } 可悬停表:hover tr
使用选择器。例如 tr:hover {background-color: #D6EEEE;} 表组元素
该元素用于设置特定的样式 表的列。colgroup 隐藏列
您可以使用以下属性隐藏列visibility: collapse colgroup col span2 col span3 stylevisibility: collapse /colgroup
