web前端基础 html5+css3

彼岸~流觞

已于 2022-03-23 17:49:14 修改

阅读量316

点赞数

分类专栏： html5+css3 文章标签： html5 css3

于 2020-06-16 23:25:40 首次发布

本文链接：https://blog.csdn.net/weixin_41325924/article/details/106773515

版权

html5+css3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

知识就像一张网，越实越牢，网住的鱼越多。基础是走向成功的基石，在码代码的过程中，有些时候因为基础不牢吃了许多苦头。从今天开始（2020.6.15）先把基础恶补起来。加油ヾ(◍°∇°◍)ﾉﾞ！

1.DOCTYPE和lang以及字符集的作用

<!DOCTYPE html>：文档类型声明标签，html5版本

<html lang="Zh-CN">：设置语言

2.标题标签<h1>-<h6>（重要性递减）

标签语义：标签含义

head缩写，重要加粗

<h6>学</h6>
<h5>而</h5>
<h4>不</h4>
<h3>思</h3>
<h2>则</h2>
<h1>罔</h1>

3.段落标签p与换行标签</br>

1.段落标签p

（1）段落会根据浏览器大小自动换行

（2）默认段落和段落之间有间隙（默认有margin）

2.换行标签</br>

4.文本格式化标签：粗体，斜体，下划线，删除线（突出重要性，比不同文字更重要）

加粗：<strong></strong><b></b> strong比b语义更加强烈（字体加粗更强）

斜体：<em></em><i></i> em比i语义更加强烈

删除线：<del></del><s></s> del比s语义更加强烈

下划线：<ins></ins><u></u> ins比u语义更加强烈

<div><strong>别人</strong>笑我太疯癫，我笑<b>他人</b>看不穿</div>
<div><del>人生</del>得意<s>须尽欢</s>，<ins>莫使<ins>金樽<u>空对月</u></div>
<div><em>惶恐滩头说惶恐</em>，<i>零丁洋里叹零丁</i></div>

5.<div>和<span>标签

1.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子

2.<span>标签用来布局，一行上可以多个<span>。小盒子

<div>div独占一行</div>
<div>div独占一行</div>
<span>榴莲</span>
<span>牛油果</span>
<span>芒果</span>

6.图像标签<img/>

src：指定图像文件的路径和文件名

alt：替换文本。图像显示不出来的时候用文字替换

title：提示文本。鼠标放到图像上，显示的文字

width：图像宽度

height：图像高度

border：设置图像的边框粗细

 <h4>拉钩钩：</h4>
 <img src="11.jpg" alt="油菜地里拉钩钩" title="油菜地里拉钩钩" width="1000" border="10">
  <img src="11.jpg" alt="油菜地里拉钩钩" title="油菜地里拉钩钩" height="200"><!--高度改变，等比例缩放宽度-->

7.路径

1.相对路径

（1）同一级路径

（2）下一级路径 src="images/2.jpg"

（3）上一级路径 src="../images/2.jpg"

2.绝对路径：在电脑中的绝对位置（src="E:\4.html5+css3基础\images\2.jpg"）

在网络上的绝对地址： <img src="https://i0.hdslb.com/bfs/archive/e04016fbe65753c394116c269b27a024f228321d.jpg@880w_388h_1c_95q" alt="bilibili"/>

8.超链接标签<a></a>

href：url地址

target：打开方式 _blank新窗口打开 _self默认，在本窗口打开

1.外部链接

  <a href="https://www.bilibili.com" target="_blank">bilibili</a>

2.内部链接：网站内部页面的相互链接

  <a href="change.html" target="_blank">change</a>

3.空链接

  <a href="#">change2</a>

4.下载链接（压缩包）

  <a href="images.rar">RAR</a>

5.网页各种元素都可以添加超链接

  <a href="https://www.bilibili.com" target="_blank"><img src="https://i0.hdslb.com/bfs/archive/e04016fbe65753c394116c269b27a024f228321d.jpg@880w_388h_1c_95q" alt="bilibili"/></a>

6.锚点链接：快速定位到页面的某个位置

id = #href

<a href="#hover">干巴爹</a>
<div id="hover">干巴爹</div>

9.注释标签和特殊字符

<!--我是注释-->

特殊字符： （空格） <（小于号） >（大于号）

我&nbsp;是&nbsp;谁 
&lt;&nbsp;p&nbsp;&gt;

10.综合案例

彼岸~流觞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
web前端基础 html5+css3

知识就像一张网，越实越牢，网住的鱼越多，基础是走向成功的基石，在码代码的过程中，有些时候因为基础不牢吃了许多苦头。从今天开始（2020.6.15）先把基础恶补起来。加油ヾ(◍°∇°◍)ﾉﾞ！...
复制链接

扫一扫