网站首页 > 知识剖析正文

前端入门二(html)

nixiaole 2024-11-25 15:48:46 知识剖析 22 ℃

（*这篇文章主要让大家认识网页的构成，知道什么是html，便于同学们入门，有个了解）

1、整个网页的结构就是通过html作为基础搭建起来的，js与css只是html的装饰，但是也是必不可少的（html主要由html>head>body>组成）当然在body里面可能会用到很多html标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=yes"/>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="./styles/reset.css">
    <script src="./styles/hotcss.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1103079_svcustilvsq.css">
    <title>七天洗车</title>
    <script>
    </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- <script src="https://unpkg.com/mint-ui/lib/index.js"></script> -->
  </body>
</html>

2、html标签

1. 块状元素(block)

(1) 块状元素在网页中就是以块的形式显示. 块状元素默认没有自己高度和宽度,默认情况下它的宽度是继承其父元素的宽度,高度是内容撑起来的高度,没有内容的时候高度为0.

常用的块状元素:div, dl, dt, dd, ul, ol, fiedset, (h1-h6), p, form, hr, collgroup, col, table, tr,td等;

(2) 块状元素的特点:

默认的情况下,块状元素都会独占一行,块状元素会按顺序自上而下排列;
块状元素都可以直接设置宽度和高度;
块状元素都遵循盒模型的所有规则,一般作为其他元素的容器(p标签除外);

2.内联元素(inline 或称行内元素)

(1) 常见的行内元素:span, a, i, em, strong, b等;

(2) 类联元素的特点:

内联元素后面如果是内联元素,则会在一行内逐个显示;
内联元素现实的宽度,高度,不能直接定义,它最小的内容单元也会呈现矩形形状;
内联元素遵循盒模型的规则,但是会有部分无法显示;

(当然我们也可以通过改变内联元素的display属性,来实现对其宽度和高度的设置,这个知识点我会放在下一篇和大家分享)

3.块级内联元素（inline-block）

（1）不管什么元素可以根据属性（css属性）display: inline-block变成块级内联元素；原始元素主要有img标签

（2）块级元素的特点：

集合内联和块级元素特点，在一行显示

*所有元素都可以通过display属性来改变

*行内元素不能随意包裹块级元素，会出现不显示等问题

*所有标签链接可参考：https://www.w3school.com.cn/html/index.asp（标签主要使用常用的几个div、p、a，span等标签，入门者可以多练习一下就能记住）

网站首页 > 知识剖析 正文

前端入门二(html)

猜你喜欢

网站首页 > 知识剖析正文