HTML

目录

1. 概念

静态网页：网页是写死的，不管谁在什么时候访问，都是一样的

动态网页：内容会依靠服务器端的程序来生成，不同人在不同时候访问，显示的内容都不一样，像现在的购物、新闻网站，会根据浏览记录来显示商品、新闻

静态网页和动态网页的区别

HTML：超文本标记语言，是描述性语言，是网页的结构和内容，主要学习标签

CSS：层叠样式表，是给网页添加外观，主要学习选择器，属性

JavaScript：脚本语言，是网页的动作行为，动画，交互，主要学习基础语法，BOM,DOM

2. 基础

web开发本质：浏览器输入网址回车发生了什么

  1. 浏览器给服务端发送了一个消息
  2. 服务端拿到消息
  3. 服务端返回消息
  4. 浏览器展示页面

web本质：服务端，浏览器，文件

cs架构，bs架构

客户端和服务端，消息的格式是约定好的

HTTP协议：浏览器和服务器之间约定好的消息格式

3. HTML标签

<!DOCTYPE HTML>是文档声明，在第一行

<html></html>根标签，内容都在里面

<head></head>定义头部，常见的有<title>,<script>,<style>,<link>,<meta>

<body></body>定义内容，在浏览器显示，有<h1>,<p>,<a>,<img>,<input>

标签分类：

双标签，单标签<meta>

分类：

  1. 块级标签：display:block

    h1~h6 div p hr li ol ul table form

    默认占浏览器宽度一行，能设置长，宽，顶底

  2. 行内标签：display:inline

    a u s i b span br em strong

    根据内容决定长度，不能设置长和宽

  3. 行内块标签：display:inline-block

    img input textarea select

    在一行内，可设高，宽，顶底

display属性可转换

4. head标签

4.1 title标签

<title>Title</title>
显示浏览器的标签文字信息

4.2 meta标签

  1. charset
    <meta charset="UTF-8">
    编码格式

  2. http-equiv
    向浏览器传递信息，与之对应的属性是content=变量值

    <meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> <!--n秒后跳转到对应的网站-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <!--指定文档的内容类型和编码-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> <!--让IE浏览器以最高级模式渲染当前网页-->

  3. name
    用于页面的关键字和描述，是给搜索引擎看的，内容也是content

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">  <!--搜索引擎的关键字-->
<meta name="description" content="路飞学城">  <!--描述信息-->

4.3 其他

<link rel="icon" href="fav.ico">  <!--插入网站的图标，浏览器标签最左边的图标-->
<link rel="stylesheet" type='text/css' href="mystyle.css">  <!--引入外部样式表文件-->
<style type='text/css'></style>　<!--定义内部样式表-->
<!--定义或引入JavaScript-->
<script type="text/javascript"></script>
<script src="myscript.js"></script>

5. body标签

5.1 标题标签

h1-h6

<h1></h1>
<h6></h6>
<b></b>      <!--加粗-->
<i></i>      <!--斜体-->
<u></u>      <!--下划线-->
<s></s>      <!--删除-->
<sup></sup>  <!--上标-->
<sub></sub>  <!--下标-->
<em></em>    <!--强调，好像跟斜体一样-->
<strong></strong>  <!--加粗强调，好像跟加粗一样-->

5.2 段落标签

<p></p>

5.3 超链接a

不能设置高宽

<a href="" target="_blank" title="百度">百度</a>  <!--_blank在新标签打开，不写就是_self，title是鼠标悬停时显示-->
<a href="a.zip">下载压缩包</a> <!--会转到资源链接下载-->
<a href="mailto:zhaoxu@tedu.cn">联系我们</a>  <!--跳转到邮箱地址，需要设置好邮箱客户端并配置好-->
<a href="#">跳转到顶部</a>  <!--跳转到顶部-->
<a href="#p1">跳转到p1</a>  <!--跳转到网页内的某个指定标签-->
<a href="javascript:alert(1)">内容</a> <!--在触发a时，执行js代码-->

5.4 列表标签

<ul type="disc">
    <li>我的账户</li>
    <li>我的订单</li>
    <li>退出</li>
</ul>          <!--点状列表，默认disc，circle空心圆圈，square实心方块，none无样式-->
 
<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>          <!--序号列表，type='1'start='2'，A大写字母,a小写字母,I大写罗马,i小写罗马，start都是用数字开表示-->

5.5 盒子标签div

文档分区

5.6 图片标签img

在一行内显示，可以设置高宽，行内块标签

可以本地地址也可以网络地址

可以png,jpg,gif

<img id="i1" src="http://c.hiphotos.baidu.com/baike/pic/item/91ef76c6a7efce1b27893518a451f3deb58f6546.jpg" style='width:200px;height:200px' alt="找不到了" title="404">  <!--alt是找不到的提示信息，title是鼠标放上去的提示信息-->

5.7 其他特殊标签

<h1>海&nbsp;燕</h1>    <!--表示空格，要几个写几个-->
<p>在苍茫的大海上，<br>狂风……</p>    <!--br是换行，一般直接一个p标签写一段不换行-->
<hr>           <!--水平线-->
1&lt;a&gt    <!--大于小于号-->
&copy;
&amp;
&yen;
&reg;
<span></spans>  <!--对某几个字圈起来，加上CSS，独立设置样式-->

5.8 表格

<table border="1"cellspacing="0"> <!--表的边框属性-->
    <thead>   <!--表头-->
    <tr>
        <th>姓名</th>  <!--按行写，从左到右，th-->
    </tr>
    </thead>
    <tbody>  <!--表体-->
    <tr>   <!--按行写，从左到右，td，第一行-->
        <td>小强</td>
    </tr>
    <tr><!--按行写，从左到右，第二行-->
        <td>哥</td>
    </tr>
    </tbody>
</table>

合并表格
在需要合并的第一个写上rowspan='n'，需要合并的单元格数，竖向合并
colspan，横向合并

5.9 form表单

常用属性

  1. action，定义表单被提交时发生的动作，提交给服务器处理程序的地址
  2. method，定义提交方式
    • get，默认值，明文提交，数据显示在地址上，数据最大2k
    • post，隐式提交，不会显示在地址栏上，大小无限制
  3. enctype，表单的编码类型
    • application/x-www-form-urlencoded 默认，允许普通字符，特殊字符，不允许提交文件
    • multipart/form-data，允许文件，提交文件给服务器用这个，用post
    • text/plain 只允许普通字符
  4. 表单控件
    • textarea文本域，cols宽度，rows高度
    • select和option选项框，size大于1是滚动条，默认是下拉条，selected预选中
  5. input
    • type
    • button 普通的按钮
    • text 明文
    • password 密文
    • radio 单选
    • checkbox，复选，checked默认选中
      提交
    • file 上传文件
      期
    • value 控件的值，要提交给服务器的数据
    • name 控件的名称，服务器用
    • disabled 禁用该控件
  6. label，关联文本与表单元素，点击文本时，如同点击表单元素一样

前后端有数据交互的时候用form表单

  1. 所有获取用户输入的标签都要放在form表单里面
  2. 提交数据是键值对，需要name
  3. 提交按钮，submit，清空按钮用reset
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>form表单实例</title>
</head>
<body>
 
<form action="http://127.0.0.1:8080/uplload/"method="post"enctype="multipart/form-data"autocomplete="off">
    <p>
        <label for="i1">用户名：</label>
        <input id="i1" name="username" type="text"value="xiao">     <!--默认值，还有readonly只读-->
        <input name="username" type="text"placeholder="xiao">
    </p>
    <p>
        密码：
        <input name="password" type="password">
    </p>
    <p>邮箱：
        <input type="email"name="email">
    </p>
    <p> 性别：
        <label for="r1">男</label>
        <input id="r1" name="gender" type="radio" value="1">
        <label for="r2">女</label>
        <input id="r2" name="gender" type="radio" value="0">
        <label for="r3">保密</label>
        <input id="r3" checked name="gender" type="radio" value="2">
    </p>
    <p> 爱好：
        <input name="hobby" type="checkbox"value="basketball">篮球
        <input name="hobby" type="checkbox"value="football">足球
        <input name="hobby" type="checkbox"value="doubleball">双色球
    </p>
    <p>生日：
        <input name="birthday" type="date">
    </p>
 
    <select name="from" id="s1">
        <optgroup label="上海">
            <option value="pd">浦东</option>
            <option value="wt">外滩</option>
        </optgroup>
        <optgroup label="浙江">
            <option value="hz">杭州</option>
            <option value="nb">宁波</option>
            <option value="sx">绍兴</option>
            <option value="wz">温州</option>
        </optgroup>
    </select>
    <select name="from2" id="s2">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="zj">浙江</option>
    </select>
    <p> <textarea name="info" id="s2" cols="30" rows="10">
    </textarea>
    </p>
    <p>头像：
        <input name="file" type="file">
    </p>
    <p> <input type="submit" value="提交上去"></p>
    <p> <input type="button" value="空键"></p>
    <p> <input type="reset" value="清空"></p>
</form>
 
</body>
</html>

5.10 input

input系列:

  • text
  • value 设置默认值
  • placeholder 设置占位内容
  • password
  • radio 单选框
  • checkbox 多选框
  • date 日期
  • datetime 时间
  • file 文件
  • button 普通按钮,多用JS给它绑定事件
  • reset 重置
  • submit 提交
  • 埋下伏笔:什么时候用
  • textarea 大段文本
  • select 下拉菜单
  • option 具体的下拉选项
  • optgroup 分组的下拉框

label

快捷操作

h1*4>a.c1[id=a$]{a标签$}
<h1><a href="" class="c1" id="a1">a标签1</a></h1>
<h1><a href="" class="c1" id="a2">a标签2</a></h1>
<h1><a href="" class="c1" id="a3">a标签3</a></h1>
<h1><a href="" class="c1" id="a4">a标签4</a></h1>
 
div#di
<div id="di"></div>
 
dic>p.c1*3
<dic>
    <p class="c1"></p>
    <p class="c1"></p>
    <p class="c1"></p>
</dic>

用alt可以实现多行一起操作

标签的嵌套规则

  1. 块元素可以包含内联元素或某些块元素
  2. 行内标签不能嵌套块级标签，只能嵌套内联元素
  3. h1-h6，p标签不能嵌套块级标签
posted @ 2019-04-22 22:30  球球-Ball  阅读(333)  评论(0)  编辑  收藏  举报