初识HTML-阿里云开发者社区

初识HTML

2016-11-11 991

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 1、一套规则，浏览器认识的规则。 2、在html里的注释： 3、只能有一个html标签、head标签、body标签 4、在head标签里写的所有标签内容是看不见的，除了title标签 head里的标签：标题： z赵凡标题旁边的图标：shortc...

1、一套规则，浏览器认识的规则。

2、在html里的注释：<--！注释的内容 -->

3、只能有一个html标签、head标签、body标签

4、在head标签里写的所有标签内容是看不见的，除了title标签

head里的标签：

标题：

标题旁边的图标

编码：

刷新：

跳转：

所以这里的meta有主要的两个功能就是刷新和跳转

关键字：

描述：

兼容IE:

5、标签分类：

自闭和标签：meta标签

主动闭合标签

6、 body标签

特殊的符号：

&nbsp空格，&gt,&lt

p标签：表示段落，默认段落之间是有间隔的

br：换行

H标签：标题，从H1-H6，效果：

span标签：空白标签

效果：

关于标签的小总结：

所有标签分为：

块级标签：h标签（加大加粗）、p标签（段落和段落有间距），div标签（白板）

行内标签（内联标签）：span标签（白板）、a标签

div标签

标签之间可以嵌套

标签存在的意义：定位操作、js、css操作

input系列

<input type="text" name="user">:name属性，value可以设置默认值

<input type="password" name="pwd">：name属性，value可以设置默认值

单选框

<input type="radio" value="gender"> 单选框 value，name属性（name相同则互斥）checked="checked"表示默认值

html代码例子：

<p>请选择性别</p>

男：<input type="radio" name="gender" value="1">

女：<input type="radio" name="gender" value="2">

复选框

<input type="checkbox" name="favor" value="1">：复选框value, checked="checked"，name属性（批量获取数据）

html代码例子：

足球：<input type="checkbox" name="favor" value="1">

篮球：<input type="checkbox" name="favor" value="2">

乒乓球：<input type="checkbox" name="favor" value="3">

网球：<input type="checkbox" name="favor" value="4">

上传文件与重置

<input type="file" name="fname">：依赖form表单的一个属性：enctype="multipart/form-data"

大输入框textarea

select标签（下来框）

name,内部option value提交到后台

select="selected"表示默认选择

代码例子：

<select name="city">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3" selected="selected">南</option>
    <option value="4">成都</option>
    <option value="5">重庆</option>
</select>

上述只能单选

下面方式实现多选，代码例子：

size用于显示多个，multiple用于多选

<select name="city" size="10" multiple="multiple">
    <option value="1">北京</option>
     <option value="2">上海</option>
    <option value="3" selected="selected">南京</option>
    <option value="4">成都</option>
    <option value="5">重庆</option>
</select>

a标签：

跳转：

<a href="http://www.baidu.com">百度</a>这种默认情况下是在当前标签打开此网页，如果改为如下：

<a href="http://www.baidu.com" target="_blank">百度</a>这样就会在一个新的标签打开网页

锚：实现点击目录跳转到相应的内容，实现的方式是通过给标签设置不同的id，然后在a标签的href属性设置#id

关于锚的一个实现例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <div id="i1" style="height: 600px">第一章的内容</div>
    <div id="i2" style="height: 600px">第二章的内容</div>
    <div id="i3" style="height: 600px">第三章的内容</div>
    <div id="i4" style="height: 600px">第四章的内容</div>
</body>
</html>

实现的效果就是通过点击相应的章节目录跳转到相应的内容

img标签

就可以实现在页面上显示图片

如果想要实现点击图片跳转，通过a标签实现：

</a>

如果图片不存在了，在图片位置显示文字，通过alt参数实现：

</a>

效果如下：

如果想要鼠标放在图片上显示内容，通过title参数实现：

</a>

列表标签

<ul>

</ul>

效果图如下：

<ol>

</ol>

效果图如下：

<dl>

</dl>

实现的效果：

表格标签

代码例子：

<table border="1">
     <tr>
         <td>主机名</td>
         <td>端口</td>
         <td>操作</td>
     </tr>
     <tr>
          <td>192.168.1.1</td>
          <td>80</td>
          <td>添加</td>
     </tr>
     <tr>
          <td>192.168.1.2</td>
          <td>81</td>
          <td>添加</td>
     </tr>
</table>

实现效果：

但是上面的表格不是特别规范，下面是规范的表格写法：

<table border="1">
     <thead>
           <tr>
               <th>表头1</th>
               <th>表头2</th>
               <th>表头3</th>
               <th>表头4</th>
            </tr>
    </thead>
<tbody>
            <tr>
               <td>1</td>
               <td>2</td>
               <td>3</td>
               <td>4</td>
            </tr>
<tbody>
 </table>

这里的thead 专门用于写表头，th用于写表头中的具体信息

列表里的合并单元格：

通过colspan="2"参数实现横向合并

通过rowspan="2"实现纵向合并

label标签

通过和input标签搭配使用

代码例子:

打开的效果图：

鼠标点击用户名输入框会自动获取光标

fieldset标签

<fieldset>
    <legend>登录</legend>
    <label for="username">用户名</label>
    <input id="username" type="text" name="user" />
    <p></p>
    <label for="password">密码</label>
    <input id="password" type="password" name="pwd" />
 </fieldset>

实现的效果：

7、 CSS

在标签属性上设置style样式
id选择器。写在head里面，style标签中写样式

id选择器例子：

<style>
#i1 {
background-color: chartreuse;
         height: 100px;
}
style>

然后在下面标签中通过id调用这个style就可以了

class选择器。同样是写在head里，style标签中写样式，但是这次不通过id,下面是例子：(这种方式是用的最多的)

<style>
   .c1 {
            background-color: aqua;
            height: 100px;
        }
<style>

这种方式下面的标签在调用的时候是通过class调用

标签选择器

<style>
   div {
            background-color: black;
            color: aliceblue;}
<style>

这样的效果就是所有的div标签都会应用上面的这个样式

层级选择器，通过空格分隔例子：

<style>
   span div {

            background-color: black;
            color: aliceblue;
        }
<style>

这样span标签下的div标签就会应用上面的这个样式

组合选择器，通过逗号分隔

<style>
    #i1,#i2,#i3,.c1 {
            background-color: chartreuse;
            color: red;
        }
<style>

这样id=i1,i2,i3以及class=c1的都会应用上面的样式

属性选择器，对选择到的标签，再通过属性进行一次筛选

<style>
    input[type="text"]{
            width: 100px;
            height: 200px;
        }
<style>

这样就会找到input标签并且type=“text”的应用上面的样式

8、 css优先级

标签上style优先，编写顺序，就近原则

从上到下下面的优先级最高

我们可以将css文件写入到一个文件，然后让其他都能用

调用的方式：

在head里写如下代码：

设置边框

设置宽度的百分比

text-align: center; 用于设置水平居中

line-height: 100px">aaaa</div>用于设置垂直居中，根据标签高度

font-weight:600; 字体加粗

font-size 字体大小

9、 float

<div style="width: 20%;background-color: red;float: left">aaa</div>
 <div style="width: 80%;background-color:blue;float: left">bbb</div>

这样就可以实现让块级标签在一行显示

10、 display

none：让标签消失

inline

block

inline-block:具有inline，默认自己有多少占多少

具有block，可以设置高度，宽度，padding,margin

行内标签：无法设置高度，宽度，padding,margin

块级标签：设置高度，宽度、padding,margin

所有的努力都值得期许，每一份梦想都应该灌溉！

初识HTML

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

初识HTML

热门文章

最新文章

相关课程

相关电子书

相关实验场景