Html学习

时间  2019-11-25
标签 html 学习 栏目 HTML 繁體版
原文   原文链接

1、HTML简介

第一个html：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魑魅魍魉</title>
　　<link rel="icon" href="img/mobile-icon.png" type="img/x-ico" />   #head里面小图标
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
    <h1>个人第一个标题</h1> 
    <p>个人第一个段落。</p>
</body>
</html>

 

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落
  • <a>元素定义一个超连接
  • 注释：  <!--  注释的内容  -->

注：标签的分类（html

块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）编程

一、Meta标签：

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词：
一、页面编码（告诉浏览器是什么编码）
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

二、刷新和跳转
<meta http-equiv=“Refresh” Content=“30″>
<meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

三、关键词
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

四、描述
<meta name="description" content="免费 Web & 编程 教程">

二、P 和 Br及Span

p表示段落，默认段落之间是有间隔的！浏览器

br 是换行app

Span是行内ide

三、a标签

<a href="http://www.baidu.com" target="_blank">百度</a>
target属性，_black表示在新的页面打开

 锚：字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <a href="#1">第一章</a>
        <a href="#2">第二章</a>
        <a href="#3">第三章</a>
        <a href="#4">第四章</a>
        <div id="1" style="height:600px;">第一章</div>
        <div id="2" style="height:600px;">第二章</div>
        <div id="3" style="height:600px;">第三章</div>
        <div id="4" style="height:600px;">第四章</div>
</body>
</html>

四、H 标签

<h1>H标签</h1>

H1

H2

H3

H4

H5
H6

五、input标签：

示例1：ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <form action="http://localhost:8888/index" method="get">
         <select name="city" multiple="multiple" size="10">
             <option value="1">北京</option>
             <option value="2">天津</option>
             <option value="3">石家庄</option>
             <option value="4">南京</option>
             <option value="5">成都</option>
             <option value="6">哈尔滨</option>
         </select>
         <input type="text" name="user" value="chengcuichao"/>
         <input type="password" name="pwd" value="ccc949885111"/>
         <input type="button" value="登陆1" />
         <p>请选择：</p>
         男<input type="radio" name="sex" checked="checked"/>
         女<input type="radio" name="sex"/>
         <p>爱好：</p>
         足球<input type="checkbox" name="like" checked="checked">
         篮球<input type="checkbox" name="like" checked="checked">
         羽毛球<input type="checkbox"  name="like">
         乒乓球<input type="checkbox"  name="like">
         <p>上传文件</p>
         <input type="file" name="filename">
         <p></p>
         <textarea name="text">默认值</textarea>
         <input type="submit" value="提交" />
         <input type="reset" value="重置" />
     </form>
</body>
</html>

 实例2：搜索引擎

将搜索转发到百度搜索：
  <form action="https://www.baidu.com/s?">
       <input type="text"  style="width: 400px;height: 30px" name="wd"/>
       <input type="submit" style="width: 75px;height: 34px;" value="百度一下"/>
  </form>

详解：编码

一、input系列 + form标签：          
input type='text'     - name属性，value="user1"（默认填写帐户） 
input type='password' - name属性，value="赵凡" （默认填写密码）
input type='submit'   - value='提交' 提交按钮，表单
input type='button'   - value='登陆' 按钮          
input type='radio'    - 单选框 value，checked="checked"（默认被选中），name属性（name相同则互斥）
input type='checkbox' - 复选框 value, checked="checked"（默认选中），name属性（批量获取数据）
input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"
input type='rest'     - 重置
二、textarea标签：    
<textarea >默认值</textarea>  - name属性,默认值放中间。
三、select标签：
select标签            - name,内部option value, 提交到后台，size（默认显示几个），multiple=‘multiple’（能够多选）
四、optgroup标签       
optgroup标签          - label（层级名），

 六、Img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <a href="http://www.baidu.com">
      <img src="s2.png" title="截图" style="height:200px;width:200px" alt="截图"/>
   </a>
</body>
</html> 

 七、列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
    <li>第四章</li>
</ul>
<ol>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
    <li>第四章</li>
</ol>
<dl>
    <dt>第一章</dt>
    <dd style="height:600px;">内容一</dd>
    <dt>第二章</dt>
    <dd style="height:600px;">内容二</dd>
    <dt>第三章</dt>
    <dd style="height:600px;">内容三</dd>
    <dt>第四章</dt>
    <dd style="height:600px;">内容四</dd>
</dl>
</body>
</html>

 八、表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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 colspan="2">1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td rowspan="2">1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </tbody>
</table>
</body>
</html>

 注：colspan横向合并表格，rowspan纵向合并表格。

 九、label标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <label for="username">用户名：</label>
    <input id="username" type="text" name="user" />
</body>
</html>
#点击用户名能够输入

2、CSS

引用css文件：

<link rel="stylesheet" href="commons.css" />

注释：

<!--<img src="a1.png" style="height: 15px;width: 15px"/>-->    #baody里面的注释
/*#text-align: center;*/        #style里的注释

 网页最上面的图标：

 <link rel="apple-touch-icon-precomposed"  href="img/apple-touch-icon-76x76-precomposed.png">  ##图标

基础样式：

background-color:red          注（rgb颜色对照表）：http://www.114la.com/other/rgb.htm
height   高度 百分比
width    宽度 像素，百分比
text-align:ceter  水平方向居中
line-height   垂直方向根据标签高度
color         字体颜色
font-size     字体大小
font-weight   字体加粗

选择器：

一、id选择器
#i1{
background-color: #2459a2;
height: 48px;}

二、class选择器
.名称{
...}
<标签 class='名称'> </标签>


三、标签选择器
div{
...}
全部div设置上此样式

四、层级选择器（空格）
.c1 .c2 div{}

五、组合选择器（逗号）
#c1,.c2,div{}

六、属性选择器 
对选择到的标签再经过属性再进行一次筛选
.c1[n='alex']{ width:100px; height:200px; }

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

边框：

border: 4px dotted（虚线） red;
border: 4px solid（实线） red;
border-radius:25px;   #圆角边框50%的话变为圆
box-shadow:5px 5px 4px;  #阴影

float：

让标签浪起来，块级标签也能够堆叠
老子管不住：
<div style="clear: both;"></div>

display：

display: none; -- 让标签消失
display: inline;  
display: block;
display: inline-block;
具备inline,默认本身有多少占多少
具备block，能够设置没法设置高度，宽度，padding margin
******
行内标签：没法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin

padding,margin：

padding      #内边距
margin(0,auto)   #外边距

position：

position主要是让标签固定到屏幕的固定位置
position: fixed;   #固定在屏幕的特定位置，能够用fixed进行分层
position: relative+absolute   #固定在relative标签里的相对位置

top: 0     #离上面多远
right: 0   #离右面多远
left: 0    #离左面多远
bottom: 0  #离下面多远

position会把标签变为行内标签，会把标签分层
opcity: 0.5 透明度  
z-index: 层级顺序   #越大会在上层

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top:0;
            right: 0;
            left: 0;
        }
        .pg-body{
            background-color: #dddddd;
            height: 5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>
</html>
固定到顶部 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: auto">
<div style="height: 300px;width: 300px;background-color: aqua;position:relative;margin: 0 auto;">
    <div style="height: 20px;background-color:greenyellow;width: 20px;position: absolute;left: 0;bottom: 0"></div>
</div>
</body>
</html>
固定到标签的相对位置 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="display:none;z-index:10; position: fixed;top: 50%;left:50%;
    margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; ">

        <input type="text" />
        <input type="text" />
        <input type="text" />

    </div>

    <div style="display:none;z-index:9; position: fixed;background-color: black;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0.5;
    "></div>

    <div style="height: 5000px;background-color: green;">
        asdfasdf
    </div>
</body>
</html>
进行分层

 overflow：

 overflow: hidden 将图片隐藏
　　　　　　 auto   出现滚动条

 hover：

. class_name:hover  #当鼠标移动到标签上，如下属性才会生效。

background：

background-image:url('image/4.gif');   # 默认，div大，图片重复访
background-repeat: repeat-y;   #只重复竖直方向
background-repeat: no-repeat   #不重复
background-position-x:         #移动图片的位置（左右）
background-position-y:         #移动图片的位置（上下）
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程