【Web前端】HTML/CSS一文详解

编程之家收集整理的这篇文章主要介绍了【Web前端】HTML/CSS一文详解编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

万维网W3C标准中网页分为结构,表现和行为三部分,HTML用于描述页面的结构,CSS用于控制页面中的元素样式,JavaScript用于响应用户的操作。HTML,CSS和JavaScript组成了前端技术栈。学习HTML就是学习标签的一个过程,难度指数低,重在反复练习!同时,在初学阶段,我们要学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距等技能。......,下方主要介绍关于【Web前端】HTML/CSS一文详解的全文内容,希望对你有所帮助。

现在对HTMLCSS的基础知识做一个详细的总结,文章内容很硬核。共有3w+字总结,建议收藏反复学习!适用于初学者学习或者熟练相关操作的人复习使用

在这里插入图片描述


文章目录

@H_301_14@
  • HTML篇
  • 一.HTML简介
  • @H_301_14@
  • 1.什么是HTML?
  • 2.HTML 标签
  • 3.HTML 元素
  • 4.HTML版本
  • 5.Web 浏览器
  • 6.HTML 网页结构
  • 7.中文编码
  • 8.编写第一个网页
  • 二.HTML编辑器
  • 三.HTML基础
  • @H_301_14@
  • 1.HTML 标题
  • 2.HTML 段落
  • 3.HTML 链接
  • 4.HTML 图像
  • 四.HTML元素
  • @H_301_14@
  • 1.HTML 元素语法
  • 2.嵌套的 HTML 元素
  • 3.HTML 空元素
  • 五.HTML属性
  • 六.HTML标题
  • @H_301_14@
  • 1.HTML标题
  • 2.HTML水平线
  • 3.HTML 注释
  • 七.HTML段落
  • @H_301_14@
  • 1.HTML段落
  • 2.HTML换行
  • 八.HTML文本格式化
  • 九.HTML链接
  • 十.HTML头部
  • 十一.HTML图像
  • 十二.HTML表格
  • 十三.HTML列表
  • 十四.HTML区块
  • @H_301_14@
  • 1.HTML区块元素
  • 2.HTML内联元素
  • 3.HTML的 div 元素
  • 4.HTML的 span 元素
  • 十五.HTML布局
  • @H_301_14@
  • 1.使用div元素添加网页布局
  • 2.使用table元素添加网页布局
  • 十六.HTML表单和输入
  • @H_301_14@
  • 1.文本域
  • 2.密码字段
  • 3.单选按钮
  • 4.复选框
  • 5.提交按钮
  • 十七.HTML框架
  • @H_301_14@
  • 1.iframe语法
  • 2.iframe设置高度和宽度
  • 3.iframe去除边框
  • 4.使用 iframe 来显示目标链接页面
  • 十八.HTML颜色
  • 十九.脚本
  • @H_301_14@
  • 1.HTML的 script 标签
  • 2.HTML的 noscript 标签
  • 二十.字符实体
  • 二十一.URL
  • @H_301_14@
  • 1.常见的 URL Scheme
  • 二十二.HTML总结
  • CSS篇
  • 一.CSS简介
  • @H_301_14@
  • 1.什么是CSS?
  • 二.CSS语法
  • @H_301_14@
  • 1.语法规则
  • 2.注释
  • 三.CSS选择器
  • @H_301_14@
  • 1.CSS的id选择器
  • 2.CSS的class选择器
  • 四.CSS创建
  • @H_301_14@
  • 1.外部样式表
  • 2.内部样式表
  • 3.内联样式
  • 4.多重样式
  • 5.多重样式的优先级
  • 五.CSS 背景
  • @H_301_14@
  • 1.背景颜色
  • 2.背景图像
  • 3.背景图像 - 水平或垂直平铺
  • 4.背景图像- 设置定位与不平铺
  • 5.背景- 简写属性
  • 六.CSS文本
  • @H_301_14@
  • 1.文本颜色
  • 2.文本的对齐方式
  • 3.文本修饰
  • 4.文本转换
  • 5.文本缩进
  • 七.CSS文字
  • @H_301_14@
  • 1.CSS字体类型
  • 2.字体系列
  • 3.字体样式
  • 4.字体大小
  • @H_301_14@
  • 4.1设置字体的大小像素
  • 4.2用em来设置字体大小
  • 4.3使用百分比和EM组合
  • 八.CSS链接
  • @H_301_14@
  • 1.链接样式
  • 2.文本修饰
  • 3.背景颜色
  • 九.CSS列表
  • @H_301_14@
  • 1.无序列表和有序列表
  • 2.标记为图像的列表
  • 3.列表属性值简写
  • 十.CSS表格
  • @H_301_14@
  • 1.表格边框
  • 2.折叠边框
  • 3.表格宽度和高度
  • 4.表格文字对齐
  • 5.表格填充
  • @L_419_110@
  • 十一.CSS盒子模型(Box Model)
  • @H_301_14@
  • 1.CSS 盒子模型
  • 2.元素的宽度和高度
  • 十二.CSS边框(Border)
  • @H_301_14@
  • 1.边框样式
  • 2.边框宽度
  • 3.边框颜色
  • 4.单独设置各边
  • 5.属性简写
  • 十三.CSS轮廓(outline)
  • 十四.CSS外边距(margin)
  • @H_301_14@
  • 1.CSS外边距的使用
  • 2.CSS外边距属性简写
  • 十五.CSS填充(padding)
  • @H_301_14@
  • 1.CSS填充的使用
  • 2.CSS填充属性简写
  • 十六.CSS分组和嵌套选择器
  • @H_301_14@
  • 1.分组选择器
  • 2.嵌套选择器
  • 十七.CSS尺寸(Dimension)
  • 十八.CSS显示与可见性(Display Visibility)
  • @H_301_14@
  • 1.隐藏元素
  • 2.改变元素的显示
  • 十九.CSS定位(Position)
  • @H_301_14@
  • 1.static定位
  • 2.fixed定位
  • 3.relative定位
  • 4.absolute定位
  • 5.sticky 定位
  • 6.重叠的元素
  • 二十.CSS布局(Overflow)
  • 二十一.CSS浮动(Float)
  • @H_301_14@
  • 1.元素是怎么浮动?
  • 2.彼此相邻的浮动元素
  • 3.清除浮动
  • 二十二.CSS布局-对齐
  • @H_301_14@
  • 1.水平对齐
  • @H_301_14@
  • 1.1元素居中对齐
  • 1.2文本居中对齐
  • 1.3图片居中对齐
  • 1.4使用定位方式实现左右对齐
  • 1.5使用浮动方式实现左右对齐
  • 2.垂直对齐
  • 二十三.CSS导航栏
  • @H_301_14@
  • 1.HTML设置菜单项
  • 2.垂直导航栏
  • 3.水平导航栏
  • 内联列表项
  • 2.浮动列表项
  • 3.实例
  • 4.固定导航栏
  • 二十四.CSS下拉菜单
  • @H_301_14@
  • 1.基本下拉菜单
  • 2.常用下拉菜单
  • 二十五.CSS提示工具
  • @H_301_14@
  • 1.基础提示框
  • 2.定位提示工具
  • 3.添加箭头
  • 4.淡入效果
  • 二十六.总结
  • @H_954_502@HTML

    一.HTML简介

    万维网W3C标准中网页分为结构,表现和行为三部分,HTML用于描述页面的结构,CSS用于控制页面中的元素样式JavaScript用于响应用户的操作。HTMLCSSJavaScript组成了前端技术栈。学习HTML就是学习标签一个过程,难度指数低,重在反复练习!

    <!DOCTYPE HTML>
    <HTML>
    <head>
    <Meta charset="utf-8">
    <Title>小橙子前端教程</Title>
    </head>
    <body>
    
    <h1>标题</h1>
    <p>段落</p>
    
    </body>
    </HTML>
    

    1.什么是HTML

    总结

    以上是编程之家为你收集整理的【Web前端】HTML/CSS一文详解全部内容,希望文章能够帮你解决【Web前端】HTML/CSS一文详解所遇到的程序开发问题。

    如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

    CSS文章

    CSS有三种方法可以在站点网页上使用样式表,外联式Linking(也叫外部样式):将网页链接到外部样式表。嵌入式Embedding(也叫内页样式):在网页上创建嵌入的样式表。
    CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。对CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。
    做过网站的人都知道我们经常会遇到一些栏目里的文字超出栏目宽度,这个时候怎么办呢?估计100%做程序设计的人都想到了,对!用left函数来截取字符就可以了。但是这个样子对SEO来说并不友好,下面青岛星网介绍一种CSS截取字符串的方法。
    客户在更新网站新闻产品的时候,往往工作人员根本不管图片尺寸就上传,图片尺寸如果超出页面的宽度很前台页面之间就撑开了,下面青岛星网跟大家分享:CSS解决图片过大撑开页面的方法。
    CSS在定义class与ID的时候应该如何合理的命名,今天青岛星网就:CSS的命名规范来给大家做详细介绍,希望大家都能编写规划化的CSS文件。
    Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。
    小三角形作为网页常用小图标,我们一般都是用图片格式表达,今天青岛星网跟大家分享:纯CSS写出小三角形,无图片单纯CSS编写的三角形哦。
    以前想实现文字描边效果只能用PS制作图片,现在我们可以用CSS3就可以实现文字描边效果其实,不用图片还可以文字描边哦,下面看青岛星网的实现方式。
    微信公众号搜索 “ 程序精选 ” ,选择关注!
    微信公众号搜 "程序精选"关注