【B/S】HTML~CSS初识(空格，#，> 和 . 的用法)

清疚 2022-03-25 01:38 152阅读 0赞

***小毛驴第一次接触web开发，就简单阐述一下自己在项目zho的中的理解：***

### HTML： ###

HyperTextMarkupLanguage超文本标记语言：可以说网页的主体其实就是html。

> 它是一种规范：网页文件其实就是文本文件，html通过添加标识符，对文字，图片如何处显示进行标记，所以叫文本标记语言。
> 
> 除此之外，html还可以设置超链接，有一种URL指针，点击可以链接到其他网站，所以才有了超文本标记语言

###   CSS： ###

Cascading Style Sheets层叠样式表：用来给html打辅助的

> 为了减少HTML的负担，就有了CSS
> 
> 它可以更精确控制文字字号等样式以及颜色，网页中的元素位置排版进行像素级别的设计。

### CSS~HTML ###

在html中进行的标记，为了方便CSS找到需要精确设计的地方

CSS通过使用“\#”、“.”、“空格”“”>“”’识别找到对应的位置，进行编辑，下面详细举几个例子：

**【id=" "】:**

是一种名称指派，这里指派给content 用“\#”连接，这个id有唯一性，不可再一个文件里重复使用

\[在HTML中\]：< div id="content"> < /div>

\[在CSS中\]： \#content\{ 这里是设计的样式 A\}

**【class=" "】:**

进行名称指派，对于都需要round样式的元素都可以定义一个class 用”.“连接

它与id不同，它可以重复使用，可以和多种标记进行组合；如和id组合：

\[在HTML中\]：< div id="content" class="round"> < /div>

\[在CSS中\]：.round \{ 这里是设计的样式B \} ——这里表示只要HTML中有round标识的都有 B样式

\[在CSS中\]：\#content .round\{这里是样式C\}——这里表示在HTML中标记content下的round标识才有C样式

**注意：这里\#content 和.round之间有一个空格，这个空格表示层次关系，不可忽略 ，****如果没有空格容易出现修改的格式不能显示的莫名其妙的错误**

如果以上两种格式设置两个同时存在，就要有**优先级**：id选择器\#>class选择器.>html标签选择器

**另外 >**

A>B 表示选择A元素的所有子B元素，与AB的区别在于

——A  B选择所有后代元素

——A>B只选择一代

例子：

【CSS中】

.nav>li\{  
                 float: left;  
             \}

【body中】标记红色的li左浮动，其他li不左浮动

<ul class="nav">        
        <li class="drop-down"><a href="\#">下拉菜单</a>  
         <ul class="drop-down-content">  
                <li><a href="\#">我是1</a></li>  
     
                <li><a href="\#">我是2</a></li>

<li><a href="\#">我是3</a></li>  
            </ul>          
        </li>          
    </ul>

**【ul 和 li 】标签选择器：**

\[在HTML中\]

<ul>  
                <li>首页</li>  
                <li>体育新闻</li>  
            </ul>

\[在CSS中\] ： ul,li \{/\*项目列表样式D\*/\} ——这里**“,”**表示两个ul和li是并列的关系，为所有有这个标识的添加上样式DD

**【a】标签选择器：**

\[在HTML中\]：  <a href ="https://baike.so.com/doc/9835190-10182106.html"><img src="images/tg029logo.gif" /></a>

\[在CSS中\]：a:link ,a:visited \{ /\*鼠标未点的连接样式E\*/\}——这里**“:”**表示在link和visited状态下a标记的样式，冒号表示状态

### HTML的不同含义的标签选择器 ###

头——<head></head>

内容——<body></body>

尾——<footer></footer>

**文本设计**

居中——<p align="center" > 或者<center>...</center>

换行——<br>

标题——<h2></h2>

空格——半角输入法状态下&nbsp 或 全角状态下的空格

序列号样式○—— <ol type="circle">

<li></li>

<li></li>

</ol>

表格——<table>表</table> ；<th>表头</th>；<td>单元格内</td>

***更多内容详解参考[RUNOOB.COM][]网站***

**命名锚记**

> 如同Home键，可以返回到顶部一样。
> 
> 命名锚记，就是通过在想要跳转到的地方做一个标记，点击当前的引用标记，跳转到指定的地方。

**例子：**

<a href ="\#com">点击我要评论跳到吧啦吧啦</a>

\`\`\`\`\`\`\`\`\`此处省略一万行

<a name="com">吧啦吧啦</a>

***小毛驴发现，当整理的时候，能了解更多，今天先整理到这里，之后会不断加深印象，欢迎交流！***

[RUNOOB.COM]: http://www.runoob.com/jquery/jquery-tutorial.html

发表评论取消回复

表情：

评论列表（有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

相关队列的初识和实现

文章目录队列的概念和结构实现链表实现代码循环队列循环队列的练习题参考答案【数组实现】队列的概念和结构 ![

深碍√TFBOYSˉ_/ 2024年04月03日 09:28/ 0 赞/ 14 阅读

相关 Reids的初识和基本操作

目录前言三大作用五大类型三种特殊数据类型 Redis基本操作

淡淡的烟草味﹌/ 2023年01月03日 06:39/ 0 赞/ 97 阅读

相关 vue初识基本用法

vue初识基本用法 vue概念目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 `MVVM`框架在概念上是真正将页面与数据逻辑分离的模式,由数

阳光穿透心脏的1/2处/ 2022年12月13日 00:44/ 0 赞/ 136 阅读

相关 Android Volley完全解析1：初识Volley的基本用法

> 原文链接：[http://blog.csdn.net/guolin\_blog/article/details/17482165][http_blog.csdn.net_g

爱被打了一巴掌/ 2022年09月29日 06:04/ 0 赞/ 186 阅读

相关 Android Volley完全解析(一)，初识Volley的基本用法

转载请注明出处：[http://blog.csdn.net/guolin\_blog/article/details/17482095][http_blog.csdn.net_

叁歲伎倆/ 2022年08月07日 03:40/ 0 赞/ 171 阅读

相关 Android属性动画完全解析(上)，初识属性动画的基本用法

转载请注明出处：[http://blog.csdn.net/guolin\_blog/article/details/43536355][http_b

谁践踏了优雅/ 2022年05月24日 07:58/ 0 赞/ 197 阅读

相关【B/S】HTML~CSS初识(空格，#，> 和 . 的用法)

小毛驴第一次接触web开发，就简单阐述一下自己在项目zho的中的理解： HTML： HyperTextMarkupLanguage超文本标记语言：可以说网页的主体其实就

清疚/ 2022年03月25日 01:38/ 0 赞/ 153 阅读

相关初识MVC和MVVM

1.MVC 参考文章：[https://www.cnblogs.com/wchxj/p/8012215.html][https_www.cnblogs.com_wchxj_p

绝地灬酷狼/ 2022年02月02日 09:27/ 0 赞/ 296 阅读

相关初识类和对象

python中一切皆为对象，类型的本质就是类。类的相关知识 def functionName(args): 　　'函文档字符串' ''' class类名　

灰太狼/ 2021年12月24日 10:19/ 0 赞/ 412 阅读

相关函数的初识

函数的初识写一个获取字符串总个数的代码，不能用len: s1 = 'fjkdsfjdssudafurpojurojregreuptotu

川长思鸟来/ 2021年12月12日 00:01/ 0 赞/ 225 阅读