HTMLCSS(入门)

news/2024/7/8 12:17:49 标签: html, css, 前端
htmledit_views">

HTML

<html> 
    <head>
        <title>
            第一个页面
        </title>
    </head>
    <body>
        键盘敲烂,工资过万
    </body>
</html>

<!DOCTYPE>文档类型声明,告诉浏览器使用哪种HTML版本显示网页

<!DOCTYPE html>当前页面采取的四HTML5版本来显示网页

位于<html>标签之前

不是一个HTML标签,只是文档类型声明标签

lang语言:定义当前文档显示的语言

标题段落标签

标题标签<h1> - <h6> 作为标题使用,重要性递减

段落标签<p><p/> (Alt+z 自动换行)段落之前会有空隙

换行标签<br /> 强制换行,单标签,换行后不会增加垂直间距

文本格式化标签

加粗标签<strong>加粗</strong>

倾斜标签<em>倾斜<em/>

删除线标签<del>删除线<del/>

下划线标签<ins>下划线<ins/>

盒子标签

<div>和<span>标签

div标签单独占一行,一行只能有一个div

span标签一行可以放多个span

图像标签和路径

图像标签

路径
相对路径

绝对路径

超链接标签

链接标签<a href="lianjie" target="...">文本或图像</a>

target是打开窗口的凡是,默认值为_self

_self表示在此窗口中打开链接

_blank表示在新窗口中打开

注释标签和特殊字符

表格

表格是用来展示数据的

表格基本用法

表头单元格标签(<th><th/>)

表格属性

不详细叙述,之后在css详细学习

表格结构标签

表格头部区域<thead> </thead>

表格主体区域<tbody> </tbody>

合并单元格

列表

分为三类:无序列表,有序列表,自定义列表

无序列表(<ul></ul>)

有序列表(<ol></ol>)

自定义列表

未完待续。。。

表单

目的为了收集信息

表单的组成

表单域,表单控件,表单信息

表单域(<form></form>)

包含元素的区域

表单控件
<input>输入表单元素

<select>下拉表单元素

定义下拉列表

<textarea>文本域元素

输入内容较多,用于定义多行文本输入的控件

查阅文档

W3C:w3school 在线教程

MDN:https://developer.mozilla.org/zh-CN/docs/Web

CSS

CSS美化HTML,实现结构和样式的分离

CSS:由选择器和一条或多条声明组成

CSS基础选择器

选择器用来选择标签

标签选择器

类选择器
基本使用

口诀:

样式点定义

结构类调佣

一个或多个

开发最常用

特殊使用:多类名

优点:

(1)可以把一些标签元素相司的样式(共同的部分)放到一个类里面,

(2)这些标签都可以调用这个公共的类然后再调用自己独有的类

(3)从而节省CSS代码,统一修改也非常方便

id选择器

通配符选择器

CSS字体属性

字体系列

字体大小

字体粗细

文字样式

字体复合属性

CSS文本属性

文本颜色(color)

对齐文本(text-align)

装饰文本(text-decoration)

文本缩进(text-indent)

行间距(line-height)

CSS的引入方式

按照CSS样式书写的位置(或者引入的方式)分类:

行内样式表(行内式)

内部样式表(嵌入式)

外部样式表(链接式)

内部样式表(style放在html中)

行内样式表(放在具体标签中)

外部样式表(引入html外的css文件)

Chrome调试工具

摘自黑马pink


http://www.niftyadmin.cn/n/5537227.html

相关文章

JavaScript基础-函数(完整版)

文章目录 函数基本使用函数提升函数参数arguments对象&#xff08;了解&#xff09;剩余参数(重点)展开运算符(...) 逻辑中断函数参数-默认参数函数返回值-return作用域(scope)全局作用域局部作用域变量的访问原则垃圾回收机制闭包 匿名函数函数表达式立即执行函数 箭头函数箭头…

springboot封装请求参数json的源码解析

源码位置&#xff1a; org.springframework.web.servlet.mvc.method.annotation.AbstractMessageConverterMethodArgumentResolver#readWithMessageConverters(org.springframework.http.HttpInputMessage, org.springframework.core.MethodParameter, java.lang.reflect.Type…

相机、镜头基础知识及硬件选型介绍

工业相机基础知识 1.相机Binning(图像读出模式)功能:将相邻的几个像素合并成一个像素,其优点如下:1)可提高信噪比至sqr(mn)倍;2)可提高帧速至mn倍;3)可提高像素响应度。 2.相机芯片中定义1英寸=16mm,不等于25.4mm 3.相机的作用及基本成像过程:通过光电反应将光…

2024攻防演练:亚信安全新一代WAF,关键时刻守护先锋

实网攻防 网络安全如同一面坚固的盾牌&#xff0c;保护着我们的信息资产免受无孔不入的威胁。而其中&#xff0c;WAF就像网络安全的守门员&#xff0c;关键时刻挺身而出&#xff0c;为您的企业筑起一道坚实的防线。 攻防不对等 防守方实时应答压力山大 在攻防对抗中&#xf…

B+树的元素检索过程

B树的检索方式主要是通过从根节点开始逐层向下搜索&#xff0c;直到找到目标数据或确定目标数据不存在为止。具体的检索过程如下&#xff1a; 从根节点开始&#xff1a; 初始时&#xff0c;从B树的根节点开始查找。 节点内部的查找&#xff1a; 在每个非叶子节点中&#xff0c…

SQLyog脚本无限试用重置脚本

文章目录 引言脚本(win)必要操作、说明 引言 SQLyog 需要po jie&#xff0c;但是网上的没看到很好使的&#xff0c;直接下的官方。能处理14天试用也是很ok的。 脚本(win) echo offREM SQLyog注册表key&#xff0c;可能跟你的不一样&#xff0c;如果不一样&#xff0c;请替换…

一本超简单能用Python实现办公自动化的神书!让我轻松摆脱办公烦恼!

《超简单&#xff1a;用Python让Excel飞起来》 这本书旨在通过Python与Excel的“强强联手”&#xff0c;为办公人员提供一套高效的数据处理方案。书中还介绍了如何在Excel中调用Python代码&#xff0c;进一步拓宽了办公自动化的应用范围。 全书共9章。第1~3章主要讲解Python编…

详细分析Spring Boot 数据源配置的基本知识(附配置)

目录 前言1. 基本知识2. 模版3. 实战经验前言 对于Java的基本知识推荐阅读: java框架 零基础从入门到精通的学习路线 附开源项目面经等(超全)【Java项目】实战CRUD的功能整理(持续更新)1. 基本知识 包括数据源的概念、连接池的作用、多数据源的实现与管理、Druid 连接池…