前端 html 与css

前端

广义 用户能看见能交互的界面,

狭义 客户端浏览器界面

html5

html+css+js

应用 客户端,浏览器网页

html语言

HTML: 超文本标记语言

```python
# 学习html的目的: 完成页面结构的搭建 (什么时候用什么标签)

# html属于标记语言: 标记语言为非编程语言,不具备编程语言具备的程序逻辑

<html>
<head>
<!-- 字符编码 -->
<meta charset="utf-8">
<!-- 页面标签的标题 -->
<title>页面</title>
<!-- 内部或外部的css样式 | js脚本 | 页面其他设置 -->
</head>
<body>
<!-- 所有页面显示的内容: 文本 | 图片 | 视频 | 超链接 | 表格 | 表单 ... -->
<!-- js脚本 -->
</body>
</html>

标签 <>

指令 <! 开头  <! doctype html>

专业字符 <&#62> <&#60><&nbsp>

标签:

<div>三无 无语义 无功能 无样式

<a> 返回锚点最好应用<a href='#top'>顶点返回       如果在某处<a name='top' id='top'>返回定点

<.p> 段落

ul<li>列表

<a href='链接' target=‘_blank 或者 _self’> 超链接 blank另外打开 self 自己跳转

<img src='链接‘   alt='加载失败后提示' width=200px height=200px 宽和高最好不要一起定义>图片

7.常用的文本类标签: span i b

h1 h2 h3

<!--<span>文本</span>-->
<!--<i>斜体</i>-->
<!--<em>斜体强调</em>-->
<!--<b>加粗</b>-->
<!--<strong>加粗强调</strong>-->
<!--<sup>上角表</sup>-->
<!--<sub>下角标</sub>-->

css完成页面布局

 将原来出现在标签内部的样式分离开来, 可以用一个个选择器加以管理, 达到页面与样式的解耦合目的, 从而提高代码的复用性与开发效率

选择器用来将css与html建立关联的桥梁, 称之为css选择器    作用域   样式块满足css连接语法的众多样式

选择器有内联 行间式 外联

行间式

在<>中进行  属性与属性值用等号 属性之间;

写在style标签中(style标签一般出现在head标签中)
ii)用选择器与html建立连接
iii)样式块书写在作用域内
'''

# 3.外联式
'''
i)css样式完全与html文件脱离, 形成单独的.css文件, 样式书写在.css文件中
ii)用选择器与html建立连接
iii)样式块书写在作用域内
iv)要将.css文件与.html文件建立关联 => <link rel="stylesheet" href="css文件的相对路径">
'''

开发: 最常用的是外联式, 内联与行间辅助样式布局
测试: 内联式, 可读性最强, 且解耦有复用性
行间的应用场景: 最简单粗暴, js操作的样式都是行间式

猜你喜欢

转载自www.cnblogs.com/wrqysrt/p/10273957.html