前端html

html

超文本标记语言。文本,图片,视频,音频。

网页基本信息

一个基础的网页具有的一些信息。

<!-- 这是注释-->

<!--!DOCTYPE网页约束规范-->
<!DOCTYPE html>
<!--html网页开始的标签-->
<html lang="en">
<!--head网页头部-->
<head>
<!--meta描述性标签-->
<meta charset="UTF-8">
<!--title网页标题,显示在网页头部-->
<title>Title</title>
</head>
<!--body网页内容标签-->
<body> <!--反斜杠闭合标签-->
</body>
</html>

网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>1级</h1>
<h2>2级</h2>
<h3>3级</h3>
<h4>4级</h4>
<h5>5级</h5>
<h6>6级</h6>
<!--段落标签-->
<p>一段</p>
<!--换行标签-->
<br/>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
<strong>粗体</strong>
<em>斜体</em>
<!--特殊符号-->
&nbsp;空格
&gt;大于
&lt;小于
&copy;版权
&bigcap;交集
&gnsim; </body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--图像标签 -->
<!--src路径 -->
<!--alt找不到图片时候,显示的提示文字 -->
<!--title悬停文字 -->
<img src="./img/1.jpg" alt="书籍封面" title="悬停文字"> </body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body> <a name="top"></a>
<!--href跳转的页面 -->
<!--target="_blank" 在一个新的页面打开-->
<a href="hello.html" target="_blank">点击跳转</a>
<!--嵌套图片为一个链接 -->
<a href="hello.html"><img src="./img/1.jpg" alt="书籍封面" title="悬停文字">
</a> <!--锚链接
1.定义一个标记
2.跳转到标记
-->
<a href="#top">回到顶部</a> </body>
</html>

块元素和行内元素

块元素独占一行

行内元素只有一行

列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序 -->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<!--无序 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table -->
<table border="1"> <!--行 -->
<tr>
<!-- 列colspan跨列 -->
<td colspan=2>列</td>
<td>列</td>
<td>列</td>
<td>列</td>
</tr>
</table>
</body>
</html>

音频视频

<video arc="" controls autoplay></video>
<audio arc="" controls autoplay></audio>

网页结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页结构</title>
</head>
<body> <header>
<h2>网页头部</h2>
</header> <section>
<h2>网页主体</h2>
</section> <article>文章内容</article>
<nav> 导航栏</nav>
<aside>侧边栏</aside> <footer>
<h2>网页脚步</h2>
</footer>
</body>
</html>

内联框架

<!--内联框架 -->
<iframe src="https://leetcode.cn" name="" frameborder="1" height="1000px" width="800px"></iframe>

表单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body> <form method="post" action="demo7.html">
<!--表单的基本元素 -->
name:<input type="text" name="name"><br>
pwd:<input type="password" name="pwd"><br>
age:<input type="text" name="age"><br>
<!--单选框 -->
sex:
<input type="radio" name="sex" value="nan" checked="checked">men
<input type="radio" name="sex" value="nv" >women
<!--多选框 -->
<input type="checkbox" name="hobby" checked="checked">eat
<input type="checkbox" name="hobby" checked="checked">sleep
<input type="checkbox" name="hobby" checked="checked">games
<input type="checkbox" name="hobby" checked="checked">sport
<!--下拉框 -->
xialakuang:
<select> <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<!--提交 -->
<input type="submit" value="submit">
<!--文件 -->
<input type="file" name="files">
<!--数字验证 -->
<input type="number" name="num" max="10" step="1" min="1"> </form> </body>
</html>

css

css:层叠级联样式表。用来美化网页。

css方式引入的三种方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--方式一,样式在头文件中 -->
<style>
h1{
color: red;
}
</style>
<!--方式二,将样式单独建立,再引进来 -->
<link rel="stylesheet" href="../../css/demo1.css">
</head>
<body>
<h1>方式一</h1>
<h2>方式二</h2>
<!--方式三,直接在标签上面加上 一般不建议使用!-->
<h3 style="color: yellow">方式三</h3>
</body>
</html>

css三种样式选择器

id选择:id唯一

标签选择:所有相同标签

class选择:所有定义为此类的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器,所有h1标签都会变成此样式 */
h1{
color: yellow;
} /*类选择器,类名可以定义多个,所有加此类名的标签拥有此样式*/
.b{
color: red;
} /*id选择器,只有id为此的标签才拥有此样式*/
#a{
color: green;
}
</style>
</head>
<body> <h1>标签选择器</h1> <h2 id="a">id选择器</h2> <h3 class="b">class选择器</h3>
<h3 class="b">class选择器</h3>
<h3 class="b">class选择器</h3> </body>
</html>

四个层次选择器

<style>
/*后代选择器,body后面的都会渲染,儿子,孙子…… */
body p{
background: green;
}
/*子选择器,只选择body的儿子标签,孙子啥的不管 */
body>p{
background: red;
}
/*相邻兄弟选择器 同辈,它的下一个有样式 */
.active +p{
background: yellow;
}
/* 通用选择器*/
.active~p{
background: blue;
} </style>

结构伪类选择器

<style>
/*ul的第一个子元素 */
ul li:first-child{
background: blue;
}
/*ul的最后一个子元素 */
ul li:last-child{
background: yellow;
}
/* p标签下的第二个子标签*/
p:nth-child(1){
background: red;
}
/*选中父元素下的类型为p元素的第二个*/
p:nth-of-type(2){
background: lightpink;
}
/*伪类,鼠标上去才会显示*/
a:hover{
background: blueviolet;
}
</style>

属性 选择器

=:等于

*=:包含

^=:以什么开头

$=:以什么结尾

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .demo a{
float: left;
display: block;
height: 50px;
width: 50px;
text-decoration: none;
margin-right: 5px;
border-radius: 5px;
background: lightpink;
text-align: center;
font: bold 20px/50px Arial; } /* 属性选择器*/
/* 选择带有id的标签*/
a[id]{
background: blueviolet;
}
/*选择id等于某个值的元素 */
a[id="1"]{
background: red;
}
/* 选择class中含有class的属性,可以不完全等于
去掉*就是等于,加上*就是含有
*/
a[class*="class"]{
background: green;
} </style>
</head>
<body>
<p class="demo">
<a href="demo1.html" id="1">1</a>
<a href="demo2.html">2</a>
<a href="demo3.html">3</a>
<a href="demo4.html">4</a>
<a href="demo5.html" id="5">5</a>
<a class="class" href="">6</a>
<a class="sclass" href="">7</a>
</p>
</body>
</html>

字体

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-family: 楷体;
color: lightpink;
font-size: 20px;
font-weight: bolder;
}
</style>
</head>
<body>
<p>
《长命女·春日宴》
</p>
<p>出自五代冯延巳的《长命女·春日宴》</p>
<p>春日宴,绿酒一杯歌一遍。</p>
<p>再拜陈三愿:</p>
<p>一愿郎君千岁,</p>
<p> 二愿妾身常健,</p>
<p>三愿如同梁上燕,</p>
<p>岁岁长相见。</p> </body>
</html>

文本样式和超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
color: red;
text-align: left;
text-decoration: none; }
a:active{
color: yellow ;
}
a:hover{
color: yellow ;
}
a:visited{
color: darkgrey;
} </style>
</head>
<body>
<img src="../img/1.jpg" alt="" width="50%" height="50%"><br/>
<a>作者:</a><br/>
<a>价格:</a>
</body>
</html>

列表

<style>
/*list-style: none;去掉列表前面的符号
list-style: decimal;数字
list-style: armenian;特殊符号
list-style: inside;实心圆圈
*/
ul li{
height: 30px;
list-style: disc;
}
ul{
background: darkgrey;
}
</style>

图片背景

<style>
body{
background-image: url("../img/1.jpg");
background-repeat: no-repeat; }
</style>

盒子模型

<style>
/*给盒子加上样式*/
#box{
width: 300px;
border:1px solid yellow;
}
/*p:nth-of-type(1){*/
/*border: 1px dashed red;*/
/*}*/
p:nth-child(2){
border: 1px dashed red;
} /*给input中的id属性的全加上虚线边框 */
input[id]{
border: 2px dashed green;
}
</style>

圆角边框

/*border-radius: 100px 0px 0px 0px;
左上 右上 右下 左下
box-shadow: 10px 10px 100px yellow;
设置阴影和颜色
*/
img{
background: transparent;
width: 300px;
height: 300px;
border: 0px solid ;
border-radius: 100% 100% 100% 100%;
box-shadow: 10px 10px 100px yellow;
}

display和float

<style>
/*display: block;盒子展示 块元素和非块元素的互相转换
float: right;盒子浮动
*/
div{
width: 200px;
height: 200px;
border: 1px solid red; }
span{
width: 200px;
height: 200px;
border: 1px solid red;
display: block;
float: right;
}
</style>

定位

固定定位:位置不会改变

相对定位:位置随着参数gaib

绝对定位:父有定位相对父定位,父不在相对浏览器

<style>
#f{
background: yellow;
border: 1px dashed rebeccapurple;
position: relative;/*相对定位*/
top: 120px;
left: 30px;
bottom: 0px;
right:0px;
} #son{
background: blueviolet;
border: 1px dashed rebeccapurple;
position: absolute;/*绝对定位 父有定位相对父定位,父不在相对浏览器*/
top: 0px;
left: 0px;
bottom: 0px;
right:0px;
} #daughter{
background: green;
border: 1px dashed rebeccapurple;
position: fixed;/*固定定位 */ }
</style>

html和css的常用语法代码详解的更多相关文章

  1. 【第六课】Nginx常用配置下详解

    目录 Nginx常用配置下详解 1.Nginx虚拟主机 2.部署wordpress开源博客 3.部署discuz开源论坛 4.域名重定向 5.Nginx用户认证 6.Nginx访问日志配置 7.Ngi ...

  2. Javascript常用的设计模式详解

    Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...

  3. ARM Cortex-M底层技术(2)—启动代码详解

    杂谈 工作了一天,脑袋比较乱.一直想把底层的知识写成一个系列,希望可以坚持下去.为什么要写底层的东西呢?首先,工作用到了这部分内容,最近和内部Flash打交道比较多,自然而然会接触到一些底层的东西:第 ...

  4. Delphi中TStringList类常用属性方法详解

    TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...

  5. Eclipse或Myeclipse常用快捷键组合详解

    Eclipse 是一个开放源代码的.基于Java的可扩展开发平台,就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.. Eclipse(Myeclipse)中有很多便于开发的快捷键 ...

  6. maven常用插件配置详解

    常用插件配置详解Java代码    <!-- 全局属性配置 --> <properties> <project.build.name>tools</proje ...

  7. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  8. 转:springmvc常用注解标签详解

    Spring5:@Autowired注解.@Resource注解和@Service注解 - IT·达人 - 博客园--这篇顺序渐进,讲得超级好--此人博客很不错http://www.cnblogs.c ...

  9. ExtJs常用布局--layout详解(含实例)

    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...

随机推荐

  1. 将Excel数据转换为Java可识别时间(Date、Timestamp)

    引言 Excel的时间,POI读取到的是double,这个值不是timestamp.需要进行一些转换,将它转换为Date或者Timestamp. Excel中的日期数据: 程序中读取到的数据: 如何转 ...

  2. 一文彻底搞懂MySQL分区

    一个执着于技术的公众号 一.InnoDB逻辑存储结构 首先要先介绍一下InnoDB逻辑存储结构和区的概念,它的所有数据都被逻辑地存放在表空间,表空间又由段,区,页组成. 段 段就是上图的segment ...

  3. 2021 CSP-J复赛 我的备战与游记

    目录 备战 2021.10.18 2021.10.19 2021.10.20 2021.10.21 2021.10.22 比赛当日 早上 线下见面 正文 比赛后 赛后总结与讲解 简单总结 Candy ...

  4. html单页面通过cdn引入element-ui组件样式不显示问题

    html单页面通过cdn引入element-ui组件样式不显示问题 必须先引入vue,再通过cdn引入element,否则element-ui组件与样式无效. <!DOCTYPE html> ...

  5. MAUI候选版本3发布啦

    我们很高兴发布.NET 多平台应用程序UI (.NET MAUI) 候选版本3,这个版本包含一系列新的改进.与以前的候选版本一样,RC3 包含在"上线"支持政策中,这意味着Micr ...

  6. 好客租房57-props深入(4props的默认值)

    1给props设置默认值 //导入react     import React from 'react'     import ReactDOM from 'react-dom'     import ...

  7. Mock 之搭建本地 MockJs

    Mock 之搭建本地 MockJs 一.目的 模拟后端接口 二.发请求 1. install npm install axios 2. 配置 src/utils/request.js import a ...

  8. 个人冲刺(二)——体温上报app(一阶段)

    任务:完成了WenData类的编写,同时完成了SecondActivity.java SecondActivity.java package com.example.helloworld; impor ...

  9. HCNP Routing&Switching之VRRP基础

    前文我们了解了链路高可用技术链路聚合相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16279078.html:今天我们来聊一聊另一种高可用技术,网关高 ...

  10. uniapp小程序webSocket封装使用

    目录 1,前言 2,代码实现 3,使用 3.1,初始化 3.2,发送消息 3.3,接收消息 1,前言 最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小 ...