从0开始学react netive：1.HTML块级元素_行内元素_CSS盒子模式_标签选择器

最新推荐文章于 2024-05-22 11:00:01 发布

hxkqq457624390ok

最新推荐文章于 2024-05-22 11:00:01 发布

阅读量2.4k

点赞数

分类专栏： react-native入门与实战文章标签： css html 标签前端 react-native

本文链接：https://blog.csdn.net/hxkqq457624390ok/article/details/68485978

版权

react-native入门与实战专栏收录该内容

2 篇文章 0 订阅

订阅专栏

React Native优点
1.跨平台
2.高效
3.热更新
因为React Native用到前端的知识，可以去这个网站学习前端知识：http://www.w3school.com.cn

网页前端编程基础

1：概述

工具：webstorm
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

2：典型块级元素与行内元素

块元素(block element)
div
h（x） - 标题
p - 段落
table - 表格
ul - 非排序列表

内联元素(inline element)
span - 常用内联容器，定义文本内区块
a - 锚点
i - 斜体
img - 图片
input - 输入框

行内、块状元素区别：
(1).块级元素会独占一行，其宽度自动填满其父元素宽度，行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到道一行排不下，才会换行，其宽度随元素的内容而变化
(2). 一般情况下，块级元素可以设置 width, height属性，行内元素设置width, height无效(注意：块级元素即使设置了宽度，仍然是独占一行的)
(3).块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
行内元素和块状元素的说明
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
标签分类
1.块级标签<div>
display:block
独占一行
可以指定宽高
2.行内标签<span>
display:inline
宽高随内容改变
可以在一行
改变display属性，就可以互换
display:inline-block特性：可以在一行（行内），又可以指定宽高
代码如下：

<html>
<head>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        div{
            border: 1px solid red;
            width: 100px;
            display: inline;
        }
        span{
            border: 1px solid green;
            display:inline-block;
            width: 100px;
            height: 200px;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
</head>

<body>

<div>
    abc
</div>
<h1>人民日报</h1>

<span>efg</span><span>hij</span>

</body>
</html>

3，CSS

CSS（层叠样式表）
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
h1 {color:red; font-size:14px;}

CSS盒子模型
CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border）和外边距（margin）的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。下面是Box Model的图示：
这里写图片描述
说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding- bottom、padding-left）、边框（border-top、border-right、border-bottom、border- left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。
下图是W3School的Box Model 图解：
这里写图片描述
示例代码如下：

<html>
<head>
    <style type="text/css">
        /* “*” 代表通配符，代表适用于所有标签*/
        *{
            padding: 0px;
            margin: 0px;
        }

        /*ID选择器*/
        #myDiv{
            /*实际的宽度，width+左右边距+左右边框*/
            width: 200px;
            height: 300px;
            border: 1px solid red;
            /*
            padding填充，内边距
            */
            /*
            1.上下左右的的值
            2.上下，左右
            3.上，左右，下
            4.上，右，下，左（顺时针方向）
            */
            padding: 0px 10px 0px;
            margin: 10px 20px 10px;
        }

        #myDiv2{
            width: 200px;
            height: 300px;
            border: 1px solid green;
        }

        /*类选择器*/
        .title{
            color: blue;
            font-size: 14px;
        }

        /*混合使用*/
        span.title{
            font-size: 25px;
        }

        div > p{ /*代表div下的p标签*/
            font-size: 20px;
            color: yellow;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
</head>
<body>
    <div id="myDiv">
        <p>abc</p>
    </div>

    <div id="myDiv2"></div>

    <span class="title">Javascript</span>

    <i class="title">ActionScript</i>


</body>
</html>

上面代码涉及选择器的知识，意思是确定该样式用在那个标签上和安卓的设置控件id差不多；
1.通配符
2.标签选择器，页面所有标签都会应用指定样式
3.类选择器，一个页面可以有多个标签有相同的class
4.ID选择器，一个页面可以不能有多个标签有相同的id

学习的网站：
预习资料：
http://www.runoob.com/js/js-tutorial.html
http://es6.ruanyifeng.com/
http://www.runoob.com/react/react-tutorial.html
https://github.com/enaqx/awesome-react

hxkqq457624390ok

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从0开始学react netive：1.HTML块级元素_行内元素_CSS盒子模式_标签选择器

React Native优点 1.跨平台 2.高效 3.热更新因为React Native用到前端的知识，可以去这个网站学习前端知识：http://www.w3school.com.cn网页前端编程基础1：概述工具：webstorm HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语
复制链接

扫一扫