python前端HTML和CSS入门

前端阶段课程介绍
1 ~ 4 : HTML及CSS5 ~ 6 : JavaScript 7 ~ 10 : jQuery

00-知识点预习
1、HTML基本结构
2、HTML的常用标签
3、HTML布局入门
4、CSS概述
5、CSS书写方式
6、CSS常用选择器
7、CSS常用属性

01-什么是HTML?
HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言,而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面

02-VSCode基本使用
Web前端常用开发工具

Visual Studio Code 微软出品 Microsoft
Sublime Text
WebStorm 和PyCharm出自同一个公司VSCode操作面板

创建文件的两种方式

创建文件,手动保存文件,不推荐
打开本地文件夹后,再去创建文件,会自动保存而且在创建时就可以修改文件名称及后缀

03-HTML文档基本结构

<!DOCTYPE html> 文档声明类型,声明帮助浏览器正确地显示网页
<html> html文档的根标签

        <head>  网页头部信息,用来做网页的基本配置
                <meta charset="utf-8"> 网页字符编码
                <title>html的基本结构</title> 网页在浏览器窗口中显示的标题
        </head>

<body>此标签中写网页中显示的内容</body>
</html>

04-HTML文档创建的快捷方式

!+tab键
html5+tab键

常用标签01
h1~h6 header 标签
img标签

src:图片路径
alt: 图片加载失败时显示,数据分析及搜索引擎收录图片
title:光标放在图片上提示
a 标签 界面跳转

href = "地址/网址 http://"

        target: 目标 "_self" "_blank"

        <a>更多</a> 标签中的文字会显示出来,链接不会显示,但此文字会有跳转功能
06-绝对和相对路径
绝对路径

Windows系统下的文件绝对路径:

C:\Program Files\feiq\RecvFace\xxx.pngMac系统下的文件绝对路径:
/Users/chao/Desktop/xxx.png

相对路径 推荐使用 ./ 当前目录路径 可以省略 ../ 当前文件的上一级路径 ../../最多用两个不要多写

07-常用标签02
p 段落标签
br 换行标签
字符实体

空格

< < 小于号

> 大于号
& &字符实体

div块标签
span标签

08-常用标签小结

<h1~h6> 标题
a标签 链接
img 图片标签 scr alt title
p 标签
br 换行
div 块标签
span 圈住一块文字
< <

>
空格
& &
今日头条界面内容展示
用div细分模块方便界面布局 样式设置及调整

10-什么是CSS?
CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率

11-行内式

<div sytle="background-color:red">
嵌入式

<head>

        <style>
        p{
        background-color:red;
        }
        </style>

</head>
外链式

<head>

<link rel="stylesheets" herf:"./css/main.css">

</head>

CSS书写方式小结
临时设置某一个标签的样式,或测试等可以选择行内式网站首页用嵌入式,优点加载快,网页显示快 工作中常用外链式,其他界面,实现HTML和CSS的分离和复用

15-CSS常用选择器01
标签选择器类选择器 层级选择器

16-CSS常用属性
文本属性

font-size 字体大小
color 文字颜色
font-family 字体 ‘Microsoft YaHei‘
line-height 行高 可以让文字在指定高度垂直居中效果

width 宽度
height 高度
border 边框

solid 实线

background-color 背景色
margin 顺序上右下左 外边距
padding 上右下左 内边距

17-今日头条界面样式处理18-常用插件
HTML Snippets 代码提示插件Path Autocomplete 路径提示插件

插件提示路径时后缀也自动带上"path-autocomplete.extensionOnImport": true,open in browser 用快捷键的方式打浏览器打到.html文件 ctrl+B 在电脑默认浏览器打开 Set default browser 设置默认打开浏览器 "open-in-browser.default": "chrome",ctrl + shift + B 在指定浏览器打开

原文地址:http://blog.51cto.com/13517854/2326520

时间: 2024-10-14 13:08:30

python前端HTML和CSS入门的相关文章

前端教程(9)css入门教程-css属性设置

一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold inherit 继承父元素字体的粗细值 2.font-style:文字风格 normal 正常,默认就是正常的 italic 倾斜 3.font-size:文字大小 fs:一般是12px或13px或14px 注意: 1.通过font-size设置文字大小一定要带单位

前端教程(10)css入门教程-css网页布局

一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad++等等 而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 #2.网页布局/排版的三种方式 2.1.标准流 2.2.浮动流 2.3.定位流 二 标准流 标准流的排版方式,又称为:文档流/普通流,所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列. # 1 浏览器默认的排版方式就是标准流排版方式 # 2 在CSS中将

python前端HTML和CSS进阶

知识点预习1.列表2.选择器3.CSS的文本样式属性4.元素溢出5.盒子模型6.margin负值技巧7.垂直外边距合并8.margin-top塌陷问题 01- 列表无序列表 ul>li unorder list清除列表前面的标识 list-sytle:none;列表默认有外边框和内边距 02- CSS选择器02 /* 1.ID选择器 id是唯一的; 配合js来操作*/ #three{ color:blue; } /* 2. strong标签 重要的内容 默认加粗*/ /* 并集选择器 组选择器

python前端HTML和CSS高级

知识点预习1.表格基本使用2.选择器权重计算3.背景图片属性4.精灵图5.天天生鲜案例 01-表格(table)基本使用 table: tr row 行数 td description 内容 th head ;居中 加粗 /* 3.合并边框 */ border-collapse: collapse; 跨列合并: colspan 找到第几行的哪个内容, colspan="几列";多余的删除 跨行合并: rowspan 找到第几行的那个内容, rowspan = "几行"

前端开发HTML&amp;css入门——HTML

HTML究竟为何物?其实HTML就是一种标记语言,英文全称为Hypertext Markup Language,翻译过来就叫超文本标记语言.它的作用就是负责负责网页的三个要素之中的结构. HTML使用标签的的形式来标识网页中的不同组成部分. 所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面.点一下试试. 那么既然是文本标记语言,我们自然能用txt来编辑HTML语言.打开windows自带的记事本工具,键入以下内容: 这是我第一个网页 因为我们编写的是HTML网页,所以一定要

前端开发HTML&amp;css入门——CSS的文本格式化

长度单位 像素 px 百分比 % em - 像素是我们在网页中使用的最多的一个单位, * 一个像素就相当于我们屏幕中的一个小点, * 我们的屏幕实际上就是由这些像素点构成的 * 但是这些像素点,是不能直接看见. * - 不同显示器一个像素的大小也不相同, * 显示效果越好越清晰,像素就越小,反之像素越大. - 也可以将单位设置为一个百分比的形式, * 这样浏览器将会根据其父元素的样式来计算该值 * - 使用百分比的好处是,当父元素的属性值发生变化时, * 子元素也会按照比例发生改变 * - 在我

前端开发HTML&amp;css入门——盒子模型以及部分CSS样式

CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局. 盒子模型 一个盒子我们会分成几个部分:– 内容区(content)– 内边距(padding)– 边框(border)– 外边距(margin) 盒子和边框   width和height background-color 盒子 设置的盒子内容区的大小 设置背景颜色  

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

CSS在很多程序员看来那只不过是雕虫小技, 实际上CSS3发展到今天已经强大到超乎你的想象, 当然对于低端浏览器使用者来说,还是以前那样——囧 有时候搞CSS开发确实需要很多想象力,下面一组纯CSS3特效足以描述这一点 以下内容转载自[http://design.yesky.com/show/466/11497966_3.shtml] 设计欣赏:纯CSS3「绘制」的图形图标 IE 标志 作者: Andreas Jacob 在 Firefox 3.6+ 以及Safari 5 上显示最佳.使用了圆角

web前端开发分享-css,js工具篇

来源:http://www.cnblogs.com/jikey/p/3607133.html web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是: sublime text 是所有编辑器里边支持emmet比较好的的唯一一款. webstorm是所有编辑器里边唯一内置emmet的一款,并且将emmet的精神往前推动的一款. php