鱼C论坛

 找回密码
 立即注册
查看: 3635|回复: 0

[学习笔记] html《》

[复制链接]
发表于 2017-12-26 01:05:03 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 py大神 于 2018-1-1 23:14 编辑

Html和CSS的关系
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。



标签
h p header title body html 都叫标签。一般后面的加‘/’表示闭合标签。
有半闭合标签和完全闭合标签,如<html></html>是完全闭合标签,成对出现。而< meta charset="utf-8"/>是半闭合标签。
标签内包含的内容

总结一下,可以这么说,网页中每一个内容在浏览器中的显示,都要存放到各种标签中。

<!DOCTYPE html>     HTML5的版本声明

<body></body>        只有body标签内的内容才能真正显示在浏览器窗口中。

<head></head>        除了显示之外的内容

<html></html>                告诉浏览器,这是一个html标签

<title></title>                告诉浏览器,这是我的标题。
文本格式化标签:
        <b>                定义粗体文本
               
        <em>        定义着重文字        效果:斜体。区别:虽然和<i>标签一样都是斜体,但<em>的语义是强调,是表达元素,而<i>的语义是无意义的倾斜,是视觉元素。
       
        <i>                定义斜体文字

        <small>                定义小号字

        <strong>                定义着重语气

        <sub>                上标字

        <sup>                下标字

        <ins>                插入字        效果:会在字体底部加上下划线。

        <del>                删除字        效果:会在字体上加上下划线,表示删除。
计算机输出标签:
        <code>                定义计算机代码

        <kbd>                定义键盘码

        <samp>                定义计算机代码样本

        <var>                定义变量

        <pre>                定义预格式文本

引文,引用,标签定义:
        <abbr>                定义缩进

        <address>                定义地址

        <bdo>                定义文字方向

        <blockquote>                定义长文本的引用

        <q>                定义短的引用语

        <cite>                定义引用,引证

        <dfn>                定义一个定义项目


属性:每个标签都会有一堆属性,来描述这个标签的一些功能。

所有标签共有的属性:
        class                为html元素定义一个或多个类名(classname)(类名从样式文件引入)(很多个标签都可以用同一个类的属性)
        id        定义元素唯一的id(不同的标签里不能有相同的id名字,相同的更不行)
        style                规定元素的行内样式(inline style)(样式)
        title                描述了元素的额外信息(作为工具条实用)(鼠标放上去可以显示title信息)

标签自己的属性:
        如:<a href=""></a>
                <img src="" />

写法:
        <h1 id="" class="" style="" title="">标题一</h1>

链接:<a>
        可以给任何一个html元素添加链接,可以被点击,跳转到某个地址。
        用法:任何一个元素上面,想让用户点击,跳转到某个页面,就可以使用

图片:<img width="可以指定宽度,如:300px",length="可以指定长度,如:200px">当只指定宽度或者高度时,另一个会等比例变化。最好同时指定宽度和高度,并且按照图片的原宽高               
                等比例缩小或者放大。(px:像素)
        作用:显示一张图片       
        用法:任何想显示图片的地方,通常还会给图片加上链接。
        当图片在代码的同级目录中时,只需要加上图片名字就行,当不在时,要用绝对路径。
        <img src="../目录">表示代码所在目录的上一级目录
        <img src="./目录">同样表示代码所在目录

列表:
        无序列表(常用):
                        <ul>
                                <li></li>
                                <li></li>
                        </ul>
        有序列表(用的少):
                        <ol>
                                <li></li>
                                </li></li>
                        </ol>
        自定义列表(不怎么用):
                        <dl>
                                <dt></dt>
                                <dd></dd>
                                <dd></dd>
                                <dt></dt>
                                <dd></dd>
                                <dd></dd>
                        </dl>

表格:
        写法:
                <table border="" cellspacing="内边框" cellpadding="外边框">详见注释1
                        <tr>
                               
                                <th>表格头部一(会加粗显示)</th>
                                <th>表格头部二(会加粗显示)</th>
                        </tr>

                        <tr>
                                <td>第一行,第一列</td>
                                <td>第一行,第二列</td>
                        </tr>
                       
                        <tr>
                                <td>第二行,第一列</td>
                                <td>第二行,第二列</td>
                        </tr>
                </table>
        用法:1.需要用表格显示的内容
                  2.可以用来布局页面,但是现在已经用div布局页面了

区块:html中标签中包含的称为元素。元素分为两种类型,一种是块级元素,一种是内联元素。
        块级元素:div是指一块内容的标签,div不显示任何东西,用来包含其他标签,成为一块内容,需要配合CSS样式来进行页面布局。
                        如:h1 p ul table 都是块级元素,会以新行来开始。
        内联元素:
                        span标签用来包裹文字
                        如:b td a img 都是内联元素,通常不会以新行开始。

表单:
        表单是用来在网页上显示给用户输入的标签,然后提交给后台服务器进行处理。
        语法:<form action="" method=""></form>action:表单提交地址。method:表单提交形式(有post和get两种)。通过form标签把表单元素包起来
        表单元素:
                        文本输入框:<input type="text" name="" value="默认值" />
                        密码输入框:<input type="password" name="" value="" placeholder="提示用户信息">(placeholder是html5的新方法)
                        多行文本:<textarea name="">这里是介绍的文字</textarea>
                        单选:<input type="radio" name="" value="" />
                        多选:<input type="checkbox" name="" value="">
                        下拉列表:<select name="">
                                                <option value=""></option>
                                                <option value=""></option>
                                        </select>
                        提交按钮:<form name="input" action="" method="">
                                        username:<input type="text" name="">
                                        <input type="submit" value="Submit">
                                        </form>

框架:
        框架(iframe)可以在一个网页中的某一块内容中打开另一个网页。
        写法:<iframe src="" width="" height="" name=""></iframe>
                如:<iframe src="http://www.baidu.com" width="500" height="500" name="百度网址"></iframe>就可以在网页的某一块区域打开百度的页面
                当有多个iframe时就可以在用一个页面中浏览多个网页。
                现在这个已经用的不多了。

头部:
        head标签里还要哪些?
                <base href="" target="_blank">是页面中所有的连接的默认地址。
                <meta name="keyword" content="">这是做SEO优化时用到的。SEO是让百度谷歌等搜索引擎能更快的找到你的网址的技术。
                <meta name="description" content="">这也是做SEO优化时用到的。主要是描述你的网站是干什么用的。
                <meta name="author" content="">网页作者
                <meta http-equiv="refresh" content="30">这个可以让页面30秒刷新跳转一次
                <link rel="stylesheet" type="text/css" href="mystyle.css">引用CSS样式。
注释1:单元格(cell) -- 表格的内容
           单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
           单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离

<h>标题标签</h>标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。标题标签的样式都会加粗,h1标签字号最大,h2标签字号相对h1要小,以此类推h6标签的字号最小。并且标题会自动换行。

<p>段落标签</p>

<title>网页标题</title>

<!--注释文字 -->代码注释语法

<q>简短文本的引用</q>

<blockquote>长文本的引用</blockquote>浏览器对<blockquote>标签的解析是缩进样式

<br>换行。语法:xhtml1.0写法:<br />html4.01写法:<br>

<hr />在短落后添加横线。语法:html4.01版本 <hr>xhtml1.0版本 <hr />

&nbsp;我们已经讲解过在html代码中输入空格、回车都是没有作用的&nbsp要想输入空格,必须写入&nbsp;一个代表一个空格,注意后面的分号

<address>联系地址信息</address>一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。

<code>var i=i+300;</code>在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了。注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。

<pre></pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。就不用每一行加上<br>和&nbsp标签了。<pre> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
语法:
<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始,
语法:
<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

<dir>...</dir>在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。
确定逻辑部分:
什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器。

<div  id="版块名称">…</div>这里注意使用双引号。在上一小节中,我们把一些标签放进<div>里,划分出一个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。

创建表格的四个元素:
table、tbody、tr、th、td
1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)
3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
5、<th>…</th>:表格的头部的一个单元格,表格表头。
6、表格中列的个数,取决于一行中数据单元格的个数。
总结
1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
2、表头,也就是th标签中的文本默认为粗体并且居中显示

表格还是需要添加一些标签进行优化,可以添加标题和摘要
摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
    语法:<table summary="表格简介文本">
标题
用以描述表格内容,标题的显示位置:表格上方。
     语法:
<table>
    <caption>标题文本</caption>

<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。
        语法:<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。
如下代码:
<a href="目标网址" target="_blank">click here!</a>

使用mailto在网页中链接Email地址
<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示: 52da4f2a000150b714280550.jpg

注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
下面是一个完整的实例: 52da52200001e00e07930061.jpg

<img>标签来插入图片。
语法:
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
讲解:
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件。

网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
语法:
<form   method="传送方式"   action="服务器文件">
讲解:
1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。
2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method : 数据传送的方式(get/post)。
<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>
注意:
1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)。
2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。

当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。
语法:
<form>
   <input type="text/password" name="名称" value="文本" />
</form>
1、type:
   当type="text"时,输入框为文本输入框;
   当type="password"时, 输入框为密码输入框。
2、name:为文本框命名,以备后台程序ASP 、PHP使用。
3、value:为文本输入框设置默认值。(一般起到提示作用)
举例:
<form>
  姓名:
  <input type="text" name="myName">
  <br/>
  密码:
  <input type="password" name="pass">
</form>

当用户需要在表单中输入大段文字时,需要用到文本输入域。
语法:
<textarea  rows="行数" cols="列数">文本</textarea>
1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。
2、cols :多行输入域的列数。
3、rows :多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。
举例:
<form  method="post" action="save.php">
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>
注意:代码中的<label>标签在本章5-9中讲解。
在浏览器中显示结果:
52e5b4040001f4af05760367.jpg
注意这两个属性可用css样式的width和height来代替:col用width、row用height来代替。(这两个css样式在以后的章节会讲解)

<select>
        <option value="提交值" selected="selected">选项名</option>
</select>
下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选
设置selected="selected"属性,则该选项就被默认选中。

下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。

在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。
语法:
<input   type="submit"   value="提交">
type:只有当type值设置为submit时,按钮才有提交作用
value:按钮上显示的文字
举例:
52e613350001461604820109.jpg
在浏览器中显示的结果:
52e6126f0001496a04480218.jpg

当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
语法:
<input type="reset" value="重置">

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
语法:
<label for="控件id名称">
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
例子:
<form>
  <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

评分

参与人数 1荣誉 +6 鱼币 +6 贡献 +6 收起 理由
小甲鱼 + 6 + 6 + 6 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 12:53

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表