首页 > 其他分享 >HTML和CSS

HTML和CSS

时间:2024-04-04 21:22:27浏览次数:29  
标签:标签 边框 HTML 文本 选择器 CSS 属性

Web标准也称网页标准,由一系列的标准组成,大部分有W3C(World Wide Web Consortium,万维网联盟)负责制定。

三个组成部分:

  • HTML:负责网页的结构(页面元素和内容)。
  • CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。
  • JavaScript:负责网页的行为(交互效果)。

什么是HTML、CSS?

HTML(Hyper Text Markup Language):超文本标记语言。

超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。

CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。

用户手册W3school

标题排版

1.标题标签

  • 标签:<h1>...</h1>(h1 -> h6 重要程度依次降低)
  • 注意:HTML标签都是预定义好的,不能自己随意定义。

2.水平线标签<hr>

3.图片标签<img src="..." height="...">

  • 绝对路径:绝对磁盘路径(D:/xxxx)、绝对网络路径(https://xxxx)
  • 相对路径:从当前文件开始查找。(./:当前目录,../:上级目录)

标题样式

1.CSS引入方式

  • 行内样式:<h1 style= "...">
  • 内嵌样式:<style>...</style>
  • 外联样式:xxx.css <link href="...">

2.颜色表示

  • 关键字:red、green、blue
  • rgb表示法:rgb(255,0,0)、rgb(134,100,89)
  • 十六进制:#ff0000、#cccccc、#ccc

3.颜色属性

color:设置文本内容的颜色

4.<span>标签

  • <span>是一个在开发网页时大量会用到的没有意义的布局标签
  • 特点:一行可以显示多个(组合行内元素),宽度和高度默认由内容撑开

5.CSS选择器

  • 元素选择器:标签名
  • 类选择器:.class属性值
  • id选择器:#id属性值
  • 优先级:id选择器 > 类选择器 > 元素选择器
  • 注意:选择器后面的 { } 里面的语句应该带上分号

6.CSS属性

  • color:设置文本的颜色
  • font-size:字体大小(注意:记得加px)

超链接

1.超链接

标签:<a>

属性:

​ href:指定资源访问的url

​ target:指定在何处打开资源链接

​ _self:默认值,在当前页面打开

​ _blank:在空白页面打开

2.CSS属性

text-decoration:规定添加到文本修饰,none表示定义标准的文本。

color:定义文本的颜色

正文排版

1.音频、视频标签

<audio> <video>

2.换行、段落标签

换行:<br>;段落:<p>

3.文本加粗标签

<b>(仅是加粗) <strong>(含有强调的意思)

4.CSS样式

line-height:设置行高

text-indent:定义第一个行内容的缩进

text-align:规定元素中的文本的水平对齐方式

5.注意

在HTML中无论输入多少个空格,只会显示一个。可以使用空格占位符:&nbsp;

页面布局

1.CSS盒子模型

组合:内容(content)、内边框(padding)、边框(border)、外边框(margin)

2.CSS属性

width:设置宽度

height:设置高度

border:设置边框的属性,如:1px solid #000;

padding:内边框

margin:外边框

注意:如果只需要设置某一个方位的边框、内边距、外边距,可以在属性名后加上 -位置,如:padding-top、padding-left、padding-right ...

表格标签

标签 描述 属性/备注
<table> 定义表格整体,可以包裹多个<tr> border:规定表格边框的宽度
width:规定表格的宽度
cellspacing:规定单元之间的内容
<tr> 表格的行,可以包裹多个<td> 表格有多少行就有多少个<tr>
<td> 表格单元格(普通),可以包裹内容 如果是表头单元格,可以替换为<th>
<th> 表示表头单元格,具有加粗居中的效果 只能用于表头第一行

表单标签

1.表单标签:<form>

2.表单属性:

action:表单数据提交的url地址

method:表单提交方式

  • get:表单数据拼接在url后面,?username=java,大小有限制
  • post:表单数据在请求体中携带,大小没有限制

注意:表单项必须有name属性才可以提交

表单项标签

  • <input>的type属性:text、password、radio、checkbox、file、date、datetime-local、time、number、hidden、button、submit
  • <select>定义下拉列表
  • <textarea>定义文本域

标签:标签,边框,HTML,文本,选择器,CSS,属性
From: https://www.cnblogs.com/JenckMin/p/18114621

相关文章

  • CSS基础:语法、注释以及注释的3个注意事项
    你好,我是云桃桃。一个希望帮助更多朋友快速入门WEB前端的程序媛。1枚程序媛,大专生,2年时间从1800到月入过万,工作5年买房。分享成长心得。259篇原创内容-公众号后台回复“前端工具”可获取开发工具,持续更新中后台回复“前端基础题”可得到前端基础100题汇总,持续更新中今......
  • 27 个 CSS 案例演示和 DEMO(1),【大牛疯狂教学】
    伪类和伪元素==========4、伪类HTML元素的状态是可以动态变化的。举个栗子,当你的鼠标悬浮到一个按钮上时,按钮就会变成“悬浮”状态,这时我们就可以利用伪类:hover来选中这一状态的按钮,并对其样式进行改变。:hover是笔者最最常用的一个伪类。还有一个很常用的伪类是:nth......
  • node.js启动文件服务器 并自动查询index.html等默认文件
    方法1'usestrict';consthttp=require('http'),fs=require('fs'),url=require('url'),path=require('path');//从命令行参数获取root目录,默认是当前目录varroot=path.resolve(process.argv[2]||'.&......
  • 前端入门系列-HTML-HTML结构
    ......
  • 【HTML】简单制作一个动态3D正方体
     目录前言开始HTML部分JS部分CSS部分效果图总结前言    无需多言,本文将详细介绍一段代码,具体内容如下: 开始    首先新建文件夹,创建两个文本文档,其中HTML的文件名改为[index.html],JS的文件名改为[script.js],CSS的文件名改为[style.css],创建好后......
  • HTML标签属性
    ​ HTML(超文本标记语言)标签的属性为网页元素定义了额外的信息,用于调整元素的行为或外观。每个HTML标签都可以有多个属性,但某些属性只适用于特定的标签。属性提供了丰富的方式来控制HTML元素的行为和表示,是Web开发中不可或缺的部分。通过合理使用这些属性,可以提升网页的功能性、......
  • HTML表单
    HTML表单文字字段<formname="formBox"method="post"action="">姓名:<inputtype="text"name="name"size="20"/><br/>年龄:<inputtype="text"name="age"size=&......
  • CSS 布局专题
    0x01浮动布局(1)常见网页布局顶部商标栏(Logo):展示网站的标志、名称以及具有代表性的图片导航栏(Navigation):展示网站大概的分类左侧边栏(Left-sideBar):展示网站详细的分类内容栏(Content):展示网站的主要内容右侧边栏(Right-sideBar):展示在网站中比较热门的内容(2)浮动布局概述流......
  • HTML期末大作业~海贼王6页~Web大学生网页成品-s016
    HTML期末大作业~学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作,HTML网页设计结课作业http://imianba.cn/#/articles?category=1&theme=0这段代码是HTML代码,它定义了一个名为“海贼王”的网站的结构。它包含一个头部(h......
  • 前端学习思维导图总结~~~CSS篇
    一、前端学习总结CSS部分:二、随记分享这是前端学习过程中总结的思维导图,总结并分享出来,希望给有需要的朋友呀一些帮助,给各位看官一些参考总结的思维导图文件在 主页资源(免费):前端三件套之一:css学习总结思维导图资源-CSDN文库https://download.csdn.net/download/m0_615......