CSS+HTML基础 #3

253867843 · 2019-01-16T07:14:14Z

Html和CSS的关系

1-1.学习web前端开发基础技术:

(1) HTML --- HTML是网页内容的载体. 网页内容包括: 文字, 图片, 视频等.
(2) CSS --- CSS样式是表现, 网页的外衣. CSS样式包括: 标题字体, 颜色变化, 为标题添加背景图片, 边框等.
(3) JavaScript --- 来实现网页上的特效效果. 有动画, 有交互的一般都是通过JavaScript来实现. 特效效果包括: 鼠标滑过弹出下拉菜单, 鼠标滑过表格背景颜色改变等.

1-2.HTML页面是由html标签组成的.

1-3.网页中每一个内容在浏览器中的显示, 都要存放在各种标签中.

总结: html标签 +网页内容 >>> 组成html页面 >>> 在浏览器中显示.

1-4.标签的语法:

(1) 标签一般成对出现, 有: 开始标签和结束标签.
<h1>12345678</h1>

Command	Description
`<h1>`	开始标签
12345678	标签内容
`</h1>`	结束标签

(2) 标签可以嵌套.
(3) HTML标签不区分大小写.
(4) 常用标签:

	(1)<h1></h1> --- 标题标签
	(2)<p></p> --- 段落标签

1-5.认识html文件基本结构:

<html>
    <head></head>
    <body></body>
</html>

(1) <html></html> --- 根标签, 所有网页标签都在<html></html>中
(2) <head></head> --- 定义文档的头部, 是所有头部元素的容器. 
                  --- 头部元素有: <title>, <script>, <style>,<link>, <meta>
(3) <body></body> --- 网页主要内容, 有<h1>, <p>, <a>, <img>

1-6.认识head标签:

(1) title标签: 网页标题信息, 它会出现在浏览器的标题栏中.
(2) 网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么, 搜索引擎可以通过网页标题, 迅速
的判断出网页的主题.

1-7.HTML的代码注释:

2-1.语义化

(1) 记住学习html标签过程中, 学习两方面: 标签的用途和标签在浏览器中的默认样式.
(2) 语义化: 明白每个标签的用途

Command	Description
文章的标题	标题标签
栏目名称	标题标签
文章中内容的段落	段落标签
文章中强调的文本	em标签

2-2.`<body>`标签, 网页上显示的内容放在这里

2-3.开始学习`<p>`标签

(1)<p>标签的用途: 显示文章段落, <p>段落文本</p>
(2)<p>标签在浏览器中的默认样式: <p>标签的段前段后都会有空白, 可以通过css样式来删除或改变它.

2-4.学习`<hx>`标签

(1)<hx>标签的用途: 制作文章标题, <hx>标题文本</hx>
(2)<hx>标签在浏览器中的默认样式: 
<body>
    <h1>一级标题</h1> --- 重要等级最高, 字体样式加粗, 字体最大
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6> --- 重要等级最低, 字体样式加粗, 字体最小
</body>

2-5.学习`<strong>`和`<em>`标签

(1)<strong>和<em>标签的用途: 加强语气, <em>表示强调, <strong>表示更强烈的强调. 
                           <em>需要强调的文本</em>
                           <strong>需要强调的文本</strong>
(2)标签在浏览器中的默认样式: <em>的内容默认斜体表示, <strong>的内容默认粗体(加粗)表示.
                         可以通过css样式来删除或改变它.

2-6.使用`<span>`标签

(1)<span>标签的用途: 没有语义, 为文字设置单独样式. <span>文本</span>
(2)<span>在浏览器中的默认样式:

2-7.学习`<q>`标签

(1)<q>标签的用途: 短文本引用. <q>引用文本</q>
(2)<q>在浏览器中的默认样式: 给要引用的文本加上双引号

2-8.学习`<blockquote>`标签

(1)<blockquote>标签的用途: 长文本引用. <blockquote>引用文本</blockquote>
(2)<blockquote>标签在浏览器中的默认样式: <blockquote>的内容会前后**缩进**.

2-9.学习`<br>`标签

(1)<br>标签的用途: 在html中分行显示文本. <br/>, **空标签**
(没有html内容的标签, 只需要写一个开始标签)
(2)<br>标签在浏览器中的默认样式: 换行
(3)**注意: 在html中是忽略回车和空格的.**

2-10.学习空格` `

(1)&nbsp;的用途: 在html中显示空格. &nbsp;
(2)&nbsp;在浏览器中的用途: 空格
(3)**注意: 在html中是忽略回车和空格的.**

2-11.学习`<hr>`标签

(1)<hr>标签的用途: 添加水平横线. <hr/>, **空标签**(没有html内容的标签, 只需要写一个开始标签) 
(2)<hr>标签在浏览器中的默认样式: <hr/>默认样式为心跳比较粗, 颜色为灰色, 可以通过css样式来改变它.

2-12.学习`<address>`标签

(1)<address>标签的用途: 为网页加入地址信息. <address>联系地址信息</address>
(2)<address>标签在浏览器中的默认样式: <address>默认样式为斜体, 可以通过css样式来改变它.

2-13.学习`<code>`标签

(1)<code>标签的用途: 加入一行代码. <code>代码语言</code>
(2)<code>标签在浏览器中的默认样式: 单行代码
(3)代码:
<code>var i = i + 300;</code>

2-14.学习`<pre>`标签

(1)<pre>标签的用途: 加入多行代码. <pre>语言代码段</pre>
(2)<pre>标签在浏览器中中的默认样式: 多行代码. 
预格式化文本, **保留<pre>中内容的空格(&nbsp;)和换行符(<br/>**)
(3)代码:
<pre>    
var message="欢迎";
for(var i=1;i<=10;i++){
    alert(message);
}
</pre>

测试, 将html标签以表格的形式呈现

标签名字	用途	语法	默认样式	css修改	描述
`<blockquote>`	长文本引用	非空标签	前后缩进	描述	描述

(1)空标签 --- <br/>, <hr/>, ...
(2)非空标签 --- <span>文本内容</span>, ...

3-1.使用`<ul>`标签

(1)<ul>标签的用途: 添加列表. ul-li是没有前后顺序的信息列表.
	<ul>
	   <li>信息</li>
	   <li>信息</li>
	   ...
	</ul>
(2)<ul>标签在浏览器中的默认样式: 每项<li>前都自带一个圆点.

3-2.使用`<ol>`标签

(1)<ol>标签的用途: 添加列表. ol-li是有前后顺序的信息列表.
	<ol>
	   <li>信息</li>
	   <li>信息</li>
	   ...
	</ol>
(2)<ol>标签在浏览器中的默认样式: 每项<li>前都自带一个序号, 序号从1开始.

3-3.学习`<div>`标签在排版中的作用

(1)<div>标签在排版中的作用: 在网页制作过程中, 可以把一些独立的逻辑划分出来,
 放在一个<div>标签中, 这个<div>标签的作用相当于一个容器. <div>...</div>
(2)确定逻辑部分: 它是页面上相互关联的一组元素.

3-4.给`<div>`命名

(1)给<div>命名的用途: 为了使划分出独立的逻辑部分更加清晰, 设置一个名称, 用id表示, id唯一. 
<div id="板块名称">...</div>

3-5.学习`<table>`标签

(1)<table>标签的用途: 制作表格. 
(2)<table>标签在浏览器中的默认样式: <table>表格默认没有表格线, 可以通过css样式改变它(添加表格线). <th>标签默认文本为粗体+居中.
(3)制作表格的四个元素: <table>, <tbody>, <tr>, <th>, <td>
a.<table>...</table>: 整个表格以<table>标签开始, 以</table>标签结束
b.<tbody>...</tbody>: 如果不加<tbody>, <thead>, <tfooter>表格结构, <table>表格加载完才显示.
                      如果加上<tbody>, <thead>, <tfooter>表格结构, <tbody>包含行的内容, 下载完, 优先显示. 
c.<tr>...</tr>: 表格的一行.
d.<td>...</td>: 表格的一列.
e.<th>...</th>: 表格的一列(表格表头).

(4)<thead>, <tfooter>和<tbody>使用方法相同: <th>标签写在<thead>标签中.
<table>
  <thead>
    <tr>
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th> 
    </tr>        
  </thead>
  <tbody>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
    <tr>
      <td>三班</td>
      <td>32</td>
      <td>80</td>
    </tr>
   </tbody>
   <tfooter>
    <tr>
      <td>总计</td>
      <td>97</td>
      <td>254</td>
    </tr>
   </tfooter>
</table>

3-6.用css样式, 为表格加入边框.

(1)用途: 为表格加入边框.
(2)css代码: table tr th,td{border:1px solid #000;}

3-7.学习`<caption>`标签

(1)<caption>标签的用途: 对表格添加标题和摘要进行优化. 
					  a.摘要: 摘要的内容不会在浏览器中显示出来. 作用是增加表格的可读性(语义化), 使搜索引擎更好的读懂表格的内容. <table summary="表格简介文本"> 
					  b.标题: 描述表格内容. <table><caption>标题文本</caption>...</table>
(2)<caption>在浏览器中的默认样式: <caption>标签为表格加标题, 居中显示.
<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">
  <caption>2012年到2013年库存记录</caption>
  <tr>
    <th>产品名称 </th>
    <th>品牌 </th>
    <th>库存量（个） </th>
    <th>入库时间 </th>
  </tr>
  <tr>
    <td>耳机 </td>
    <td>联想 </td>
    <td>500</td>
    <td>2013-1-2</td>
  </tr>
  <tr>
    <td>U盘 </td>
    <td>金士顿 </td>
    <td>120</td>
    <td>2013-8-10</td>
  </tr>
  <tr>
    <td>U盘 </td>
    <td>爱国者 </td>
    <td>133</td>
    <td>2013-3-25</td>
  </tr>
</table>

4-1.学习`<a>`标签

(1)<a>标签的用途: 链接到另一个界面. <a href="目标网址" title="鼠标划过显示的文本">链接显示的文本</a>
title作用: 方便搜索引擎了解链接地址的内容(语义化更友好)
(2)<a>标签在浏览器中的默认样式: <a>标签加入后, 文字颜色默认颜色为蓝色, 可以通过css样式修改.

4-2.在新建浏览器中打开链接

(1)<a>标签在默认情况下, 链接的网页是在当前浏览器窗口中打开.
(2)<a>标签在新的浏览器窗口中打开: <a href="目标网址" target="_blank">click here!</a>

4-3.使用mailto

(1)mailto的用途: 链接Email地址, 马上向Email地址发送邮件.
(2)mailto的用法: mailto后面有多个参数, 第一个参数以"?"开头, 后面的参数每一个都以"&"分隔.
(3)mailto放在<a>标签的href属性中使用:
a.subject: 邮件主题
b.body: 邮件内容
c.cc: 抄送
d.bcc: 密件抄送
e.mailto: 收件人

例子1:
<a href="
mailto:yy@imooc.com
?subject=观了不起的盖茨比有感。
&body=你好，对此评论有些想法。
">对此影评有何感想，发送邮件给我</a>

例子2:
<a href="
mailto:yy@imooc.com
?cc=xiaoming@imooc.com
&bcc=xiaoyu@imooc.com
&subject=邮件主题
&body=邮件内容
">对此影评有何感想，发送邮件给我</a>

4-4.学习`<img>`标签

(1)<img>标签的用途: 插入图片. <img src="图片地址" alt="下载失败时的替换文本" title="鼠标划过图片时显示的文本"/> 
(2)<img>在浏览器中的默认样式: <img>标签可以是jpg, png, gif

5-1.使用`<form>`表单标签, 与用户交互

(1)<form>表单标签的用途: 与用户进行交互. 
<form>表单可以把浏览者输入的数据传送到服务器端, 这样服务器端程序就可以处理表单传过来的数据.
<form method="传送方式" action="服务器文件"/>
(2)<form>表单标签在浏览器中的默认样式: 
a.<form>标签: <form>标签是成对出现的, 以<form>开始, 以</form>结束.
b.action属性: 浏览者输入的数据被传送到的地方.
c.method属性: 数据传送的方式(get/post)
(3)!!!注意!!!: 所有的表单控件(
	文本框: <input>标签,
	文本域: <textarea>标签,
	按钮: <button>标签 或 <input type="submit" value="提交"/>
	单选框: <radio>标签,
	复选框: <checkbox>标签	
)都必须放在<form></form>标签之间, 否则用户输入的信息不会提交到服务器上
(4)<form>表格标签2个属性: method, action

5-2.文本输入框, 密码输入框(使用`<input>`标签实现)

(1)文本输入框, 密码输入框的用途: 当用户在表单中输入字母, 数字等内容时. 
<form>
   <input type="text/password" name="名称" value="文本"/>
<form>   
(2)文本输入框, 密码输入框在浏览器中的默认样式:
type:
a.当type="text"时, 输入框为文本输入框.
b.当type="password"时, 输入框为密码输入框.

name: 为文本框命名, 以备后台使用.

value: 为文本框输入默认值.
(3)<input>标签作为输入框的3个属性: type, name, value

5-3.文本域, 支持多行文本输入(使用`<textarea>`实现)

(1)<textarea>标签的用途: 支持多行文本输入.  <textarea rows="行数" cols="列数">文本</textarea>
(2)<textarea>标签在浏览器中的默认样式: 
a.<textarea>标签:  <textarea>标签是成对出现的, 以<textarea>开始, 以</textarea>结束
b.cols: 多行输入域的列数
c.rows: 多行输入域的行数
!!!注意!!! cols和rows属性可以用css样式width和height来代替: col用widht代替, row用height代替.
(3)<textarea>标签可以输入默认值: <textarea>在这里输入默认值...</textarea>
(4)<textarea>的2个属性+默认值: cols, rows, 文本作为默认值

5-4.单选框, 复选框(使用`<input>`实现)

(1)单选框, 复选框的用途: 使用表单设计调查表.
<input type="radio/checkbox" name="名称" value="值" checked="checked"/>
(2)单选框, 复选框在浏览器中的默认样式:
type:
当type="radio"时, 控件为单选框.
当type="checkbox"时, 控件为复选框.

name: 为控件命名, 以备后台使用.

value: 提交数据到服务器的值.

checked: 当设置checked="checked"时, 该选项被默认选中.
(3)<input>标签作为单选框, 复选框的4个属性: type, name, value, checked
(4)同一组的单选按钮, name属性取值一定要一致, 才能起到单选效果.
<input type="radio" name="radioLove" value="喜欢" checked="checked"/>
<input type="radio" name="radioLove" value="不喜欢"/>
<input type="radio" name="radioLove" value="无所谓"/>

5-5.下拉列表框进行单选(使用`<select>`实现)

(1)<select>标签的用途: 有效的节省网页空间. 可以单选/多选. 
<form>
   <select>
      <option value="向服务器提交的值" selected="selected">显示的值</option>
      <option value="读书">读书</option>
	  ...
   </select>
</form>
(2)<select>标签在浏览器中的默认样式: 
(3)<select>/<option>的2个属性+文本:
value: 向服务器提交的值.
selected: 设置selected="selected", 该选项默认被选中.
文本: 显示的值

5-6.下拉列表框进行多选(使用`<select>`实现)

(1)<select>标签的用途: 多选.
(2)<select>标签多选设置: <select multiple="multiple"></select>

5-7.使用提交按钮, 提交数据(使用`<input>`标签)

(1)!!!表单中有2种按钮可以使用!!!: 提交按钮 和 重置
(2)提交按钮的用途: 当用户提交表单信息到服务器时. <input type="submit" value="提交"/>
type: 只有当type值设置为submit时, 按钮才有提交作用.
value: 按钮上显示的文字.
(3)代码:
<form method="post" action="save.php">
   <label for="myName">姓名:</label>
   <input type="text" name="myName" value=" "/>
   <input type="submit" value="提交" name="submit"/>
</form>

5-8.使用重置按钮, 重置表单信息(使用`<input>`标签)

(1)重置按钮的用途: 重置表单信息到初始状态. <input type="reset" value="重置"/>
type: 只有当type值设置为reset时, 按钮才有重置作用.
value: 按钮上显示的文字.
(2)代码:
<form method="post" action="save.php">
   <label for="myName">姓名:</label>
   <input type="text" name="myName" value=" "/>
   <input type="reset" value="重置" name="resetBtn"/>
</form>

5-9.form表单中的`<label>`标签

(1)<label>标签的用途: 没有特殊效果, 作用是为鼠标用户改进了可用性. <label for="控件id名称"></label>
如果你在<label>标签内点击文本，就会触发此控件。
就是说，当用户单击选中该<label>标签时，浏览器就会自动将焦点转到和<label>标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
(2)<label>在浏览器中的默认样式: 简单的说, 就是点击<label>标签, for对应id控件响应.
<form>
    <label>你对什么运动感兴趣:</label><br/>
    <label for="run">慢跑</label>
    <input type="checkbox" id="run" checked="checked"/><br/>
    <label for="mounting">登山</label>
    <input type="checkbox" id="mounting"/><br/>
    <label for="basketball">篮球</label>
    <input type="checkbox" id="basketball"/>
</form>

总结`<input>`标签在表单控件中的应用:

<form>
   // 用途1: 文本输入框, 密码输入框
   <input type="text/password" name="名称" value="文本默认值"/>
   // 用途2: 文本域, 多行输入
   <textarea rows="行数" cols="列数">文本(默认值)</textarea>
   // 用途3: 单选框, 复选框
   <input type="radio/checkbox" name="名称" value="提交到服务器的值" checked="checked"/>
   // 用途4: 提交按钮
   <input type="submit" value="提交"/>
   // 用途5: 重置按钮
   <input type="reset" value="重置"/>
</form>

The text was updated successfully, but these errors were encountered:

253867843 added the css css学习 label Jan 16, 2019

253867843 self-assigned this Jan 16, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS+HTML基础 #3

CSS+HTML基础 #3

253867843 commented Jan 16, 2019 •

edited

Loading

CSS+HTML基础 #3

CSS+HTML基础 #3

Comments

253867843 commented Jan 16, 2019 • edited Loading

Html和CSS的关系

1-1.学习web前端开发基础技术:

1-2.HTML页面是由html标签组成的.

1-3.网页中每一个内容在浏览器中的显示, 都要存放在各种标签中.

总结: html标签 +网页内容 >>> 组成html页面 >>> 在浏览器中显示.

1-4.标签的语法:

1-5.认识html文件基本结构:

1-6.认识head标签:

1-7.HTML的代码注释:

2-1.语义化

2-2.<body>标签, 网页上显示的内容放在这里

2-3.开始学习<p>标签

2-4.学习<hx>标签

2-5.学习<strong>和<em>标签

2-6.使用<span>标签

2-7.学习<q>标签

2-8.学习<blockquote>标签

2-9.学习<br>标签

2-10.学习空格&nbsp;

2-11.学习<hr>标签

2-12.学习<address>标签

2-13.学习<code>标签

2-14.学习<pre>标签

测试, 将html标签以表格的形式呈现

3-1.使用<ul>标签

3-2.使用<ol>标签

3-3.学习<div>标签在排版中的作用

3-4.给<div>命名

3-5.学习<table>标签

3-6.用css样式, 为表格加入边框.

3-7.学习<caption>标签

4-1.学习<a>标签

4-2.在新建浏览器中打开链接

4-3.使用mailto

4-4.学习<img>标签

5-1.使用<form>表单标签, 与用户交互

5-2.文本输入框, 密码输入框(使用<input>标签实现)

5-3.文本域, 支持多行文本输入(使用<textarea>实现)

5-4.单选框, 复选框(使用<input>实现)

5-5.下拉列表框进行单选(使用<select>实现)

5-6.下拉列表框进行多选(使用<select>实现)

5-7.使用提交按钮, 提交数据(使用<input>标签)

5-8.使用重置按钮, 重置表单信息(使用<input>标签)

5-9.form表单中的<label>标签

总结<input>标签在表单控件中的应用:

253867843 commented Jan 16, 2019 •

edited

Loading

2-2.`<body>`标签, 网页上显示的内容放在这里

2-3.开始学习`<p>`标签

2-4.学习`<hx>`标签

2-5.学习`<strong>`和`<em>`标签

2-6.使用`<span>`标签

2-7.学习`<q>`标签

2-8.学习`<blockquote>`标签

2-9.学习`<br>`标签

2-10.学习空格` `

2-11.学习`<hr>`标签

2-12.学习`<address>`标签

2-13.学习`<code>`标签

2-14.学习`<pre>`标签

3-1.使用`<ul>`标签

3-2.使用`<ol>`标签

3-3.学习`<div>`标签在排版中的作用

3-4.给`<div>`命名

3-5.学习`<table>`标签

3-7.学习`<caption>`标签

4-1.学习`<a>`标签

4-4.学习`<img>`标签

5-1.使用`<form>`表单标签, 与用户交互

5-2.文本输入框, 密码输入框(使用`<input>`标签实现)

5-3.文本域, 支持多行文本输入(使用`<textarea>`实现)

5-4.单选框, 复选框(使用`<input>`实现)

5-5.下拉列表框进行单选(使用`<select>`实现)

5-6.下拉列表框进行多选(使用`<select>`实现)

5-7.使用提交按钮, 提交数据(使用`<input>`标签)

5-8.使用重置按钮, 重置表单信息(使用`<input>`标签)

5-9.form表单中的`<label>`标签

总结`<input>`标签在表单控件中的应用: