HTML和CSS（一）

最新推荐文章于 2024-09-30 22:02:02 发布

超级闪电侠fff

最新推荐文章于 2024-09-30 22:02:02 发布

阅读量157

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/S788977SS/article/details/128463503

版权

HTML和CSS（一）

HTML5大前端之旅

什么是前端
用户看得见的，第一时间交互的，像页面，视频等，
前段发展历程
是由美工—网页制作—web前端开发—全栈开发—大前端的一个发展历程
大前端可以做什么
网站管理系统，APP，小程序，数据可视化，智能电视，桌面应用，网页游戏，工具和后端

网页为什么叫HTML

网页的形成

通过前端开发人员写的，由浏览器转成页面
网页是浏览器中的一“页”
文件扩展名.html

什么是html
HTML是用来描述网页的一种语言
HTML指的是一种超文本标记语言
HTML不是编程语言而是一种标记语言（一套标记标签)，

浏览器

在can i use网站可查各浏览器对标签的支持性。在使用浏览器时尽量使用高版本的

Web标准的制定

因兼容性问题，W3C万网联盟制订了一套标准。遵循这个标准在网页开发时写一套代码在不同浏览器中显示到效果一样。而ie6当时未遵循这套标准
web(网页)的组成部分
HTML结构
W3C制订了结构HTML的语法标准
CSS表现
W3C制订了表现CSS的语法标准
JS行为
W3C,ECMA制订了行为标准（W3C DOM,ECMAScript)

制作一个页面

基本结构

<html>
<head>
<title></title>
</head>
<body></body>
</html>

HTM基本语法

常规标签也叫双标记
<标记></标记>。如:<head></head>
<标记属性=“属性值” 属性=“属性值”></标记>
标记也叫标签或叫元素
空标签也叫单标记
<标记/>
<标记属性="属性值”/>
如：<br/>

vscode

安装以及三个插件

Auto Rename Tag
方便该写错的双标签
view-in-browser
方便点运行后直接在浏览器运行
Live-Server
方便修改代码后点击运行直接刷新到修改后的样式，不用手动点刷新

文档声明与字符编排

<!DOCTYPE html>

这个标签可以告诉浏览器用哪一种html的标准来加载页面

<html lang="en">

告诉浏览器HTML这段代码里面的语言类型。en英文，zh-CN中文，ja-jp日语等等

<meta charset="UTF-8">

告诉浏览器网页是按照什么来编码的。让浏览器根据其解码，UTF-8-Unicode万国码字符编码

HTML常用标签

常用标签

标题
从 <h1></h1>到 <h6></h6>标题字的大小逐渐减小，其中<h1></h1>只能有一个
段落
标签：<p></p>不同段落间和不同标题间都会自动留间距
换行
标签：<br/>（强行换行）
水平线
标签：<hr/>
文字加粗（推荐strong）

<b></b>

只对文字进行加粗

<strong></strong>

除了对文字进行加粗外还有强调意义
6. 文字倾斜（推荐em）
<em></em>和<i></i>前者不但让文字倾斜还有强调意义，后者只有倾斜
7. 删除线（推荐del)
<s></s>和<del></del>
8. 扩展
<u></u>下划线
<sub></sub>下标
<sup></sup>上标

hr标签

给它加上颜色和宽度和位置

<hr color="red" width="200" align="left">
    <hr color="blue" >

在这里插入图片描述
默认hr标签有阴影，用noshade标签取消阴影

<hr noshade="noshade">

特殊符号

尖角号<左尖角，>右尖角

<p>四逆散加减&lt;课程&gt;</p>

在这里插入图片描述
2. 空格
  该空格占据宽度受字体影响明显且强烈
&emsp;占据的宽度恰好是一个中文宽度，且基本不受字体影响
3. 版权
&copy； ©
4. 商标
™™
®®

div和span标签

div标签无实意，用来划分页面区域，独占一行，让结构更清晰
span标签对文本进行独立修饰，不会破坏文本间距

<p>输出<span style="color:red">时代</span></p>

在这里插入图片描述

列表

有序列表
快捷方式：ol>li*数字+回车

 <ol>
        <li>定义</li>
        <li>第二</li>
    </ol>

在这里插入图片描述
ol标签只能嵌套li标签，li标签里可以放其他标签
前面的数字可改变
type有I,i,1,a,A这几种
star表示从哪个开始，只能写成数字如1，2等

 <ol type="A" start="2">
        <li>定义</li>
        <li>第二</li>

在这里插入图片描述
无序列表
快捷方式：ul>li*数字+回车
ul标签只能嵌套li标签，li标签里可以放其他标签
默认是实心圆，但可以改变type：默认，circle空心圆，square实心正方形，none什么也没有

<ul>
        <li>
            第一
        </li>
        <li>
            第二
        </li>

    </ul>

在这里插入图片描述

自定义列表
快捷创建方式：dl>dt>dd+加回车

<dl>
    <dt>图片</dt>
    <dd>文字</dd>
    </dl>

在这里插入图片描述

图片标签的路径

相对路径：
同一级./路径

<img src="./新建文件夹/good.jpg.jpg">

上一级../路径

<img src="../">

绝对路径
即路径的完整地址

图片标签的属性

title鼠标移上去后的提示信息（不管图片加不加载的出来都可以现实）
alt图片加载不出来后的提示信息（加载出来则不会显示）
width，height改变图片的大小

<img src="./新建文件夹/good.jpg.jpg" title="图片"alt="失败" width="47" hight="46">

在这里插入图片描述

超链接标签

<a herf="路径" title="鼠标一上去显示的提示信息" target="规定在何处打开文档"></a>

target属性：
target=“_self"默认值，本窗口
target=”_blank"新窗口打开

  <a href="https://www.baidu.com" target="_blank">百度</a>

在这里插入图片描述
可以跳转到自己的网页中

 <a href="./组合.html">中间</a>

在这里插入图片描述

可以点击图片跳转

<a href="https://www.baidu.com" title="百度" target="_blank">
        <img src="./新建文件夹/good.jpg.jpg"alt="失败" width="47" hight="46"> 
    </a>

在这里插入图片描述

table标签

快捷方式：table>tr需要的行数>td需要的单元格数+回车
创建表格table标签
tr表示行
td表示单元格
表格属性：
width 宽度 px ，百分比（相对于父元素）
hight 高度 px,百分比（相对于父元素）
border 边框
bordercolor 边框颜色
bgcolor 背景颜色
align=“left”/“right”/center 对齐方式
cellspacing=“单元格与单元格之间的间距”
cellpadding=“单元格与内容之间的空隙”

行tr属性：
高度height
背景颜色 bgcolor
文字水平对齐方式 align=“left/right/center”
文字垂直对齐方式 valign=“top/middle/bottom”
单元格td的属性
bgcolor 背景颜色
width 宽度
hight 高度
文字水平对齐方式 align=“left/right/center”
文字垂直对齐方式 valign=“top/middle/bottom”
改变一个单元格的宽度会改变整列单元格，改变一个单元格的高度会改变整行的高度
表格合并
colspan="要合并的列数"加给td
rowspan="要合并的行数"加给td

表单标签

文本框 type=“text”
密码框 password
提交 submit 和<buttom>提交</buttom>一样
属性：
placeholder添加一段文字描述，兼容到IE8以上，添加在文本框和密码框后
name 必须设置否则提交时，用户在其中输入的数据不会被发送给服务器
value 给提交按钮添加文字
action 提交的地址
method 等于post/get
二者区别：
get是从服务器获取数据，而post是发送数据
get传送的数据量较小，post传送的数据量较大

<form action="http://www.baidu.com" method="POST" >
        用户信息：<input type="text" placeholder="输入姓名" name="tast">
        <br>
        密码：<input type="password"placeholder="输入密码" name="mima">
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
    </form>

在这里插入图片描述

css样式

目前遵循的是W3C发布的CSS3.0
还有css2.0
css语法：

每个css由选择符和声明两部分组成，声明又分为属性和属性值
属性放在花括号里，属性和属性值用冒号连接，每条声明用分号结束。
当一个属性有多个属性值时，属性值和属性值间不分先后顺序用空格隔开
书写样式过程中空格和换行等操作不影响属性显示
内部样式：
在head部分写一个style标签，在标签中写
外部样式：
先新创建一个css文件，再在需要处用link标签来引入
方式：<link rel="stylesheet" type="text/css" href="css文件路径"/>
也可以用@import来引入
方法：@import url(“css文件路径”)
二者区别：
link标签属于XHTML标签，而@import完全由css提供的一种方式
在加载一个页面时link标签引入的css样式会同时加载，而@import引入的样式会等到页面全部被下载完在加载
兼容性问题，老的浏览器不支持@import，