任务二（Html Css简单学习与知识整理）

最新推荐文章于 2024-09-11 20:31:47 发布
最新推荐文章于 2024-09-11 20:31:47 发布
阅读量440 收藏
点赞数
分类专栏： 百度前端学院 文章标签： css html 标签 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/silence_27/article/details/72792958
版权

一.html几个标签

<em>斜体

<q>短文本引用；<blockquote>长文本引用；

&gt >;&lt <;&amp  and;&quot ";

有些标签中含有title属性，这个是鼠标划过时会在那个区域显示title里面的内容，例如<a>标签

二.Css相关整合

1.内部样式>内联样式>外部样式(<link href="外部的css" rel="stylesheet" type="text/css"/>)

2.选择器

1)类选择器可以多次使用，但是ID选择器只能使用一次

2)同一标签可以有不同的类选择器，即可以有并列的多个类选择器，但ID选择器只能有一个。

3)子选择器：类/ID选择器>标签 （父类标签所包含的第一代后代标签）

类/ID选择器  标签 （父类标签所包含的所有后代标签）

4)通用选择器 : *{}

5)ID选择器>类选择器>标签选择器

3.段落排版：

加粗:font-weight: blod;

斜体:font-style:italic;

缩进:text-indent:2em;

text-decoration:underilne/line-through/none;

中文字间距:letter-spacing:xx px;

单词间距：word-spacing:xx px;

4.盒模型

padding border margin(上右下左)

border-style:dashed(虚线)/dotted(点线)/solid(实线)

5.布局

postion:fixed/absolute(相对于父类标签)/relative(相对于自身位置);

另附百度前端学院小薇学院任务二代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html lang= "en" >

< head >
< meta http-equiv= "Content-Type" content= "text/html;charset=UTF-8" >
< title >baidu_task2_1 </ title >
< style type= "text/css" >
body {
margin: 0;
padding: 0;
}
#top {
margin: 0;
height: 60px;
background-color: #363636;
}
#image {
float: left;
}
#link {
float: right;
}
#top img {
width: 50px;
height: 40px;
margin: 10px auto;
}
#top ul {
text-align: left;
list-style: none;
}
#top ul li {
float: left;
margin-right: 20px;
}
#top a {
color: white;
text-decoration: none;
}
#top .import {
color: #b0b0b0;
}
p {
text-indent: 2em;
font-family: "楷书";
font-size: 16;
font-weight: bold;
}
#title1,
#title2,
#title3,
#title4,
#title5,
#bottom {
margin: auto;
padding: 30px 30px;
}
#title1 {
border: 20px solid #b0b0b0;
}
#title2,
#title3,
#title4,
#title5,
#bottom {
border-top-width: 0;
border-bottom-width: 20px;
border-left-width: 20px;
border-right-width: 20px;
border-style: solid;
border-color: #b0b0b0;
}
#title1 p image {
margin: 0 20px;
}
#title2 p image {
margin: 0 20px;
}
#title2 ul li {
list-style: none;
}
#title3 #img {
margin: 20px;
width: 200px;
height: 200px;
text-align: center;
border: 1px solid black;
}
ol li,
#title4 lable {
font-weight: bold;
}
#title4 table {
border-collapse: collapse;
width: 100%;
}
#title4 table th {
background-color: black;
color: white;
}
#sum {
background-color: #b0b0b0;
color: black;
}
#title5 table {
font-size: 12;
font-family: "仿宋";
margin-left: 400px;
font-weight: bold;
}
#submit {
width: 100%;
background-color: gray;
height: 40px;
color: white;
border-radius: 12px;
}
textarea {
width: 300px;
height: 200px;
}
#word {
text-align: right;
}
#reminder {
text-align: center;
color: red;
}
#bottom {
clear: both;
margin-bottom: 0;
border: 0;
background-color: #363636;
text-align: center;
}
#header {
padding: 10px;
border-left: 4px solid darkgary;
}
< / style >
</ head >

< body >
< div id= "top" >
< div id= "image" >
< img src= "G:\大三下Java代码\前端引用的图片\baidu_task1\3.jpg" ></ img >
</ div >
< div id= "link" >
< ul >
< li >< a href= "http://ife.baidu.com" >导航链接一 </ a ></ li >
< li >< a href= "http://ife.baidu.com" >导航链接二 </ a ></ li >
< li >< a href= "http://ife.baidu.com" >导航链接三 </ a ></ li >
< li >< a href= "http://ife.baidu.com" class= "import" >导航链接四 </ a ></ li >
</ ul >
</ div >
</ div >
< div id= "title1" >
< h2 >生活日志 </ h2 >
< h3 >简单记录最近的状态 </ h3 >
< lable >邱晨 2017.05.24 </ lable >
< p >本来是想说可以写点自己的状态啥的，但是我觉得还是写这是一个很长很长的段落来的更快捷简单，所以接下来就是...
< br >换行了 < br > 这是一个很长很长的段落,这是一个很长很长的段落,换行了 < br > 这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,
< a href= "http://ife.baidu.com" >这是一个连接到百度前端学院的链接 </ a >这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,应该已经够长了吧. < br >
< image src= "G:\大三下Java代码\前端引用的图片\baidu_task1\2.jpg" height= "300px" width= "300px" ></ image >< br > 继续很长的段落话题，这是一个很长很长的段落, 这是一个很长很长的段落这是一个很长很长的段落, 这是一个很长很长的段落这是一个很长很长的段落, 这是一个很长很长的段落 </ p >
</ div >
< div id= "title2" >
< h2 >另一篇文章 </ h2 >
< h3 >继续我的胡说八道 </ h3 >
< lable >邱晨 2017-05-24 </ lable >
< p >继续这是一个很长很长的段落之旅....
< br >换行了 < br > 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落,换行了
< br >< strong >这是加粗了的字体 </ strong > 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落
< a href= "http://ife.baidu.com" >这是一个连接到百度前端学院的链接 </ a >这是一个很长很长的段落, 这是一个很长很长的段落
</ p >
< image src= "G:\大三下Java代码\前端引用的图片\baidu_task1\3.jpg" height= "300px" width= "300px" ></ image >
< ul >
< li >序号1 </ li >
< li >序号2 </ li >
< li >序号3 </ li >
</ ul >
</ div >
< div id= "title3" >
< div >
< h2 >图片 </ h2 >
</ div >
< div id= "img" >
< h3 >好看的图片 </ h3 >
< image src= "G:\大三下Java代码\前端引用的图片\baidu_task1\1.jpg" height= "100px" width= "100px" ></ image >< br >
</ div >
< div id= "img" >
< h3 >好看的图片 </ h3 >
< image src= "G:\大三下Java代码\前端引用的图片\baidu_task1\3.jpg" height= "100px" width= "100px" ></ image >
</ div >
</ div >
< div id= "title4" >
< h2 >最后一篇文章 </ h2 >
< h3 >继续我的胡说八道 </ h3 >
< ol >
< li >考试排名1 </ li >
< li >考试排名2 </ li >
< li >考试排名3 </ li >
</ ol >
< lable >下面是一个表格,我这里给表格添加了"borfer=1"好让你看出十个表格 </ lable >
< table border= "1" >
< tr >
< th >姓名 </ th >
< th >工资 </ th >
< th >操作 </ th >
</ tr >
< tr >
< td >小明 </ td >
< td >2000 </ td >
< td >< a href= "http://ife.baidu.com" >修改 </ a ></ td >
</ tr >
< tr >
< td >小红 </ td >
< td >3000 </ td >
< td >< a href= "http://ife.baidu.com" >修改 </ a ></ td >
</ tr >
< tr id= "sum" >
< td >总计 </ td >
< td colspan= "2" >5000 </ td >
</ tr >
</ table >
</ div >
< div id= "title5" >
< div id= "header" >
< h2 >这里以后是一个侧栏，这是侧栏的标题 </ h2 >
</ div >
< form >
< table >
< tr >

< td id= "word" >请输入邮箱地址： </ td >
< td > < input type= "text" value= "这是一个文本输入框" /></ td >
</ tr >
< tr >
< td colspan= "2" id= "reminder" >邮箱地址请按要求格式输入 </ td >
</ tr >
< tr >
< td id= "word" >请输入密码： </ td >
< td >< input type= "text" value= "这是一个文本输入框" /></ td >
</ tr >
< tr >
< td id= "word" >请重复输入密码： </ td >
< td >< input type= "text" value= "这是一个文本输入框" /></ td >
</ tr >
< tr >
< td colspan= "2" id= "reminder" > 密码请为6-16位英文数字 </ td >
</ tr >
< tr >
< td id= "word" >性别： </ td >
< td >< input type= "radio" name= "sex" value= "0" checked= "checked" />男 < input type= "radio" name= "sex" value= "1" />女 </ td >
</ tr >
< tr >
< td id= "word" >城市: </ td >
< td >
< select >
< option > --请选择-- </ option >
< option >北京 </ option >
< option >南京 </ option >
< option >上海 </ option >
</ select >
</ td >
</ tr >

< tr >
< td id= "word" >爱好： </ td >
< td >
< input type= "checkbox" />运动
< input type= "checkbox" />艺术
< input type= "checkbox" />科学
</ td >
</ tr >
< tr >
< td id= "word" >个人描述： </ td >
< td > < textarea value= "" >这是一个输入框，请输入你的个人描述 </ textarea >< br ></ td >
</ tr >
</ table >
< input type= "submit" value= "确认提交" id= "submit" />
</ form >
</ div >
< div id= "bottom" >
< lable >版权所属---阿晨 </ lable >
</ div >
</ body >

</ html >


silence_27
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《HTML与CSS设计》课程总结,网页设计课程学习心得总结
weixin_35443436的博客
06-05 3860
网页设计师需要不断地调整视觉元素，改进界面设计来满足不同用户的需求和偏好，图片是网页设计的重要设计元素，如何更好地在网页设计中应用图片元素显得尤为重要。下面是学习啦小编为大家整理的网页设计课程学习心得总结，供你参考!网页设计课程学习心得总结篇1转瞬之间，半个学期又接近尾声，在李导师的精心辅导下，度过了这个富有生机，富有朝气的学期。学到了很多做梦也不会遇到的如此奇特的有趣知识，对于我来讲是一个很好的...
HTML，CSS，JavaScript知识树思维导图
热门推荐
赵乘风_i
03-14 1万+
最近师父布置的学习任务，就是构建知识树。一个周末终于完成了任务，有一些是网上有的，就直接用了，有些没有，就是自己总结的。整理的过程中发现前端的知识真是错综复杂，还有层出不穷的各种框架。任重而道远 想要原稿的可以留言邮箱，统统发给你！ PS：微信公众号 FEtoss 回复 hcj 即可获取下载地址 正文~ HTML CSS J...
HTML＋CSS学习任务清单
weixin_30480651的博客
10-31 273
HTML部分：掌握HTML的全部语法，他的主体结构，超连接及常用标记的使用 CSS部分：掌握CSS的三种选择器的使用，明白如何使用DIV＋CSS进行网页布局，搞清楚浮动问题！ 1，HTML的语法（包括HTML的语法格式，文档注解，代码格式） 2，HTML的基本结构（包括的标记<html><head><title><body>） 3，文档设置标...
百度前端学院-小薇学院-任务二
记录学习历程~
04-05 357
代码地址：https://github.com/fangfay/baidu/tree/master/xiaowei/02/index.html demo地址：https://htmlpreview.github.io/?https://github.com/fangfay/baidu/blob/master/xiaowei/02/index.html 后面的表单目前还不太会，先这样，下次来补吧
WEB前端知识点整理（HTML+CSS+JAVASCRTPT）
gyeolhada的博客
01-05 3894
WEB前端知识点整理（HTML+CSS+JAVASCRTPT）
前端知识总结之HTML+CSS
weixin_45690832的博客
05-02 1884
HTML4/HTML5+CSS2/CSS3 一、HTML 1.什么是HTML 语义化，有什么好处 是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），简单来说就是，标签用语义化的英文单词或者单词缩写，比如段落使用，侧边栏用，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。 好处`： 1.1有助于构架良好的HTML结构 1....
html一知识框架图,Web前端基础怎么学？html、css、JavaScript 知识架构图
weixin_30359265的博客
06-05 437
以前开发者只要掌握 HTML、CSS、JavaScript 三驾马车就能胜任一份前端的工作了。而现在除了普通的编码以外，还要考虑如何性能优化，如何跨端、跨平台实现功能，尤其是 AI、5G 技术的来临，都在加快前端技术的更新，也在逼促开发者要不停的学习，不能的接受新的技术标准。“学什么”“怎么学”其实是我们要着重解决的问题。所以，今天给你梳理一下前端知识框架，帮你把知识点重新做个遍历，查缺补漏的学习...
html和css制作简单的页面,HTML+CSS基础训练之作一个简单页面的布局
weixin_39982537的博客
06-05 855
@HTML+CSS基础之一个简单页面的布局cssHTML+CSS基础训练之作一个简单页面的布局为了更好的学习WEB前端开发技术，本人将根据专业课所学以及自学的成果进行总结整理并实时更新分享！！俺只是一名大二的小????️????第一次写文章 请你们多多海涵。下面进入正题：布局是网页设计的基础中的基础，一个好的布局可让人一目了然，一个失败的布局会让协同人员抓狂。因此前端开发，从布局开始。html1、任务介绍如图...
Web前端基础怎么学？ JavaScript、html、css知识架构图
web前端的发展
06-13 318
以前开发者只要掌握 HTML、CSS、JavaScript 三驾马车就能胜任一份前端的工作了。而现在除了普通的编码以外，还要考虑如何性能优化，如何跨端、跨平台实现功能，尤其是 AI、5G 技术的来临，都在加快前端技术的更新，也在逼促开发者要不停的学习，不能的接受新的技术标准。 “学什么”“怎么学”其实是我们要着重解决的问题。所以，今天给你梳理一下前端知识框架，帮你把知识点重新做个遍历，查缺补漏的学...
学习react必看的基础知识_超细节整理
m0_57219965的博客
09-28 1319
公司突然要求用react写项目，马上开始整理学习起来 姑娘熬夜头秃啊 一、React基础 01.ReactJS了解 1.学习前必须掌握的js语法 1.js概念：原型，原型链 2.es6语法：变量，箭头函数，数组，对象，参数，赋值，异步，承诺机制，类 3.判断this的指向 4.npm包的管理 5.模块化开发的概念 ... 2.react特点 1.声明式编码 1)命令式：window.location.href 编程式 2)声明式：a标签 2.组件化编码 3.React Native 编写原生应用
HTML5及CSS3web前端开发技术习题答案解析.pdf
01-07
### HTML5及CSS3 Web前端...以上就是关于HTML5及CSS3 Web前端开发技术的一些关键知识点和习题解析。这些内容不仅涵盖了HTML5的新特性，还包括了如何利用这些特性来改善Web应用的功能性和用户体验。希望对你有所帮助！
一个简单漂亮的网址导航HTML5源码源码资源下载整理.zip
08-20
这个压缩包文件“一个简单漂亮的网址导航HTML5源码源码资源下载整理.zip”包含了一个基于HTML5技术的网址导航页面的源代码。这个源码资源对于学习网页设计，特别是HTML5技术，以及想要创建简单、美观的网址导航栏的...
CSS 常用元素属性
最新发布
2301_79881188的博客
09-11 504
CSS 属性有很多, 可以参考文档。
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 242
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
html css jquery选项卡 代码练习小项目
Json的知识梦工厂
09-08 886
在学习 html 和 css jquery 结合使用的时候 做好是能尝试做一些简单的小功能，来提高自己的 逻辑能力，熟悉代码的编写语法。下面分享一段代码 使用html css jquery选项卡 代码练习。代码实现起来还是比较简单的 有兴趣的 兄弟们可以尝试练习以下。html 使用的是 div dl dd标签实现的。简单的写了一些 css 样式。
前端开发中的CSS命名规范及BEM实践
官方推荐
09-08 2981
前端开发中的CSS命名规范及BEM实践
【CSS in Depth 2 精译_025】4.3 弹性布局的方向
PeacefulWinter的博客
09-09 1958
本篇为新版《CSS in Depth》4.3小节内容，主要介绍了 Flexbox 弹性布局的方向设置，并结合一个典型的两列布局案例，对垂直方向的弹性布局做了进一步讨论，最后还对表单元素的细节样式问题进行了讨论，这些都是平时容易忽略的非常有价值的知识点，建议收藏并在本地实测。
《HTML 与 CSS—— 响应式设计》
weixin_47266126的博客
09-11 758
HTML 和 CSS 在响应式设计中起着至关重要的作用。通过使用语义化标签、响应式图像、媒体查询、弹性布局和响应式网格系统等技术，可以实现网页在不同设备上的自适应显示，提供良好的用户体验。在进行响应式设计时，要遵循移动优先设计、内容优先和测试优化等最佳实践，不断提高网页的质量和性能。随着移动设备的普及和技术的不断发展，响应式设计将变得越来越重要，开发者需要不断学习和掌握新的技术和方法，以满足用户的需求。
jQuery基础2-css的操作-事件-属性-Ajax-DOM操作
m0_64450406的博客
09-06 1140
新列表项
jQuery Mobile页面隐藏显示事件与HTML5/CSS3教程整理
文档提供了一个实用的学习路径，首先强调了在深入学习jQuery Mobile之前要熟悉HTML5基础知识，特别是HTML5的历史发展和其组成部分，如内容元素（Content）、样式表（CSS）和呈现（Presentation）。HTML5的发展历经多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值