关于HTML的学习;

发布时间:2020-08-27编辑:dyy阅读(835)

以前学过的用来创建网页的超文本标记语言(HTML);
HTML是一种标记语言,使用标记标签来描述网页
构成HTML的基本元素:
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

在HTML标签(元素)中基本是成对出现的,含开始标签和结束标签,中间则是这个标签的作用比如:<p>p标签在HTML页面中显示的是段落的意思</p>;<h1></h1>-<h6></h6>标签来定义HTML的标题,标签中的数值越小,标题的字体越大,数值越大,字体越小;<br>换行;

<a href=“”></a>链接是通过标签 <a> 来定义的,href 属性中指定链接的地址
<img src=“”width=“”height=""/>图像是通过标签 <img> 来定义的,src指定图片的地址,width指定图片宽度,height指定图片高度
<hr>创建水平线,分隔内容
<b>,<en>,<i>,<small>,<strong>,<sub>,,<ins>,<del>定义粗体文本;定义着重文字;定义斜体字;定义小号字定义加重语气定义下标字定义上标字定义插入字定义删除字

<abbr title></abbr>

<acronym title></acronym>

<bdo dir="rtl"></bdo>

<q></q>


<pre></pre>

代表实现缩写,

表首字母缩写;


文字从右到左显示;

短的引用

长的引用

 pre 标签对空行和空格进行控制。

<button>定义一个按钮
<caption>定义表格的标题
<time datetime>规定日期/时间。另一种方式,则是由元素的内容给定日期/时间
form actionform创建供用户输入的 HTML 表单,action规定当提交表单时向何处发送表单数据
<div>定义 HTML 文档中的一个分隔区块或者一个区域部分。

input type标签规定了用户可以在其中输入数据的输入字段,

<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变,取决于 type 属性

select来创建下拉列表。
<option>定义下拉列表中的一个选项
<optgroup>标签经常用于把相关的选项组合在一起
style规定元素的行内样式

有序列表                                                                无序列表

<ul>                                                                        <ol>

       <li></li>                                                                 <li></li>

       <li></li>                                                                  <li></li>

       <li></li>                                                                  <li></li>

</ul>                                                                         </ol>



HTML的自定义列表

<d1>

      <dt></dt>                   blob.png           blob.png

      <dd></dd>

      <dt></dt>

       <dd></dd>

html<base>元素:描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接 <base href="//www.runoob.com/images/" target="_blank"> 

<link> 标签定义了文档与外部资源之间的关系通常用于链接到样式表

<link rel="stylesheet"  type="text/css"   href="mystyle.css">

<script>标签用于加载脚本文件;

HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性

HTML <span> 元素是内联元素,可用作文本的容器 当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性 <p>我的有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛

blob.png

html创建表单和输入:用于收集不同类型的用户输入

<form>标签制作表单;

1.文本域;文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容

blob.png      blob.png    blob.png      blob.png

2.密码字段;密码字段通过标签<input type="password"> 来定义:

单选按钮:<input type="radio"> 标签定义了表单单选框选项

<input type="radio" name="sex" value="male"(表示单选的名字)>Male,blob.png

<input type="radio" name="sex" value="female">Female

复选框:<input type="checkbox">多重选择

<input type="checkbox" name="vehicle" value="Bike">I have a bikeblob.png

<input type="checkbox" name="vehicle" value="Car">I have a car

下拉列表:<select name="">

                       <option ></option>       blob.png     blob.png

                       </select> 

  button创建按钮  <input type="button" value="Hello world!">             blob.png

   <legend></legend>带边框的表单   <legend>Personal information:</legend>    blob.png

    HTML脚本    :<script> 标签用于定义客户端脚本    最常用于图片操作、表单验证以及内容动态更新   <script>  document.write("Hello World!")  </script>blob.png

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容blob.png

事件响应

function myFunction(){document.getElementById("demo").innerHTML="Hello !"}

<button type="button" on\="myFunction()">点我</button>点击按钮后调用myfunction

blob.pngblob.png

HTML框架:通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面

iframe    <iframe src="URL"></iframe>   height 和 width 属性用来定义iframe标签的高度与宽度   <iframe src="demo_iframe.htm" width="200" height="200"></iframe>  

去除iframe是否显示边框frameborder 属性

iframe src="demo_iframe.htm" width="200" height="200" frameborder="0">blob.png


标签

评论