学习JavaScript之html详解（2）

2018-03-18  本文已影响0人  付凯强

0. 建议先阅读关于html的第一篇博客

1. 打印Hello World

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>制作我的第一个网页</title>
    </head>
    <body>
        //输入Hello World
        <h1>Hello World</h1>
    </body>
</html>

2. 为Hello World添加样式

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Html和CSS的关系</title>
        <style type="text/css">
        /*添加样式*/
        h1{
            font-size:12px;
            color:#930;
            text-align:center;
        }
        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

3. 认识html标签

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>认识html标签</title>
    </head>
    <body>
        <h1>勇气</h1>
        <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
        <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
        <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
    </body>
</html>

1. <h1></h1>就是标题标签.
2. <p></p>是段落标签.
3. <img src="1.jpg">是图片标签.

4. 标签的语法

1. 标签由英文尖括号<和>括起来，如<html>就是一个标签.
2. html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个。
如：
（1） <p></p>
（2） <div></div>
（3） <span></span>
3. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面.
4. HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准.

 <p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。 </p>

5. 认识html文件基本结构

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

1. <html></html>称为根标签，所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。

3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

6. 认识head标签

文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者.

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

7. 代码注释

<!--注释文字 -->

8. 各种标签的用途

在网页上要展示出来的页面内容一定要放在body标签中.

<p>:段落标签
<p>段落文本</p>

h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题

<em>需要强调的文本</em>  
<strong>需要强调的文本</strong>

为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。

<style>
span{
    color:blue;
}
</style>

确实也配的上那句<q>聪明秀出为之英，胆略过人为之雄</q>。

<blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。</blockquote>

暗淡轻黄体性柔，<br>

来源：作文网&nbsp;&nbsp;作者：为梦想而飞 

<hr>

联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份

<address>
公司地址：<address>北京市西城区德外大街10号</address>

<p>我们可能知道水平渐变的实现，类似这样：<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code>

<pre>
var message="欢迎";
for(var i=1;i<=10;i++)<br>
{<br>
    alert(message); <br>
}<br>
</pre>

<ul><li>我的第一个列表信息</li></ul>
<ul><li>我的第二个列表信息</li></ul>
<ul><li>我的第三个列表信息</li></ul>

<ol>
   <li>我的第一个列表信息。</li>
   <li>我的第一个列表信息。</li>
</ol>

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。

<body>
    <div>
    <h2>热门课程排行榜</h2>
    <ol>
        <li>前端开发面试心法 </li>
        <li>零基础学习html</li>
        <li>javascript全攻略</li>
    </ol>
    </div>
    <div>
    <h2>最新课程排行</h2>
    <ol>
        <li>版本管理工具介绍—Git篇 </li>
        <li>Canvas绘图详解</li>
        <li>QQ5.0侧滑菜单</li>
    </ol>
    </div>
</body>

<body>
<div id="hotList">
   <h2>热门课程排行榜</h2>
    <ol>
       <li>前端开发面试心法 </li>
      <li>零基础学习html</li>
       <li>javascript全攻略</li>
    </ol>
</div>
<div id="learn ingInstructed">
    <h2>web前端开发导学课程</h2>
    <ul>
       <li>网页专业名词大扫盲 </li>
       <li>网站职位定位指南</li>
       <li>为您解密Yahoo网站制作流程</li>
    </ul>
</div>
</body>

table、tbody、tr、th、td

<tbody>…</tbody>：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。

<th>…</th>：表格的头部的一个单元格，表格表头

table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

表头，也就是th标签中的文本默认为粗体并且居中显示

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容

<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">
  <caption>2012年到2013年库存记录</caption>

1922年的春天，一个想要成名名叫尼克•卡拉威（<a href="http://www.m1905.com/mdb/star/3316/">托比•马奎尔Tobey Maguire</a> 饰）的作家

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

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

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。

<img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" title="电影介绍"> 

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

<form  method="传送方式"   action="服务器文件">

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ： 数据传送的方式（get/post）。

<form>
      <label for="username">用户名:</label>
      <input type="text"  name="username" id="username" value="" />
      <label for="pass">密码:</label>
      <input type="password"  name="pass" id="pass" value="" />    
      <input type="submit" value="确定"  name="submit" />
      <input type="reset" value="重置" name="reset" />
</form>  

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。

<form  method="post" action="save.php">
    账户: 
        <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>

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

1、type:
   当 type="radio" 时，控件为单选框
   当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中

注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用

<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender" />
    <label>女</label>
    <input type="radio" value="2"  name="gender" />
</form>

<body>
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>
</body>

selected="selected"：
设置selected="selected"属性，则该选项就被默认选中

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

当用户需要提交表单信息到服务器时，需要用到提交按钮.

<input   type="submit"   value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
alue：按钮上显示的文字

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

<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" />
  <br />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>
上一篇下一篇

猜你喜欢

热点阅读