小薇学院任务一：零基础HTML编码（笔记）

一.标签的嵌套规则以及<a>标签

<ul><li><a href='#'>导航链接一</a></li><li><a href='#'>导航链接二</a></li><li><a href='#'>导航链接三</a></li><li><a href='#'>导航链接四</a></li>
</ul>

知识点1：

<a>元素最重要的属性是 href 属性，它指示链接的目标。如果没有href属性，不会显示a的标准样式（仅仅是文本的样子）
在所有浏览器中，链接的默认外观是：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的（点击的瞬间是红色的）

知识点2.

1.块级元素      https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements

2.行内元素    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elemente

注：img，input是inline-block 既具有宽度高度特性又具有inline的同行特性

3.嵌套规则

　　1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：
　　2. 块级元素不能放在<p>里面：
　　3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
　　h1、h2、h3、h4、h5、h6、p、dt

4. li 内可以包含 div 标签
　　5. 块级元素与块级元素并列、内嵌元素与内嵌元素并列（Doctype的块级内联分类方式） https://segmentfault.com/q/1010000000436866

知识点3：水平居中

1.设置子元素居中于父元素

A：当子元素是行内元素，如：文本图片以及行内元素

方法：对父元素设置text-align:center，使得子元素在父元素中居中

<div class="container" style="text-align:center" width="">开心快乐每一天
</div>

当行多个内元素在父元素中并列存在时，考虑到整体性

B：当子元素是块级元素时

B1方法：先设置块级元素自身 diaplay:inline，再设置父元素 text-align:center

<style>
.container{text-align:center;background-color:pink;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{list-style:none;margin:0;padding:0;background-color:yellow;display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{margin-right:8px;background-color:red;display:inline;
}
</style>
<body>
<div class="container"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul>
</div>
</body>

list-style控制列表的小圆点

margin:0;padding:0; 去掉<li>前的空白

**************我是分界线*************************************

text-align对儿子元素起作用。

B2方法：使用了 float relative相对位置后续需要清除浮动啊有一些后遗症。。。。我还没有搞清楚！！！！

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现子元素在父元素中水平居中。

父元素右移自己宽度的一半，（子元素此时在父元素的最左部），子元素再向左移自己宽度的一半，使得子元素相对于<body>居中

<style>
.container{position:relative;left:50%;float:left;border:2px solid red;}.container ul{list-style:none;margin:0;padding:0;border:2px solid green;position:relative;left:-50%;
}
.container li{float:left;
display:inline;margin-right:8px;}
.wrap-center{border:2px solid yellow;position:relative;left:-50%;
}
.wrap{float:left;clear:both;position:relative;left:50%;border:2px solid black;
}
</style><div class="container"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul>
</div>
<div class="wrap"><div class="wrap-center">我们来学习一下这种方法。</div>
</div>

2.设置块级元素自己居中,而不是块中的文本

A.当该元素是定宽块状元素时

方法：设置该块状元素自身的width=""，再设置该元素自身 margin:0 auto;

<style>
div{border:1px solid red;width:200px;margin:0px auto;
}
</style>
<div>我是定宽块居示。</div>

B.当元素为非定宽块级元素时（未设置width）

不设置宽度的块级元素，应该独占一行，本身就是相对<body>居中（跟<body>的长度相同）的；

该方法可以用于：通过<table>使得块级元素宽度自适应；

原理：

为该元素裹上一层<table>，是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素；

（嵌套之后，连同table层相当于一个定宽块状元素，此时设置margin应对table设置而不是div，不然嵌套table又有什么意义呢！）

方法：

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

<table style="margin:0 auto;"><tbody><tr><td><ul style="background-color:green;"><li>我是第一行文本</li><li>我是第二行文本</li><li>我是第三行文本</li></ul></td></tr></tbody>
</table>

知识点4：表格的横纵单元格合并

下面是一个表格，给表格加一个border="1"好让你看出来是一个表格
<table border="1">
<tr><td>表头</td><td>表头</td><td>表头</td>
</tr>
<tr><td>表内容单元格</td><td>表内容单元格</td><td rowspan="4" style="color:purple;">操作</td>
</tr>
<tr><td>表内容单元格</td><td>表内容单元格</td><!--<td style="color:purple;">操作</td>-->
</tr>
<tr><td>表内容单元格</td><td>表内容单元格</td><!--<td style="color:purple;">操作</td>-->
</tr>
<tr><td>表内容单元格</td><td>表内容单元格</td><!--<td style="color:purple;">操作</td>-->
</tr>
<tr><td>总计</td><td colspan="2">1000</td>
</tr>
</table>
<!--<td colspan="2">合并同一行的某2列   <td rowspan="2">合并同一列的某2行-->

1.表格是一行一行书写，使用<tr>元素；

2.在每一个<tr>中，存在多个单元格，如果是表头单元格 tablehead：使用<td>标签；如果是内容单元格 tabledata：使用<td>标签；

3.合并一行上的N列单元格，使用<td colspan="N">,在一个<tr>中即可实现；可先计算出N，再进行指定<tr>的书写

4.合并一列上的N行单元格，使用<td rowspan="N",需要在N-1个<tr>中实现；可先把基本表格书写出来，在第一个<tr>中书写汇总句，再删去剩下N-1个<tr>中的相关句

差不多就是这样

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小薇学院 任务一：零基础HTML编码</title>
</head>
<body>
<h1>网站一级标题</h1>
<ul><li><a href=''>导航链接一</a></li><li><a href=''>导航链接二</a></li><li><a href=''>导航链接三</a></li><li><a href='www.baidu.com'>导航链接四</a></li>
</ul><!-- 首先 li要在a外层<a>元素最重要的属性是 href 属性，它指示链接的目标。如果没有herf属性 不会显示a的标准样式在所有浏览器中，链接的默认外观是：未被访问的链接带有下划线而且是蓝色的已被访问的链接带有下划线而且是紫色的活动链接带有下划线而且是红色的 点击的瞬间是红色的-->
<h2>文章一级标题</h2>
<h2>文章二级标题</h2>
<p>文章作者 文章发表时间</p>
<pre>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
换行了
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了
这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://life.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段
落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
</pre>
<img src="jay.jpg">
<pre>
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
这是一个很长很长的段落，换行了
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://life.baidu.com" target="_blank">这里又一个链接点击打开后打开新窗口链接到
http://life.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是
一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
</pre>
<!-- 这里遗留了一个问题：链接显示不紧凑造成错位 -->
<h2>另一篇文章一级标题</h2>
<h2>文章二级标题</h2>
<p>文章作者 文章发表时间</p>
<pre>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
换行了
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了
这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://life.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段
落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
</pre>
<img src="jay.jpg">
<ul><li>列表项目一</li>    <li>列表项目一</li>  <li>列表项目一</li>
</ul>
<h2>图片</h2>
<div style="position:relative;left:30px;">好看的图片<img src="jay.jpg" style="display:block">
</div>
<div style="position:relative;left:30px;top:10px">好看的图片<img src="jay.jpg" style="display:block">
</div>
<div style="position:relative;left:30px;top:20px">好看的图片<img src="jay.jpg" style="display:block">
</div>
<div style="position:relative;left:30px;top:30px">好看的图片<img src="jay.jpg" style="display:block">
</div>
<div style="position:relative;left:30px;top:40px">好看的图片<img src="jay.jpg" style="display:block">
</div>
<div style="position:relative;left:30px;top:50px">好看的图片<img src="jay.jpg" style="display:block">
</div>
<div style="position:relative;left:30px;top:60px">好看的图片<img src="jay.jpg" style="display:block">
</div>
<div style="position:relative;left:30px;top:70px">好看的图片<img src="jay.jpg" style="display:block">
</div>
<div style="position:relative;left:30px;top:80px">好看的图片<img src="jay.jpg" style="display:block">
</div>
<div style="position:relative;left:30px;top:90px">好看的图片<img src="jay.jpg" style="display:block">
</div>
<h2 style="margin-top: 110px;">最后一篇文章一级标题</h2>
<h2>文章二级标题</h2>
<p>文章作者 文章发表时间</p>
<ol><li>排名1</li><li>排名2</li><li>排名3</li>
</ol>
下面是一个表格，给表格加一个border="1"好让你看出来是一个表格
<table border="1">
<tr><td>表头</td><td>表头</td><td>表头</td>
</tr>
<tr><td>表内容单元格</td><td>表内容单元格</td><td rowspan="4" style="color:purple;">操作</td>
</tr>
<tr><td>表内容单元格</td><td>表内容单元格</td><!--<td style="color:purple;">操作</td>-->
</tr>
<tr><td>表内容单元格</td><td>表内容单元格</td><!--<td style="color:purple;">操作</td>-->
</tr>
<tr><td>表内容单元格</td><td>表内容单元格</td><!--<td style="color:purple;">操作</td>-->
</tr>
<tr><td>总计</td><td colspan="2">1000</td>
</tr>
</table>
<!-- <td colspan="2">合并同一行的某几列<td rowspan="2">合并同一列的某几行-->
<h2>这里以后是一个侧栏，这是侧栏的标题</h2>
<h2>侧栏注册窗口标题</h2>
请输入邮箱地址：<input type="text" name="email" value="这是一个文本输入框">
<p>邮箱地址请按照要求格式输入</p>
请输入密码：<input type="text" name="first_pass" value="这是一个文本输入框">
请重复输入密码：<input type="text" name="second_pass" value="这是一个文本输入框">
<p>的密码请为6-16位英文数字</p>
<br/>
性别：<input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">女城市：<select name="city"><option value="beijing" selected>北京</option><option value="guangdong">广东</option></select>爱好：<input type="checkbox" name="hobby" value="sport">运动
<input type="checkbox" name="hobby" value="art">艺术
<input type="checkbox" name="hobby" value="kexue">科学个人描述：<textarea name="message" row="8" col="15">这是一个多行输入框，输入您的个人描述</textarea>
<button type="button" style="border-radius:5px">确认提交</button>
<p>版权所有&copy;</p>
<h6>未能解决的问题：1.网页链接为何显示的如此松散//2.图片的显示是否有更好的方式3.如何在不用css的情况下，单选框是蓝色，下拉列表为蓝色，确认按钮边界圆润（css3的border-radius）4.标题h的选择
</h6>
<!--我来检测 元素嵌套规则：块级与块级并列，内嵌与内嵌并列 -->
<div><h2>你好，北京</h2><span>（嘤嘤嘤，我一一点儿也不好）</span></div>
<div style="width:200px;"><span>你好，北京</span><span>（嘤嘤嘤，）</span></div></body>
</html>

小薇学院任务一：零基础HTML编码（笔记）相关推荐

百度前端小薇学院任务一
任务一因为时间关系所以草草完成了···果然学习了要会运用才是王道!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
小薇学院任务一学习笔记
1.框架大概形式如下: <!DOCTYPE HTML> <html> <title> </title> <body> </body&g ...
【小甲鱼】python零基础入门学习笔记 03讲~43讲
本篇基于[莫烦]python基础教程,属于查漏补缺建议学习顺序小甲鱼->莫烦numpy&pandas 目录第003讲插曲之变量和字符串课堂笔记变量变量需要注意的地方字符 ...
html作业百度网盘,百度学院任务一：零基础HTML编码作业.html
百度学院学习零基础HTML编码网站一级标题导航链接一导航链接二导航链接三导航链接四文章一级标题文章二级标题文章作者文章发表时间百度前端技术学院的课程任务是由百度前端工程师专为对前端 ...
百度前端技术学院—-小薇学院(HTML CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
零基础HTML编码学习笔记
任务目的了解HTML的定义.概念.发展简史掌握常用HTML标签的含义.用法能够基于设计稿来合理规划HTML文档结构理解语义化,合理地使用HTML标签来构建页面任务描述:完成一个HTML页面代 ...
【微信小游戏实战】零基础制作《欢乐停车场》二、关卡设计
1.游戏立项微信小游戏中有一款<欢乐停车场Plus>的小游戏,大家可以搜索玩下.这是一款益智类的小游戏,游戏中有红.黄.绿.蓝.紫5辆豪车6个停车位,玩家通过可行走路线移动小车,最终让各 ...
【微信小游戏实战】零基础制作《欢乐停车场》三、游戏场景制作
1.游戏立项微信小游戏中有一款<欢乐停车场Plus>的小游戏,大家可以搜索玩下.这是一款益智类的小游戏,游戏中有红.黄.绿.蓝.紫5辆豪车6个停车位,玩家通过可行走路线移动小车,最终让各 ...

小薇学院任务一：零基础HTML编码（笔记）

小薇学院任务一：零基础HTML编码（笔记）相关推荐

最新文章

热门文章