Web入门----------Heml

标题标签

<!--h1在页面中只能出现一次  h1-h6数字越大的时候 文字越小  权重值越低-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题7</h6>

font标签

1.定义文字

Size：文字大小 （1-7）                      color：文字颜色
<font size="5" color="#ff33cc">@由@</font>

p标签

1.定义段落标签

2.p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定

<p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定</p>

b / strong

1.b标签定义加粗标签
2.Strong不仅加粗而且还有强调的效果

<b>b标签定义加粗标签</b>
<strong>Strong不仅加粗而且还有强调的效果</strong>

span / pre

1. span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
2.pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

1.<!--头-->
<style type="text/css">*{margin:0;padding:0;}p{border:1px solid red;}span{color:#ff9966;font-size:200px;}</style>
<!--头-->
<!--身--><span>晚上好！</span>
<!--身-->
2.<!--树着显示--><pre>好帅啊！</pre>
<!--横着显示-->
<pre>&1t好帅啊！&gt
</pre>

换行

<br />

del

del.定义文档中已被删除的文本。

<del>定义文档中已被删除的文本</del>

em

i. 标签显示斜体文本效果。
定义文本中强调的内容。

<i>累了吧  来瓶红牛</i>
<em>来瓶脉动  脉动回来</em>

上标sup

下标sub

a<sup>2</sup> + b<sup>2</sup> = ?
H<sub>2</sub> + O<sub>2</sub> = H<sub>2</sub>o

超链接

Target=“_blank / self”<a href=“mailto:邮箱地址”></a>
<!--给要跳转设置name   要点击的地方href='#name'-->
1.<a href="http://www.baidu.com">百度一下，你就知道</a>
2.<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a> # 跳转
3.<a href="mailto:123456@qq.com">点击给我发送邮件</a>
4.<a href='#del'>点击跳转到del标签</a>
<a href="#" name="del"></a>
5.<a href='#a2'>点击跳转到上标</a>
<a href="#sup" name="sup"></a>

常用图片格式：

1.gif动态图片
2.jpg是一种比较常见的图片格式
3.png透明图片

绝对路径（完整的描述文件位置的路径）

1.从盘符出发的路径：D:\wanglimei\web\images\2.jpg
2.从域名出发：https://img.alicdn.com/tps/i4/TB1U8CRhKEJL1JjSZFGwu16OXXa.png

<img src="./images/1.png"/>
<img src="https://img.alicdn.com/tps/i4/TB1U8CRhKEJL1JjSZFGwu16OXXa.png"/>

相对路径（自己相对与目标位置从当前目录出发，源文件和引用文件在同一目录里，直接引用文件名）

路径符号
./ 当前目录
…/ 返回上一层目录

…/…/ 返回上一层的上一层的目录

相对路径六种情况

1.html文档和图片在同一目录，直接引用即可
2.图片在文件夹1里面，html和文件夹1同一目录
3.文件夹1里面文件夹2，图片在文件夹2里面，html和文件夹1同一目录
4.图片和文件夹1同一目录，html在文件夹1里面
5.图片和文件夹1同一目录，文件夹1里面文件夹2，html在文件夹2里面
6.图片在文件夹2里，html在文件1里面，文件夹1和文件夹2同一目录

图片标签的四要素

alt title width height

alt="图片的描述"    title="提示"    width="宽度"    height="高度"
<a href="http://www.baidu.com.com" target="_blank"><img src="1.jpg" alt="描述" title="点击查看更多" width="323" height="450"/></a>

图片标签的总结

1.图片的常见格式
1.jpg
2.png
3.gif
2.如何在页面中插入一张图片
Src=“统一资源管理 / 路径”
3.图片标签的四要素
Width height alt title
4.路径知识
1.绝对路径
2.相对路径的六种情况

三种列表标签

1.无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）
进行标记。
无序列表开始于<ul>标签，每个列表项开始于<li>type：disc         实心圆circle       空心圆square       方块符号

2.有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表开始于<ol>标签，
每个列表项开始于<li>type：A    大写字母序列号a    小写字母序列号I     I II III 序列号

3.自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。
每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。

三种列表标签

1.无序列表
2.有序列表
3.定义列表

1.无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）
进行标记。
无序列表开始于<ul>标签，每个列表项开始于<li>type：disc         实心圆circle       空心圆square     方块符号
<----><ul type="square"><li>晚上好</li><li>IYUM<ul type="circle"><li>蹦迪</li><li>AI<ul type="disc"><li>无限嵌套</li></ul></li></ul></li><li>wo</li></ul>
2.有序列表也是一列项目，列表项目使用数字进行标记。
有序列表开始于<ol>标签，
每个列表项开始于<li>type：A    大写字母序列号a    小写字母序列号I     I II III 序列号
<----><p>选择题：你帅吗？（多选题）</p><ol type='I'><li>你太帅了</li><li>你真帅呀！<ol type='a'><li>嗯 我知道</li></ol></li><li>你真的好帅呀</li></ol>
3.自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。
每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。
<----><dt>每个自定义列表项以</dt><dd>每个自定义列表项的定义以</dd><d1><dt><img src='1.gif' /></dt><dd>新的风暴已经出现</dd></d1>

初识盒子模型

容器
盒子
有宽度有高度的长方形

css层叠样式表

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。属性    值      属性     值
内部样式：div {color:red; font-size:14px;}选择器   声明            声明
行内样式：<div style=“width:;height:;”>div{width:500px; height:500px; background:red;}

内部css样式：1.选择器和一条或者多条声明组成2.用大括号包裹声明3.每条声明由属性和值 属性是固定的 值是可变的 并且属性可以有多个值！每条声明用分号隔开4.属性和值用冒号隔开div{/*宽度*/width:500px;/*高度*/height:500px;/*背景*/background:red;/*边框*/border:5px solid blue;border:10px dotted #000;

简单的css样式

Width宽度  height高度    background背景

边框线

border:1px solid red;
边框的三要素：大小  风格 颜色

单独的定义某条边框线
单独规定某个边框线的样式 top:上 left：左 right：右 bottom：下

border-top:1px solid red;            /*上边框*/border-top:20px solid #ff33ff;
border-right:1px solid red;         /*右边框*/border-right:;
border-bottom:1px solid red;        /*下边框*/border-bottom:;
border-left:1px solid red;          /*左边框*/border-left:20px solid #33cc99;

边框线三要素具体讲解

border-width:1px;边框大小 / 粗细
border-width:30px;
border-top-width:10px;
border-left-width:50px;

边框线三要素具体讲解

border-color:blue;
边框颜色：    英文单词：red blue十六进制：#666rgb / rgba 颜色/透明颜色
border-color:#cc0000;
border-top-color:#6666ff;
border-bottom-color:#437c9e;

边框线三要素具体讲解

border-style:solid;
边框风格：    无边框             none实线              solid虚线             dashed点状线               dotted双线                double3d 凹槽         groove3d 垄状         ridge3d inset边框     inset3d outset边框        outset
border-style:none;
border-top-style:dashed;
border-left-style:double;
border-right-style:groove;
border-bottom-style:outset;
border:30px inset red;

外边距

1.CSS margin 围绕在元素边框的空白区域是外边距。
设置外边距会在元素外创建额外的“空白
2.边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素
3.margin 属性接受任何长度单位、百分数值甚至负值。

margin-top           /*距离顶部的距离*/
margin-right        /*距离右边的距离*/
margin-bottom       /*距离下边的距离*/
margin-left         /*距离左边的距离*/

margin复合样式：margin:50px;               /*上下左右*/margin:50px 50px;           /*上下  左右*/margin:50px 50px 50px;        /*上  左右  下*/margin:50px 50px 50px 50px; /*上右下左*/auto=居中    margin:50px auto 0;

内边距

1.CSS padding 属性定义元素的内边距（边框和内容区之间）;
2.padding 属性接受长度值或百分比值，但不允许使用负值。
不能使用auto

padding-top:20px / 10%;          /*顶部内边距*/
padding-right:20px / 10%;       /*右边内边距*/
padding-bottom:20px / 10%;      /*下面内边距*/
padding-left:20px / 10%;        /*左边内边距*/

3.元素框的最内部分是实际的内容，直接包围内容的是内边距。
4.内边距呈现了元素的背景。
5.内边距的边缘是边框。
6.在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

Css框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XFgHTAig-1578558794510)(C:\Users\Administrator\Desktop\web\图片\1.png)]

盒子模型占位宽高计算

1.盒子模型占位宽：
自身宽（width）+左右内边距(padding)+左右边框(border)+左右外边距(margin)
2.盒子模型占位高：
自身高(height)+上下内边距(padding)+上下边框 (border)+上下外边距(margin)

总结

1.三种列表：无序列表有序列表定义列表
2.盒子模型盒子
3.Css样式写法简单的css样式
4.border三要素：大小 颜色 风格及分解写法
5.margin：具体值px 百分比 负值 分解写法 复合写法
6.Padding撑大盒子，不支持负值！

Web入门----------Heml相关推荐

8、web入门回顾/ Http
1 web入门回顾 web入门 1)web服务软件作用: 把本地资源共享给外部访问 2)tomcat服务器基本操作 : 启动: %tomcat%/bin/startup.bat 关闭: % ...
WEB入门实践-张晨光-专题视频课程
WEB入门实践-256人已学习课程介绍 WEB开发入门编程,从各种开发工具的讲解到html标签,css元素讲解,js课程系列. 课程收益培养web开发技术人才讲师介绍 ...
Golang Web入门（4）：如何设计API
Golang Web入门(4):如何设计API 摘要在之前的几篇文章中,我们从如何实现最简单的HTTP服务器,到如何对路由进行改进,到如何增加中间件.总的来讲,我们已经把Web服务器相关的内容大概梳 ...
Golang Web入门（3）：如何优雅的设计中间件
Golang Web入门(3):如何优雅的设计中间件摘要我们上篇文章已经可以实现一个性能较高,且支持RESTful风格的路由了.但是,在Web应用的开发中,我们还需要一些可以被扩展的功能. 因此, ...
Golang Web入门（2）：如何实现一个RESTful风格的路由
Golang Web入门(2):如何实现一个RESTful风格的路由摘要在上一篇文章中,我们聊了聊在Golang中怎么实现一个Http服务器.但是在最后我们可以发现,固然DefaultServeM ...
java判断读到末尾_Java Web入门之java--第一节 java 简介及开发环境安装
本篇博客是Java web入门的第一篇博客,这篇博客主要讲述java语言的一些简介. 一)先从Java语言的诞生说起. 1991年,Sun公司在一个叫做James Gosling的人的带领下,成立了一 ...
CTFshow——web入门——sql注入
web入门--sql注入基础知识点判断是否注入 order by 判断列数使用union select 判断回显查询数据库 web171 web172 web173 web174 web175 ...
ctfshow web入门-sql注入
ctfshow web入门-sql注入 web171 web172 web173 web174 web175 web176 web177 web178 web179 web180 web181 web ...
[ctfshow]web入门——文件上传（web156-web163）
[ctfshow]web入门--文件上传(web156-web163) [ctfshow]web入门--文件上传 [ctfshow]web入门--文件上传(web156-web163) web156 ...

Web入门----------Heml

标题标签

font标签

p标签

b / strong

span / pre

换行

del

em

上标sup

下标sub

超链接

常用图片格式：

绝对路径（完整的描述文件位置的路径）

相对路径（自己相对与目标位置从当前目录出发，源文件和引用文件在同一目录里，直接引用文件名）

相对路径六种情况

图片标签的四要素

图片标签的总结

三种列表标签

1.无序列表

2.有序列表

3.自定义列表

三种列表标签

初识盒子模型

简单的css样式

外边距

内边距

Css框模型

盒子模型占位宽高计算

总结

Web入门----------Heml相关推荐

最新文章

热门文章