HTML与CSS

2023-12-27 19:34:09

参考网页：菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)

一、HTML标签

超文本标记语言（Hypertext Markup Languag，HTML）是标准通用标记语言(SGML)下的一个应用，是一种规范，一种标准。网页文件本身是一种文本文件，它通过标记符号来标记要显示的网页中的各个部分。静态网页文件扩展名：.html? 或 .htm，动态网页文件扩展名：.php? .jsp? .asp等 
<!DOCTYPE html>
<html> <!--文件声明开始-->
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title> <!--网页标题-->
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>  <!--文件体-->
</html>  <!--文件结尾声明-->

观察这段代码，有很多“<>”,我们把由尖括号包围的关键词叫做标签，?标签通常是成对出现的（双边标记），比如 <div> 和 </div>;标签对中的第一个标签是开始标签，第二个标签是结束标签;开始和结束标签也被称为开放标签和闭合标签;标签可以有若干个属性，也可以不带属性

1.html标签规则

不区分大小写；大部分标签有结束标记；标签可以嵌套，在嵌套时注意标记位置；标签可以有内容或者没有内容；标签的属性是可选的；当标签中出现属性时，必须为其赋值；属性赋值必须包含在尖括号”<>”内部；属性与标记之间、各属性之间需要以空格隔开；属性值以双引号括起来。

2.常用标签介绍

(1)网页头部<head>标签

  • <title>标签:<title></title>定义网页标题，在浏览器标题栏显示。?
  • <meta>标签:http-equiv属性； name属性
  • <link>标签:常用来链接样式表， 如<link type="text/css" href="mystyle.css" /
  • <style>标签:常用于直接定义HTML文档样式，如<style type=“text/css”>p{color:#00F}…

? ? ? ? ?首先我们来看一下<meta>标签，如下是菜鸟教程部分html截图：

我们可以看到<meta>有两个属性，一是?http-equiv，二是name。http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

  • ?http-equiv属性
    • content-type
      • 功能：设定当前页面使用的字符集和语言；
      • 用法：<meta http-equiv="content-type" content="text/html; charset=gb2312"
    • content-language（显示语言的设定）
      • 功能：显示语言的设定
      • 用法：<meta http-equiv="Content-Language" content="zh-cn" />
    • refresh(刷新)
      • 功能：自动刷新，并指向新的页面
      • 用法：<meta http-equiv=“refresh” content=“2;url=http://itcast.cn” />
  • name属性
    • Keywords(网页关键字)
      • 功能：用来告诉搜索引擎你网页的关键字是什么。
      • 用法：<meta name=“keywords” content=“关键字,关键字,关键字”>
    • description(网站内容描述)
      • 功能：用来告诉搜索引擎你的网站主要内容。
      • 用法：<meta name=“description” content=“网页内容描述信息">
      • 描述设计规则：网页描述为自然语言而不是罗列关键词（与keywords设计正好相反） ，尽可能准确地描述网页的核心内容，通常为网页内容的摘要信息，也就是希望搜索引擎在检索结果中展示的摘要信息 ，网页描述的文字不必太多，一般不超过搜索引擎检索结果摘要信息的最多字数(100字以内)
    • author（作者）
      • 说明：标注网页的作者
      • 用法：<meta name=“author” content=“传智播客”>
    • Copyright(版权信息)功能：说明网站版权信息
      • 用法：<meta name=“copyright" content="信息参数">
    • viewport(移动端浏览)
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">

(2)<body>标签

设置网页的全局效果，包括为网页设置背景图片或背景色，设置页面内的文本或超链接颜色，设置页面边距等。

属性

描述

text

网页文本颜色

bgcolor

设定网页背景色，如：bgcolor=“#ff0000”

background

设定网页背景图片，如： background=“bg.gif”

leftmargin

设定网页左边距，如：leftmargin=“30”(火狐不支持)

topmargin

设定网页顶边距 (火狐不支持)

rightmargin

设定网页右边距 (火狐不支持)

bottommargin

设定网页底边距 (火狐不支持)

(3)字体修饰标签

<b></b>

加粗效果

<i></i>

斜体效果

<s></s>

删除线

<u></u>

字符加下划线

<sub></sub>

将文本定义为下标

<sup></sup>

将文本定义为上标

<font></font>

指定字符的字体、大小、颜色等格式属性

大小(size)的取值1-7，1最小，7最大

字体(face) ：如：宋体、楷体、黑体、隶书等

颜色(color)：规定文本的颜色，如：red或#FF0000

(4)排版元素?

<p></p>

用来创建一个段落，该元素自动在其前后创建一些空白。常用属性align：定义文本的对齐方式，属性可取值：left、center、right

<br>

产生换行，不需要结束标记

<hr>

在当前位置绘制一条水平线

align：对齐方式，可选值为 center、left、right

size：线条粗细，取值为数字，单位为像素

width：线条宽度，取值为数字，单位为像素

color：线条颜色

noshade：规定水平线的颜色呈现为纯色，而不是有阴影的颜色。

<pre></pre>

预排版标记<pre>将保留文本中的空白(连续的空白)和换行符的信息。常用属性width：定义文本块的最大字符数

<h1></h1>

…………

<h6></h6>

HTML中提供6种标题效果标签。分别为h1~h6。<h1>字体最大，<h6>字体最小。常用属性align：对齐方式 left、center、right。

(5)?<div>与<span>标签

<div>只是一个块级元素,span表示了内联行(行内元素),均无实际意义，为CSS而生。块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。

(6)列表

<ul>

??? <li>内容</li>

??? <li>内容</li>

</ul>

type属性：disc(实心圆点)、circle(空心圆圈)、square(实心方块)

<ol>

??? <li>内容</li>

??? <li>内容</li>

</ol>

属性：type编号类型，默认为整数。可选（1、A、a、Ⅰ、i）

属性：start起始编号，默认为1，即由最小编号开始。

注意：如果是有序列嵌套，只能嵌套在某一个<li>的内部

<dl>

??? <dt>定义术语</dt>

??? <dd>定义说明</dd>

</dl>

dl(definition list )用来创建定义列表，定义列表不使用列表项元素li，这种列表中的项由定义术语dt(definition term )和定义说明dd(definition description )组成。 dl是块级元素，必须至少包含一个dt或一个dd，dl的子元素只能是dt和dd。

(7)<a>超级链接?

语法：<a 属性=“属性值”>标签内容</a>说明：a元素是一个行内元素，但不能相互嵌套。

属性

值

含义

href

URL

链接的目标URL。

name

name名

为当前锚定位设置一个名称，以便它能够被其他链接所定位。

target

_blank在新窗口中打开目标网页

_self在当前窗口中打开目标网页

_top整个浏览器窗口

_parent多框架结构中父窗口

定义href指向的页面打开位置

(8)<img>图像

属性

值

含义

src

图像URL

规定图像的URL

alt

字符串

规定图像的替代文本

align

top,bottom,middle

left,right,center

规定如何根据周围的文本来排列图像。

width

px | %

图像的宽度

height

px | %

图像的高度

border

px

定义图像的边框粗细

usemap

URL

定义作为客户端图像映射的一幅图像。

(9)<table>标签▲?

表格基本结构

<table>
        <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>
  • <table>的属性

    属性

    值

    含义

    width

    %或pixels

    规定表格的宽度

    height

    % | pixels

    规定表格的高度

    align

    Left|center|right

    规定表格相对周围元素的对齐方式

    bgcolor

    颜色值

    规定表格的背景颜色

    border

    pixels

    规定表格边框的宽度

    bordercolor

    颜色值

    定义表格整体的框线色

    background

    URI

    指定表格的背景图案，URI指向图像文件的位置

    cellpading

    长度值

    指定单元格里面的内容和单元格边框之间的间隔，即填充距，属性值可为整数的像素值或百分比值

    cellspacing

    长度值

    指定单元格里面的内容和单元格边框之间的间隔，即填充距，属性值可为整数的像素值或百分比值

  • <tr>标签

    属性

    值

    含义

    align

    Left,right,center

    定义表格行的内容水平对齐方式

    valign

    Top,middle,bottom

    定义表格行的内容垂直对齐方式

    bgcolor

    颜色值

    定义表格行的背景颜色

  • <form>标记属性

    属性

    值

    含义

    name

    name名

    表单的识别名称，用于样式设置和脚本访问。此属性为了向下兼容而存在，建议以id属性代替。该属性仅在Transitional 和Frameset DTD中使用

    action

    URL

    指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。该属性值可以为绝对地址、相对地址、文档片段，甚至是脚本代码

    method

    get | post

    将表单数据提交到http服务器的方法，可能值有两个：get和post。

    enctype

    MIME类型

    指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencoded对所有字符进行编码。如果表单包含用于文件上传的控件（input type=“file”），那么这个属性值必须设为multipart/form-data ，不对字符进行编码。

    target

    目标框架名

    规定在何处打开 action URL。 _blank | _parent? _self | _top

    framename

    ?
  • GET提交方法
    • 如果为get，那么所提交的数据集将被作为一个由表单的所有名/值对组成的查询字符串（query string）添加到表单处理器的URL（action属性）的末尾。
    • 这种方法提交的信息在长度上有一定限制，而且不安全，适合简单的数据查询
  • POST提交方法
    • 如果为post，那么数据集将直接发给表单处理程序，而不是以可见的URL查询字符串的形式。post方法可以提交更长的数据，并且相对安全一些，传送的数据类型更多一些（不限于ASCII字符），因而适用于数据更复杂的表单。浏览器的默认方法为get。

(10)不同类型的按钮

  • ?提交按钮
    • <input type=“submit” name=“submit” value=“提交表单” />
  • 重置按钮
    • <input type=“reset” name=“reset” value=“重新填写” />
  • 普通按钮
    • <input type=“button” name=“button” value=“普通按钮” />
  • 图片按钮
    • <input type=“image” name=“image” src=“图片URL” />图片按钮一般与JS配合使用。

二、CSS?

CSS?(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS?文件扩展名为?.css。

1.语法基础?

?CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:CSS注释以?/*?开始, 以?*/?结束

(1)CSS?id?和?class?

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点?.?号显示。

文章来源:https://blog.csdn.net/Q567782568/article/details/135207895
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。