10007---HTML&CSS--简介

最新推荐文章于 2022-03-11 18:29:26 发布
最新推荐文章于 2022-03-11 18:29:26 发布
阅读量248 收藏
点赞数
分类专栏： HTML5

1.一个最基本的HTML页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的第一个网页</title>
	</head>
	<body>
			<h1>这是我的第一个网页</h1>
	</body>
</html>

2.常见属性

•id
– id属性作为标签的唯一标识，在同一个网页中不能
出现相同的id属性值。
• class
– class属性用来为标签分组，拥有相同class属性的
标签我们认为就是一组，可以出现相同的class属
性，可以为一个元素指定多个class。
• title
– title属性用来指定标签的标题，指定title以后，鼠
标移入到元素上方时，会出现提示文字。

3. HTML5

DOCTYPE 

<!DOCTYPE html>
解决乱码 

<meta charset="utf-8">
meta的用法
• 设置页面的字符集
– <meta charset="utf-8">
• 设置网页的描述
– <meta name="description" content="">
• 设置网页的关键字
– <meta name="keywords" content="">
• 请求的重定向
– <meta http-equiv="refresh" content="5;url=地址"/>

4.常用标签

4.1 <h1>~<h6>

 作用：
– h1~h6都是网页中的标题标签，用来表示网页
中的一个标题，不同的是，从h1~h6重要性越
来越低。
– 标题标签相当于正文的标题，通常认为重要性
仅次于页面的title。
– 一般标题标签我们只会使用到h3，h3以后的标
题标签对于搜索引擎就没有什么意义了。
– 一个页面中只会使用一个h1标签。

4.2 实体

语法: &实体名;
字符实体
• 小于号<
– &lt;
• 大于号>
– &gt;
• 空格
– &nbsp;
• 和符号&
– &amp;
• 版权©
– &copy;
• 引号”
– &quot;
• 注册商标®
– &reg;
• 商标™
– &trade;

4.3 超链接

内部链接 
<a id="header" href="#">头部</a>
<a id="content" href="#header">回到头部</a>
邮件链接 
<a href="mailto:name@web.com">头部</a>

5. CSS

5.1基本语法

基本语法
• CSS的样式表由一个一个的样式构成，一个
样式又由选择器和声明块构成。
• 语法：
– 选择器 {样式名:样式值；样式名:样式值 ; }
– p {color:red ; font-size:12px;}

5.2 CSS的书写位置

行内样式 
<p style="color: red;font-size: 30px"></p>
内部样式表 
<style>
       p{color:red; font-size: 30px;}
</style>
外部样式表 
<link rel="stylesheet" type="text/css" href="style.css">
这种方式将样式表放入到了页面的外部，可以在多个页面中引入，
同时 浏览器加载文件时可以使用缓存，这是我们开发中使用的最多的方式。


xxxcyzyy
关注
专栏目录
html怎么设置border-radius,CSS border-radius 能做什么？
weixin_32518073的博客
06-27 4004
在CSS中，使用border-radius指定八个半径值时，可以创建不同的形状。先来看一个为该特性制定的工具。简介@Rachel Andrew今年在苏黎世的前端会议上谈到了CSS Grid布局的优势。在她演讲的最后，她提到了一个在我脑海中挥之不去的CSS 属性：通过border-radius可以使图像有良好的形状效果。请不要忘记CSS仍然存在并且非常有用。你不需要为每个效果都使用一些花哨的东西 —...
uni-app配置tailwindcss
amiaoyaofeixiang的博客
11-14 2545
前置： 脚手架创建的uniapp项目，vscode执行，vue3版本。
Sublime Text插件之HTML-CSS-JS Prettify
天马3798
12-19 8105
一、Sublime Text插件之HTML-CSS-JS Prettify 说明：如果仅是对HTML、CSS、JS进行格式化显示的话‘HTML-CSS-JS Prettify’插件比‘CodeFormatter’要好一些。 关于CodeFormatter:http://blog.csdn.net/u011127019/article/details/52265980 注： 1.改插件格式化
css-loader 版本号,Webpack中css-loader和less-loader的使用教程
weixin_39712455的博客
08-03 2630
前言在Webpack中，通过css-loader，可以实现在js文件中通过require的方式，来引入css。下面来看看详细的介绍吧。一、css-loader我们需要在js文件里，通过require的方式来引入css，我们来看具体的方法，首先需要安装css-loader，style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)。npm insta...
移动端禁止屏幕缩放 - css
survivorsfyh的博客
05-08 6216
将 web 页面嵌入移动端后，默认可以将页面放大拉伸的效果，可以通过设置如下属性将其禁用，具体操作如下： 首先，找到程序的入口页面 其次，在meta 标签中添加如下两个属性即可： maximum-scale=1.0, user-scalable=0 其中，maximun-scale：允许用户的最大缩放值；user-scalable：是否允许用户进行缩放，默认属性为允许 yes 或 1，...
css background-attachment属性详解
BDawn的专栏
03-05 5018
css background-attachment属性详解 background-attachment属性用途 background-attachment属性用于设置背景图片定位的参照方式 background-attachment可设置的值 scroll: 背景图片相对于容器位置固定 fixed: 背景图片相对于浏览器窗口固定 local: 背景图片相对于容器内容位置固定 background-attachment demo <!DOCTYPE html> <html lang="e
CSS3的border-radius属性详解
祥哥的说
04-03 6412
 CSS3的border-radius属性详解border-radius: none　｜　length{1,4} [/ length{1,4} 其中每一个值可以为 数值或百分比的形式。 length/length　第一个lenght表示水平方向的半径，而第二个表示竖直方向的半径。 如果是一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等...
html-css的蒙版大法
Void的博客
02-03 2379
当导航栏的文字颜色与banner颜色相近看不清时。可以考虑蒙版大法 以下为示例： <!DOCTYPE html> <html lang="en"> <head> <title>mask</title> <style> *{ margin: 0; padding: 0; } body{ font-fami
webpack4已经配置了mini-css-extract-plugin, 但是却打包生成不了css文件。解决
spicyboiledfish的博客
08-20 8398
mini-css-extract-plugin 这个plugin将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMaps的按需加载。 我本地配置了这个plugin, 但是打包却依然没有css, 且打包并没有报错，很奇怪。 原因已经找到： 由于同时配置了这两个plugin, 导致冲突。html-inline-css-webpack-p...
css之 vertical-align用法详解
热门推荐
平平无奇小码农的博客
03-11 2万+
vertical-align 属性设置元素的垂直对齐方式。 css中的vertical-align 属性只能用于 行内元素 和 置换元素（例如 图像和表单输入框） ，此属性不继承。 接下来我们用例子去分析这些值的意思及产生的效果： 首先我们先看一张图，文字的顶线、中线、基线，基线是字母x的下边缘 默认例子 <style> * { margin: 0; padding: 0; } div { width: 200px; line-height: 60
css3-mediaqueries.js+html5.js
07-04
在本案例中，"css3-mediaqueries.js" 和 "html5.js" 是两个JavaScript库，它们主要用于增强对旧版Internet Explorer（如IE8和IE7）的支持，使这些浏览器能够实现CSS3媒体查询和HTML5新特性的兼容。 **CSS3媒体查询*...
mini-css-extract-plugin源码解析
vv_bug
08-19 3048
前言 前面我们写过几篇关于webpack的文章： webpack源码解析一 … webpack源码解析七（optimization） 然后结合之前babel、eslint知识搭了一个比较复杂的vue项目： webpack实战之（手把手教你从0开始搭建一个vue项目） 手把手教你从0开始搭建一个vue项目（完结） 在实战demo中我们有用到一个css的插件mini-css-extract-plugin,今天我们结合demo来分析一下源码。 简介 This plugin extracts CSS in
css打包优化去重去无效代码purifycss-webpack purify-css -8
zhoulucky1993的博客
12-24 2790
1：确保自己的电脑已经安装了node和Git软件 2：自己在盘里随便创建一个文件夹一般为英文(也就是你自己的项目名称) 3：在新创建好的文件夹里面右键点击调出git指令窗口在窗口里面输入如下指令：     1：npm install webpack -g                 2:  npm install webpack-cli -g     3: npm init -y    ...
#HTML5-CSS-transition-过渡特效
weixin_43097301的博客
10-08 1万+
CSS过渡特效 概述   在CSS中用于设置过渡特效的属性是 transition，该属性允许CSS的属性值在一定的时间区间内平滑地过渡，这就拜托了我们在CSS3版本标准之前对“JavaScript”和“Flash”的依赖，使页面的性能得以提升。这种效果可以在鼠标悬浮（:hover）、鼠标单击（:active）、表单元素获得焦点（:focus）或对元素任何改变以及在JavaScript中某些事件执...
THUCNews中文文本分类数据集包含84万个新闻文档，共14个类别；基于此模型测
最新发布
09-30
THUCNews中文文本分类数据集包含84万个新闻文档，共14个类别；基于此模型测试BERT多个版本的分类性能_ TextClassifier
基于Java的uinshine-fill在线应用设计源码
09-30
该项目是一款基于Java的在线应用设计源码，名为uinshine-fill，集成了Java、JavaScript、HTML、CSS、Shell和Lua等多种编程语言。源码文件共计724个，其中Java文件占比最高，达到472个，紧随其后的是XML和JavaScript文件，分别为51个和47个。此外，还包括HTML、YML、Imports、Properties、JSON、TXT和CSS文件。
基于Java语言的zzyi-cp项目设计源码总结
09-30
该项目为基于Java语言的zzyi-cp设计源码，总计包含441个文件，涵盖382个Java源文件、51个XML配置文件、5个YAML文件、2个Git忽略文件以及1个IML文件。
Labview通过FINS tcp协议与欧姆龙PLC通讯，支持CIO区，W区，D区，布尔量，整数，浮点数，字符串读写操作，软件无
09-30
Labview通过FINS tcp协议与欧姆龙PLC通讯，支持CIO区，W区，D区，布尔量，整数，浮点数，字符串读写操作，软件无加密
基于asp.net的实验室设备管理系统设计与实现.docx
09-30
基于asp.net的实验室设备管理系统设计与实现.docx
深入理解CSS3和HTML5：background-clip与background-origin
"认识CSS3和HTML5，这两项技术是现代网页开发的重要组成部分，它们带来了丰富的样式和功能，极大地提升了用户体验。这篇文档提供了一个对CSS3中的background-clip和background-origin属性的介绍，帮助理解这两个属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值