HTML学习ing

2018-11-29  本文已影响0人  皮皮鱼吖

1.html是网页内容的载体。

2.css样式是表现。

3.JavaScript是用来实现网页上的特效效果。

<h1></h1>是标题标签

<p></p>是段落标签

<img src="xx.jpg">是图片标签

标签由<和>组合起来,标签都是成对出现,分开始标签和结束标签,结束标签比开始标签多了一个/

标签之间可以嵌套,但先后顺序必须保持一致。

标签不区分大小写,但是建议小写。

<html>中依次为<head>和<body>

<html></html>称为根标签,所有网页标签都在这个中间。

<head>标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title><script><style><link><meta>等标签,

<body>标签里是网页的主要内容,<h1><p><a><img>等网页内容标签。

<head>:

<title>:网页的标题信息,它会出现在浏览器的标题栏中。

<body>:

<em></em>:字体斜体

<strong></strong>:字体加粗

<span></span>:标签是没有语义的,它的作用就是为了设置单独的样式用的,span的样式在head的style标签里面定义,在body中直接使用

<p></p>:段落标签  (<p>标签里面不能添加别的有语义的标签)

<hx></hx>:用来制作文章的标题(分别为h1,h2,h3,h4,h5,h6)

<q></q>:引用,对别人的话进行引用,会自动加双引号。

<blockquote></blockquote>:长文本引用,也是引用他人文本,但是是对长文本进行引用。

<br/>:相当于文档中的回车。xhtml1.0写法:<br /> html4.01写法:<br>

&nbsp;    代表空格

<hr>:添加水平横线 html4.01版本 :<hr>  xhtml1.0版本: <hr />

<address></address>:地址,电子邮件,签名或者文档的作者身份  浏览器上默认显示的样式为斜体而且另起一段

<code></code>:计算机专业的编程代码,插入多行代码时不能使用。多行代码可以用<pre>

<pre></pre>:加入大段代码,在pre标签中的文本通常会保留空格和换行符。(不只是为代码用的,在你需要在网页中预显示格式时都可以使用。

<ul><li></li></ul>: 使用ul,添加没有前后顺序的信息列表,ul-li是没有前后顺序的信息列表。在网页中显示的默认样式一般为:每项li前都自带一个圆点。

<ol><li></li></ol>:添加有前后顺序的信息列表,在网页中显示的默认样式一般为:每项<li>都自带一个序号,序号从1开始。

<div></div>:独立的逻辑部分划分出来,放在一个div标签中,这个div标签就相当于一个容器。用id属性为<div>提供唯一的名称,语法 <div id="板块名称"></div>

<table></table>:表格标签,可以在网页上生成一个表格。创建表格的四个元素:table:整个表格以table开始结束;tbody:如果不加<thead><tbody><tfooter>这些标签,表格会在加载完毕后才显示,如果加了这些标签,tbody包含的内容下载完优先展示,用这个标签,可以让table按结构一块块显示,不用等整个表格加载完后再显示;tr:表格的一行,有多少行就有多少个tr;td:表格的一个单元格,一行有多少个td就有多少列;th:表格头部的单元格,就是表格的表头。(table表格在没有加css样式之前是没有表格的线的,表头默认粗体居中显示。

用css为表格加入边框:

<style type="text/css">

table tr td,th{border:1px solid #000;}    //border是表格边框的宽度值 solid是边框的颜色

</style>

caption标签:为表格添加标题,标题显示在表格上方

<table summary="表格简介文本">:summary是表格的摘要,摘要不会再浏览器中显示出来

<a>标签:实现超链接,<a herf="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>  页面显示的是“链接显示文本”处的文字,鼠标滑过显示“鼠标滑过显示的文本”,点击进入“目标网址”,加a标签后文字颜色就会自动变蓝色,点击后变紫色。

<a>标签在新浏览器窗口打开:<a href="目标网址" target="_blank">click here!</a>

<a>标签利用mailto链接email地址 :

<a href="mailto:yy@imooc.com">发送邮件</a>  mailto发送邮件

<a href="mailto:yy@imooc.com?cc=imocc@imooc.com">发送邮件</a>    cc是抄送

<a href="mailto yy@imooc.com?bcc=pp@imooc.com">发送邮件</a>    bcc密送

<a href="mailto yy@imooc.com;aa@qq.com?cc=bb@qq.com;cc@qq.com">发送</a>  多个接收人或者抄送人或者密送人时用;分隔符分隔

<a href="mailto=aa@qq.com?subject=发送邮件">发送邮件</a>  subject是邮件标题

<a href="mailto=aa@qq.com?body=hhh">发送邮件</a>    body是邮件的内容

mailto后面有很多参数时第一个为?再后面的用&来分隔。浏览器中显示蓝色可点击态

<img>标签:插入图片  <img src="图片地址" alt="下载失败时候的替换文本" title="提示文本"> (src标识图片的位置,alt指定图像的描述性文本,当图像不可见的时候可看到该属性指定的文本;title鼠标滑过时显示的文本。图像可以是gif,png,jpeg格式。

<!--注释文字-->:注释信息

表单标签:<form method="传送方式" action="服务器文件"></form>

<form></form>:标签成对出现

action:浏览者输入的数据被传送到的地方,比如一个PHP页面

method:数据传送方式(get/post)

<label for="username">用户名:</label>  :显示文本“用户名”,对应的变量名为username

<input type="text" name="username" />:文本输入框,输入的值赋给username

<label for="pass">密码:</label>  :显示文本“密码”,对应的变量名为pass

<input type="password" name="pass" /> 密码输入框,输入的值赋给pass

<input type="submit" value="确定" name="submit" />

<input type="reset" value="重置" name="reset" />

<textarea rows="行数" cols="列数">文本</textarea>

单选框、复选框:

<input type="radio/checkbox" value="" name="" checked="checked"/>

type:radio时,控件为单选框;checkbox时,控件为复选框

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

name:为控件命名,单选时name一定要一致,这样同一组的单选按钮才能起到单选的作用

checked:当为checked=“checked”时,该选项为默认选中

上一篇下一篇

猜你喜欢

热点阅读