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
h2~h7 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-常用标签小结

<h2~h7> 标题
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 在指定浏览器打开

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：python前端HTML和CSS入门-创新互联
URL地址：https://www.cdcxhl.com/article20/cssico.html

成都网站建设公司_创新互联，为您提供软件开发、App设计、服务器托管、全网营销推广、品牌网站制作、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容