HTML相关基础概念

最新推荐文章于 2023-04-06 20:08:09 发布

Co1234_

最新推荐文章于 2023-04-06 20:08:09 发布

阅读量288

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Co1234_/article/details/104500742

版权

HTML

HTML基础

HTML概述
HTML(Hyper Text Mark-up Language)超文本标记语言，最基础的网页语言，HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀
HTML文档的基本结构如下：
（1）文档类型声明举例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

(X)HTML文档应以标签进行声明，位于所有的文档标签之前，用于说明该文档所使用HTML或XHTML的特定版本，告知浏览器应按照什么方式对页面文档进行解析
（2）html 标签对

<html>---</html>

文档以<html>标签开始，以</html>标签结束，所有内容都需要放在这两个标签之间。
（3）head 标签对

<head>---</head>

页面头部信息，用于向浏览器提供整个页面的基本信息，但不包含页面的主体内容。头部信息中主要包括页面的标题、元信息、CSS样式、JavaScript脚本等元素。页面头部信息通常并不在浏览器中显示，标题元素（<title></title>标签的内容）除外，会显示在浏览器窗口的左上角。
（4）body 标签对

<body>---</body>

网页的正文，是用户在浏览器主窗口中看到的信息，包括图片、表格、段落、图片、视频等内容，且需位于<body>标签之内；但并不是所有的<body>内部标签都是可见的。
3.HTML文档中的文本元素包括：内容标题、文本修饰以及特殊字符。
4.简要列举几种重要标签：<a>超链接</a>,<h1>一级标题</h1>,<hr>水平线</hr>，<div>块级元素</div>等等
表格
表格可以将数据有效的组织在一起，并以网格的形式进行显示，表格除了用于组织数据外，还可以实现页面或局部页面的排版布局，表格元素主要由行、列、表头单元格、正文单元格、标题、表头行、正文行、表尾行等构成。
1.通过表格标签<table></table>创建表格，可通过设置各种属性来设置表格样式

<table border="2" cellpadding="5" cellspacing="5" bgcolor="rgb(ff,ff,66)"
                align="right" width="400" height="100">
    <tr>
        <td>姓名</td>
        <td>部门</td>
        <td>邮箱</td>
        <td>电话</td>
     </tr>
<!--此处代码省略-->
</table>

表单

Form表单是HTML的一个重要部分，负责采集和提交用户输入的信息，表单主要分为表单标签及表单控件两大类，表单控件又可细分为表单域和按钮两部分，常见的表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等，在表单域录入数据后，可通过表单的特殊控件（如提交按钮等）将数据传递给服务器端，由服务器接收表单数据并进行处理。

<form action="处理数据程序的URL地址" method="get|post" name="表单名称" … >
</form>

用户向服务器发送数据时一次只能提交一个表单中的数据
重要属性及描述

属性	描述
action	当提交表单时，向何处发送表单中的数据
enctype	表单数据内容类型，可以为application/x-www-form-urlencoded、text/plain、multipart/form-data
name	表单对象的名称
method	规定向服务器端发送数据所采用的方式，取值可以为get、post

按钮控件
按钮分为提交按钮、重置按钮、图片按钮和普通按钮，可以通过标签或标签来创建按钮。

<input type="submit|reset|button|image" name="…" src="…" value="…" />

button表示创建一个普通按钮，当用户点击按钮时，可以触发JavaScript脚本的按钮
image表示创建一个图片按钮，点击时也可以提交表单
src属性是可选的，当type属性为image时，用来指定图片的URL地址
CSS基础样式
样式是CSS的基本单元，每个样式包含两部分内容：
选择器（Selector）：用于指明网页中哪些元素应用此样式规则。浏览器解析该元素时，根据选择器指定的样式来渲染元素的显示效果；
声明（Declaration）：每个声明由属性和属性值两部分构成，并以英文分号（;）结束
CSS基本格式如图：

CSS样式有以下三种格式：内嵌样式、内部样式和外部样式。
（1）内嵌样式（Inline Style Sheet）又称行内样式，将CSS样式嵌入到HTML标签中可以很简单的对某个标签单独定义样式。

<p style="color:red; background: yellow;">内嵌样式-style属性</p>

（2）内部样式表（Internal Style Sheet）将CSS样式从HTML标签中分离出来，使得HTML代码更加整洁，而且CSS样式可以被多次使用。

内部样式表是一种写在<style>标签中的样式声明，仅对当前页面有效。
在<style>标签中定义CSS样式，然后在页面中使用CSS样式。
一般情况下，<style>标签位于<head>标签之内；
在页面加载过程中，先加载样式后加载页面元素，浏览器根据元素的顺序加载、渲染并在页面中显示出来。
（3）外部样式表是将CSS样式以独立的文件进行存放，然后在页面中引入该样式文件。
样式表优先级
优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下才可以认为离被设置元素越近优先级别越高
下列是一份优先级逐级增加的选择器列表：
通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
!important 规则例外
CSS选择器

1.基本选择器
- 通用选择器：通用选择器是一个星号（*），功能类似于通配符，用于匹配文档中所有的元素类型。通用选择器可以使页面中所有的元素都使用该规则。
- 标签选择器：标签选择器是指任意的HTML标签名作为一个CSS的选择器，用于将HTML中的某种标签来统一设置样式。
- 类选择器：类选择器是指同一样式的元素定义为一类，在类名前有一个（.）号。
- ID选择器：ID选择器的定义与类选择器相似，区别在于使用井号（#）进行定义；在HTML文档中，元素的ID要求是唯一的，通过ID来识别页面中的元素。通过ID选择器可以对元素单独的设置样式。
  优先级从高到低分别是：
  “ID选择器->类选择器->标签选择器->通用选择器”
  2.组合选择器
- 多元素选择器:当多个元素拥有相同的特征时，可以通过多元素选择器的方式来统一定义样式，有效地避免样式的重复定义。多元素选择器允许一次定义多个选择器的样式，选择器之间使用逗号（，）隔开。
- 后代选择器:后代选择器用于选取某个元素的所有后代元素
- 子选择器：子选择器用于选取某个元素的直接子元素（简接子元素不适用），用（> ）隔开。
- 相邻兄弟选择器：相邻兄弟选择器用于选择紧接在某元素之后的兄弟元素，用（+ ）隔开。
- 普通兄弟选择器：普通兄弟选择器是指拥有相同父元素的元素，元素与元素之间不必紧接，选择器之间用（~ ）隔开。
3.属性选择器：存在选择器、相等选择器、包含选择器、连字符选择器等
CSS样式属性

Co1234_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML相关基础概念

HTMLHTML基础HTML概述HTML(Hyper Text Mark-up Language)超文本标记语言，最基础的网页语言，HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀HTML文档的基本结构如下：（1）文档类型声明举例<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN...
复制链接

扫一扫