初入HTML和CSS
初入HTML和CSS
- 1.1 HTML、CSS
- 1.2 如何去写代码?写到哪里去
- 1.3 宇宙第一编辑器 VS Code
- VS Code的基本使用
- 1.4 浏览器
- 1.5 深入了解网站开发
- 1.6HTML
- 1.7 HTML的注释
- 1.9 HTML标题与段落
- 2.0HTML文本修饰标签
- 2.5特殊符号
- 2.6列表标签
一、第一部分
#拨云见日:
**
1.1 HTML、CSS
是做网站的编程语言**代码被浏览器解析后的样子就是我们所看见的网站的样子。
1.2 如何去写代码?写到哪里去
如何去写代码?写到哪里去。一个网站是由很多个网页组成的,每一个网页都是一个.html文件 ,很多个.html文件组成的整体就是网站。我们可以在任意一个文件夹里创建一个文本文档,将新建的文本文档的后缀.txt改为.html后就成功创建了一个.html文件,创建好后我们可以在里面写我们想写的代码或者文字,保存后然后可以用浏览器打开该文件,就能看到我们写的代码或者文字了。
1.3 宇宙第一编辑器 VS Code
宇宙第一编辑器 VS Code,可以用于编写各种代码的编辑器,比用文本文档写代码简便的多,并且错误率低。在VS Code中打开我们所创建的.html文档就可以进行更加方便的编辑,也能在编辑器中创建文件和文件夹。可以通过下载插件拓展应用范围
**
VS Code的基本使用
:**
设置:文件->首选项->设置(大小、是否换行word wrap)
创建文件、创建文件夹、重命名和删除、搜索文件
ctrl + s :保存 | |
ctrl + a :全选 | |
ctrl + x 、ctrl + c 、 ctrl + v :剪切、复制、粘贴 | |
ctrl + z 、 ctrl + y :撤销、前进 | |
shift + end:从头选中一行 | |
shift + home:从尾部选中一行 | |
shift + alt + ↓:快速向下复制一行 | |
alt + ↑/↓ :快速向上或者向下移动一行 | |
tab:向后缩进 tab + shift:向前缩进 | |
ctrl + d 选择相同元素的下一个 | |
alt+鼠标左键 可以添加多个光标(同时对多行进行操作) |
1.4 浏览器
浏览器:目前的主流浏览器是Chrome(谷歌浏览器)也是我们目前所学习的,市场上常见的浏览器有:IE、Edge、火狐、Safari、Chrome、Opera等,其中IE新版为Edge。
1.5 深入了解网站开发
深入了解网站开发: 一个大型网站的开发需要团队的配合,各个岗位不可或缺。
a. 技术部门主要有 UI设计师:进行网站代码设计(也就是写一个设计稿)
b.web前端开发工程师(H5开发)将设计稿转化为代码并且与后端开发工程师配合。运用(HTML和CSS)
HTML:编写结构 CSS:编写样式 JavaScript:编写行为(web前端三大核心技术)
c.web后端主要负责数据处理,令数据库数据显示到页面。
HTML编写尝试
<style>
div{ color:aqua; font-style:italic; }
</style><div>HTML+CSS教程学习尝试</div><script>let div = document.querySelector('div');
let timer = null;
div.onmouseover = function(){timer = setInterval(()=>{if(flag){div.style.color = 'red';div.style.fontStyle = 'normal';}else{div.style.color = 'blue';div.style.fontStyle = 'italic';}flag = !flag;},500);
};
div.onmouseout = function(){clearInterval(timer);
}</script>
1.6HTML
HTML的基本属性:html是一种超文本标记语言,标准通用标记语言下的一个应用。是网页制作必备的编程语言。
超文本:文本内容+非文本内容(图片、视频、音频等)
标记:<单词>
标记也叫做标签:
HTML的初始代码
每一个.html文件都需要添加初始代码:!+ tab 键:快速创建html的初始代码。
尝试写视频中的初始代码:
<!DOCTYPE html> <!-- 文档声明:告诉浏览器这是一个html文件 -->
<html lang="en"> <!-- lang="en"表示初始为英文网站 --><!-- html文件的最外层标签:包裹着所有html标签代码 -->
<head><meta charset="UTF-8"><!-- 元信息:是编写网页中的一些赋值信息 --><!-- UTF-8表示使用国际编码 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页的标题</title> <!-- 设置网页标题 -->
</head>
<body><!-- 显示网页内容的区域 -->
</body>
</html>
1.7 HTML的注释
HTML的注释:注释的代码只有在文件中能看到,但是浏览器显示不出来<!- -注释的内容内容- ->
注释作用:1. 把暂时不用的代码注释起来,方便以后使用。2.对开发人员进行提示。
快速添加注释与删除:
ctrl + /
shiift + alt + a(使用时需选中要注释的代码)
1.8 HTML语义化:HTML语义化是指,根据网页中内容的结构,选择合适的HTML 标签进行编写。
HTML语义化的好处:
- 在没有CSS的情况下,页面也能呈现出很好的内容结构。
- 有利于SEO,让搜索引擎爬虫更好的理解网页。
- 方便其他设备解析。(如屏幕阅读器,盲人阅读器等)
- 便于团队开发与维护。
1.9 HTML标题与段落
HTML标题与段落:
标题 -> 双标签 :
< h1 >< /h1 > < h6 >< /h6 >
在一个网页中只能有一个h1标题,2-6可以有多个,h1-h6标题的重要性依次降低。h5 h6不常用。
段落:用p标签。
< p >< /p >
尝试编写标签和段落:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>南邮通达学院简介</h1><h2>师资力量</h2><p>截止2022年9月,学院现拥有专、兼职教师612人,其中高级职称279人。专任教师中具有博士、硕士学位的教师达到总数的90%,有享受政府特殊津贴6人,省“333工程”培养对象9人,省“青蓝工程”中青年学术带头人和优秀青年骨干教师29人</p><h2>教学成就</h2><p>截止2022年9月,在参加省级以上科技竞赛中屡获好成绩。2008-2009年,该院学生先后获得全国数学建模竞赛一等奖,全国大学生电子设计竞赛江苏省一等奖,第十届“挑战杯”全国大学生课外学术科技作品竞赛三等奖,江苏省高校第四届大学生物理及实验科技作品创新竞赛二等奖和三等奖数项。2008届毕业生中,共考上硕士研究生63人,占该届学生总数的6.67% ;其中24人被英国、美国、澳大利亚等国的大学录取。</p><h3>合作交流</h3><p>截止2022年9月,学院已与国外10多所院校建立了教学、科研和学生交流的合作渠道。正在运行的国际合作项目包括:美国中密西根大学的“3.5+0.5+1.5”校际交流本硕连读项目、英国诺森比亚大学的“3+1”校际交流本科双学位项目、新西兰惠灵顿维多利亚大学的“3.5+0.5+1.5”校际交流本硕连读项目等。通过对外交流与合作,为学生的成长提供了更加广阔的发展空间</p>
</body>
</html>
2.0HTML文本修饰标签
HTML文本修饰标签:
- 强调 -> 双标签:< strong >< /strong >
- 斜体:< em >< /em >
- 上标文本:< sub >< /sub >
<p> a<sub>2</sub> </p> 这里是a的平方
- 下标文本:< sup >< /sup >
<p> H<sup>2</sup>O </p>这个是化学里面的水分子的化学式
- 删除文本:< del >< /del >
<p> 原价<del>300</del>,现价<ins>100</ins>。</p>300上有删除线100下有下划线
- 插入文本:< ins >< /ins
storng的强调性强,em的强调性弱
2.1图片标签和属性 采用的是img标签,img是单标签。
- src:引入图片地址
- alt:当图片出错无法显示时显示文字,用于替代图片无法显示的问题
- title:提示信息(鼠标移到图片上时显示提示信息)
- width、height:图片的大小,像素(css)
<body><img src="图片地址" alt="替代文字" title="提示信息" width="宽" height="高">
</body>
2.2引入文件的地址路径
相对路径:
- 在路径中表示当前路径
- 在路径上表示上一级路径
<body><img src="./屏幕截图 2022-10-19 105634.jpg" alt="" ><!-- .表示向内寻找 ..表示向外寻找 -->
</body>
绝对路径:文件的完整路径
2.3跳转链接 :连接标签?
a标签 -> 双标签 < a >< /a >
href属性:链接地址
target属性:可以改变打开链接的方式(默认在当前页面打开:_self 。 新窗口打开:_blank)
- 使用base标签可以改变链接默认行为.
<body><a href="https://www.bilibili.com/video/BV1p4411T765?p=15">访问视频</a>
</body>
跳转链接可以用于网站和图片文字等
2.4跳转锚点
页面内快速移动 ,有两种实现方式:
- #号 + id属性
- #号+ name属性
尝试编写
1.#+ id属性
<a href="#id名1">目录内容1</a>
<a href="#id名2">目录内容2</a><h2 id="id名1">标题1</h2>
<p>段落1</p>
<h2 id="id名2">标题2</h2>
<p>段落2</p>
2 .#+name属性
<a href="#name名1">目录内容1</a>
<a href="#name名2">目录内容2</a><a name="name名1"></a>
<h2>标题1</h2>
<p>段落1</p>
<a name="name名2"></a>
<h2>标题2</h2>
<p>段落2</p>
2.5特殊符号
特殊符号:编写一些文本时经常会遇到输入法无法输入的字符,在html中为这些字符准备了专门的代码:
- 空格符:
- 版权:© ©
- 注册商标:® ®
- 小于号:< <
- 大于号:> >
- 和号:& &
- 人民币:¥ ¥
- 摄氏度:°
特殊字符:1.& + 字符 2.解决冲突 左右尖括号,添加多个空格的实现
2.6列表标签
列表标签:无序列表,有序列表,定义列表!
无序列表:< ul >、< li >:列表的最外层容器、列表项。符合嵌套的规范。
ul和li必须组合出现,中间不能有其他标签
type属性:更改项目前标记样式(一般都是用CSS控制)
创建无序列表
<ul><li><a href="#">内容1234</a></li><li><a href="#">内容1234</a></li><li><a href="#">内容1234</a></li>
</ul>
内容可以是文字也可以是链接
有序列表:< ol >、< li >:列表的最外层容器、列表项。
- 注:有序列表用的非常少,经常用的是无序列表,无序列表可以去代替有序列表。
创建有序列表:
<ol><li><a href="#"><strong>内容1</strong></a></li><li><a href="#">内容2</li><li><a href="#">内容3</li>
</ol>
定义列表:定义列表-> dl dt dd 列表项需要添加标题和对标题进行描述的内容。
< dl >:定义列表
< dt >:定义专业术语或名词
< dd >:对名词进行解释和描述
定义列表编写尝试:
<dl><dt>HTML</HTML></dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表</dd><dt>JavaScript</dt><dd>网页脚本语言</dd>
</dl>
初入HTML和CSS相关推荐
- 初入编程 - HTML + CSS
一些常用英文 Keywords 关键字 Description 描述 Author 作者 Copyright 版权 Charset 字符集 Refresh 刷新 Content 内容 Head 标签下 ...
- 初入前端框架bootstrap--Web前端
Bootstraps是一种简洁.直观.强悍的前端开发框架,它让web开发更迅速.简单.对于初入Bootstrap的小白,高效进入主题很重要,能为我们节省很多时间,下面我将对使用Bootstrap开发前 ...
- 做为初入职的Web前端开发,应该如何尽快提高自己的能力?
[做为初入职的Web前端开发,应该如何尽快提高自己的能力?] 说前端要懂后端的纯粹是扯淡+2货. PS:实在受不了一群蠢货了. 什么叫懂后端? 马丹你们先弄清楚什么叫懂后端好了. 不写过三年五年的后端 ...
- 初入职场的我怎么就成了个打杂的,我是这样破局的 No.146
本文为转载文章,转载于公众号:一名叫大蕉的程序员 这么快就到6月份了,又到一大批有为青少年离开象牙塔摩拳擦掌准备进入职场大干一番的季节.但很多人也开始迷茫起来,毕竟啊,那个以考试成绩为唯一标记性成果的 ...
- RxJava初入学习(一)之Gifts-for-designers
Introduction 一个为设计师设计的APP( ´_ゝ`)一个特别简单项目 主要用来练习Rx,当然这个适合初入Rx的看看. 自己参考的教程给 Android 开发者的 RxJava 详解 Git ...
- 【青春须早为,岂能长少年】一个初入职场程序员的阶段总结
作者:陌北有棵树,Java人,架构师社区合伙人! 2019届毕业的小伙伴们,都应该已经入职快两个月了吧,从学校踏入工作,想必都有很多新的感悟和想法吧,我在这里写下我作为新人的的思考和总结,困惑与迷茫. ...
- 「每周论文推荐」 初入深度学习CV领域必读的几篇文章
https://www.toutiao.com/a6718570271269192200/ 很多朋友都希望我们开通论文推荐和阅读板块,那就开吧,此专栏名为<每周论文推荐>.在这个专栏里,还 ...
- 初入android驱动开发之字符设备(一)
大学毕业,初入公司,招进去的是android驱动开发工程师的岗位,那时候刚进去,首先学到的就是如何搭建kernel.android的编译环境,然后就是了解如何刷设备以及一些最基本的工具.如adb.fa ...
- 每一个div元素分析 php,PHP初入,div知识点整理(特效字体等元素的使用整理)...
.nav{ width: 500px; height: 100px; border: 2px solid black; background-image: url(js/QQ图片20170815095 ...
最新文章
- 波士顿大学计算机科学硕士申请要求,波士顿大学计算机信息系统理学硕士研究生申请要求及申请材料要求清单...
- 详细图解JDK+Tomcat Web开发环境配置和HelloWorld程序
- 开发中我们谈的产品化是什么?阿里是怎么看待产品化?
- Android内存解析(二)— 详解内存,内部存储和外部存储
- Try Redis : Redis 入门教程
- Waves13混音效果全套插件
- tmsf28335的启动步骤
- java 人民币大写_Java实现人民币大写精讲
- C64+系列DSP的总结
- 计算机专业毕业设计流程,计算机专业毕业设计答辩流程
- 关于能力素质模型建模
- ajax证书问题,网站上有错误的SSL证书的Jquery Ajax
- 项目开发中的人月及如何计算
- 网络信息安全之信息系统安全保障
- Lingo练习 选拔问题
- python 两个等长list的各对应位置元素相加+两个字典相加,相同键元素累加,不同键元素取全集
- vue.js创建网站实例1
- 链路聚合+MSTP实验
- 什么是ICTI认证?ICTI认证有什么好处?
- 开源飞控初探(二):无人机技术栈
热门文章
- yxy小蒟蒻的201112总结
- vue打开其他项目的页面/打开外部链接,window模态框或内嵌在项目里
- 超详细!apk安装包快速反编译,多种反编译及失败的解决方案(包含classes.dex的反编译,新增加快速反编译)
- unity3D中导入的物体锚点居中
- 【操作系统】SMP vs NUMA vs MPP 架构简介
- Apache iceberg:Netflix 数据仓库的基石
- 魅族 鸿蒙系统,魅族宣布接入鸿蒙系统,但……
- Flutter 之简洁实用的图片编辑器
- JavaScript replace()方法限制文本框输入文本类型(数字/字母等)的正则表达式
- Keil uvision5 C51软件安装教程附下载地址