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

最新推荐文章于 2024-08-05 10:20:29 发布

脖子有点儿疼

最新推荐文章于 2024-08-05 10:20:29 发布

阅读量510

点赞数

分类专栏： baidu_web_xiaowei 文章标签： html

本文链接：https://blog.csdn.net/misswuxl/article/details/78137777

版权

baidu_web_xiaowei 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.标签的嵌套规则以及<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>