初识HTML

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

2、    在html里的注释:<--! 注释的内容   -->

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

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

head里的标签:

标题:

<title>z赵凡</title>

标题旁边的图标

<link rel="shortcut icon" href="11.ico"> :shortcut icon是固定内容,这样就表示设置图标

<link rel="stylesheet" type="text/css" href="css/common.css" >:stylesheet表示要设置css

编码:

<meta charset="UTF-8">用于定义编码

刷新:

<meta http-equiv="refresh" Content="3">默认3秒钟刷新一次页面

跳转:

<meta http-equiv="refresh" Content="3; Url=http://www.baidu.com" /> 默认3秒钟跳转到百度

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

关键字:

<meta name="keywords" content="linux,python,运维">

描述:

<meta name="description" content="汽车之家为您提供最新汽车报价,汽车图片,汽车价格大全 "/>

兼容IE:

<meta http-equiv="X-UA-Compatible" content="IE=IE7;IE=IE8;IE=9" />

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="submit" value="提交">

<input type="button" 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代码例子:

<p>爱好</p>

足球:<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">

上传文件与重置

<p>上传文件</p>

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

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

大输入框textarea

<textarea name="member">默认值</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标签

<img src="34_56.gif">

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

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

<a href="http://www.baidu.com">

  <img src="34_56.gif">

</a>

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

<a href="http://www.baidu.com">

     <img src="../34_56.gif" alt="图片1" >

</a>

效果如下:

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

<a href="http://www.baidu.com">

     <img src="34_56.gif" alt="图片1" title="图片1" >

</a>

列表标签

<ul>

   <li>苹果</li>

   <li>三星</li>

   <li>诺基亚</li>

</ul>

效果图如下:

<ol>

    <li>香蕉</li>

    <li>苹果</li>

    <li>桃子</li>

</ol>

效果图如下:

<dl>

    <dt>水果</dt>

       <dd>苹果</dd>

       <dd>香蕉</dd>

       <dd>梨</dd>

    <dt>蔬菜</dt>

       <dd>白菜</dd>

       <dd>萝卜</dd>

       <dd>西红柿</dd>

</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标签搭配使用

代码例子:

<label for="username">用户名</label>

<input id="username" type="text" name="user" />

打开的效果图:

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

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里写如下代码:

<link rel="stylesheet" href="comm.css">

设置边框

<div style="border: 1px solid red;">aaaa</div>

设置宽度的百分比

<div style="height: 100px;width: 80%;border: 1px solid red;">aaaa</div>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴小龙同學

Android Design Support Library之CollapsingToolbarLayout

效果预览 ? 使用方法 Gradle 中添加下面依赖 1compile 'com.android.support:design:23.1.0' Collap...

27210
来自专栏娱乐心理测试

小程序如何引入外部字体(方法详解)

3175
来自专栏大数据钻研

HTML基础复习(一)

HTML:超文本标记语言(HyperText Markup Language),不是一种编程语言,是标记语言 HTML元素: <p>段落</p> HTML标签:...

3056
来自专栏Crossin的编程教室

关于 Git 你不知道的十件事

git log -p FILE 查看README.md的修改历史,例如: > git log -p README.md git log -S’PATTERN’ ...

2485
来自专栏程序员八阿哥

开心学前端(一):HTML、CSS入门(1)1.1 html概述及html文档基本结构1.2 html标签入门

HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语...

591
来自专栏跟着阿笨一起玩NET

利用vertical-align:middle实现在整个页面居中

如果想让一个div或一张图片相对于整个页面居中,用vertical-align:middle可以很简单地解决。

701
来自专栏DeveWork

WordPress 在后台文章和页面列表显示对应的ID

在WordPress 中,每一篇文章及每一个页面都有一个独一无二的id 。在开发主题或者插件的时候可能有需要获取相对应的文章或者页面id,例如在展示特色文章幻灯...

18310
来自专栏欧阳大哥的轮子

iOS的MyLayout布局体系--浮动布局MyFloatLayout

    在MyLayout的6大布局中,每种布局都有不同的应用场景。且每种布局的子视图的约束机制不一样:线性布局MyLinearLayout、表格布局MyTab...

813
来自专栏小李刀刀的专栏

动态实现指定图片半透明及鼠标事件

说明:在不改变HTML代码的前提下,通过CSS和JavaScript,对指定的图片实现半透明效果。并为该图片添加鼠标滑过和滑出特效。 具体实现: 1.假设我们要...

2689
来自专栏前端学习心得

如何居中一个元素(终结版)

利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和...

1012

扫码关注云+社区