潭州课堂25班：Ph201805201 WEB 之 HTML 第一课 (课堂笔记)

什么是HTML

　　超文本标记语言（HyperText
　　Markup Language，简称 HTML）

HTML 是一门标记语言，标记语言由一套标记标签组成，

学习 HTML，其实就是学习标签

HTML的基本模板

标签：

　　由尖括号包裹单词构成，eg：<html>,所以标签不可能以数字开头

　　标签不区分大小写，推荐小写

　　标签可以嵌套，但不能交叉嵌套

　　错误示例：<a><b></a></b>

　　正确示例：<a><b></b></a>

标签的使用样式及属性

标签使用样式：

　　1. 开始标签<a >标签体</a>结束标签
　　2. 自闭合标签，eg：<br>,<hr>,<input><img>

标签属性：
a.通常为键值对形式出现，eg：color=“red” id = ‘eat’
b.属性只能出现在开始标签和自闭和标签内
c.属性名字全部小写，属性值必须用单引或者双引包裹
d.如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签属性）

html文件各部分标签详解-- <body>

b.块级标签和内联标签：

　　 b.1 块级标签：<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>

　　 b.2 内联标签：<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span>

b.3 块级元素的特点：总在新行上开始高度，行高以及外边距和内边距都可控制

　　宽度缺省，则是它容器的100% 它可以容纳内联元素和其他块元素

　 b.4 inline元素特点：
　　和其他元素在一行上高，行高以及外边距和内边距不可改变

宽度就是其文字或图片宽度，不可改变

　　内联元素只能容纳文本或者其他内联元素

以下内容先做了解，后续css样式再做补充
b.5 行内元素注意：设置宽度width无效

　　设置高度height无效（可通过line—height来设置行高）

设置margin只有左右margin有效，上下无效

设置padding只有左右padding有效，上下则无效，注意元素范围是增大了，但是对元素周围的内容是没影响的。

标题标签 (header)
　　一般用在文章的标题，有h1~h6

段落标签 (Paragraph)
　　会把 HTML文档分割成若干段落

列表标签
　　列表标签分为：有序列表、无序列表以及定义列表

div 标签
　　用于分化一个一个的区域

有序列表、无序列表、定义列表标签效果图

布局标签：<div>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .top{

            height:80px;

            width:100%;

            background: skyblue;

        }

        .midd{

            height: 200px;

            width: 80%;

            background: antiquewhite;

        }

        .bottom{

            height: 80px;

            width: 80%;

            background:green;

        }

    </style>

</head>

<body>

    <!--布局标签-->

    <div class="top"></div>

    <div class="midd"></div>

    <div class="bottom"></div>

</body>

</html>

有序列表、无序列表、定义列表标签代码贴图

图片标签
　　图片标签，用于向页面插入图片

粗体/斜体标签
　　粗体标签将文字加粗，斜体标签将文字倾斜

超链接标签
　　超链接标签其实就是 a 标签，一般用于网页之间的跳转
　　还能做锚点，进行跳转

<a href="http://www.baidu.com"target="_blank"
title="提示文字">我是百度</a>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

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

    title="提示文字">我是百度</a><br>

    <a href="javascript:vodi(0)">死锭，有 a 标签的样式但不跳转</a>

    <h3>第一章</h3>

    <a href="#text">页面内跳转，去第二章</a>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <h3 id="text">第二章</h3>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <p>1234564878121545</p>

    <a href="#">回到顶部</a>

</body>

</html>

文字标签
　　Span 标签是单纯的文字标签，只有配合 CSS 才能有效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        span{

            color: yellow;

        }

    </style>

</head>

<body>

    <h3>我就是我，不一样<span>的烟火</span></h3>

</body>

</html>

行内标签
　　图形标签<img/>：插入图片

超链接标签<a>: a.<a href=“目标网址” title=“鼠标滑过显示的文本” target=“_blank”>链接显示的文本</a> ：实现网页跳转和本页内跳转（要注意目标网址的区别）

特殊符号代码贴图

　　www&lt;a

四个常用的特殊字符：

　　<　　 　　&gty;　　空格宽度

　　<　　&emsp;　　&gty;　　字符宽度

表格：

表格样式

表头用<th>实现加粗，居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        th,td{

            border: 1px solid black;

            width: 50px ;

        }

    </style>

</head>

<body>54546

    <table>

        <thead>

            <tr>   <th>序号</th><th>姓名</th><th>QQ</th> </tr>

        </thead>

        <tbody>

           <tr>  <td>1</td><td>2</td><td>3</td> </tr>

           <tr>  <td>4</td><td>5</td><td>6</td> </tr>

           <tr>  <td>7</td><td>8</td><td>9</td> </tr>

        </tbody>

    </table>

</body>

</html>

　　表格行列的合并

form 表单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

        <form action="https://www.sogou.com/web" method="get">

        搜索内容: <input type="text"  name="query"><br>

        <input type="submit" Value="提交">

        </form>

        <form action="https://www.sogou.com/web" method="post">

        搜索内容: <input type="text"  name="query"><br>

        <input type="submit" Value="提交">

        </form>

</body>

</html>

input 标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form>

        用户名：<input type="text" name="user" placeholder=请输入用户名><br>

        密 码：<input type="password" name="password" placeholder=请输入密码><br><br>

        性 别：

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

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

        <input type="radio" name="gender" value="3">保密<br><br>

        爱 好：

        <input type="checkbox" name="aihao" value="4">足球

        <input type="checkbox" name="aihao" value="5"> 篮球

        <input type="checkbox" name="aihao" value="6">睡觉<br><br>

        上传头像：

        <input type="file" name="file"><br><br>

        地 址：

        <select>

            <option>上海</option>

            <option>北京</option>

            <option>广东</option>

            <option>新疆</option>

        </select><br><br>

        个人简介：

        <textarea name="gerenjianjie" style="height: 200px;  width: 200px;"></textarea><br><br>

        <input type="submit" value="提交">

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

    </form>

</body>

</html>

潭州课堂25班：Ph201805201 WEB 之 HTML 第一课 (课堂笔记)的更多相关文章

潭州课堂25班：Ph201805201 WEB 之 CSS 第二课 (课堂笔记)
CSS 的引入方法: 第一种 : <p style="color: yellow">CSS的第一种引入方法</p> ...
潭州课堂25班：Ph201805201 WEB 之页面编写第四课登录注册 (课堂笔记)
index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
潭州课堂25班：Ph201805201 WEB 之页面编写第三课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
潭州课堂25班：Ph201805201 WEB 之页面编写第二课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
潭州课堂25班：Ph201805201 WEB 之页面编写第一课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
潭州课堂25班：Ph201805201 第十课类的定义，属性和方法 (课堂笔记)
类的定义共同属性,特征,方法者,可分为一类,并以名命之 class Abc: # class 定义类, 后面接类名 ( 规则首字母大写 ) cls_name = '这个类的名字是Abc' # 在类 ...
潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)
js <——>jq <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
潭州课堂25班：Ph201805201 WEB 之 jQuery 第七课 (课堂笔记)
jq 的导入 <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">< ...
潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)
上节补充方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

Django配置图片上传
本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL 和 MEDIA_ROOT 在 D:\blog ...
freeRTOS中文实用教程4--资源管理互斥
1.前言访问一个被多任务共享,或是被任务与中断共享的资源时,需要采用”互斥”技术以保证数据在任何时候都保持一致性.这样做的目的是要确保任务从开始访问资源就具有排它性,直至这个资源又恢复到完整状态 F ...
CROSSUI桌面工具分布加载模块（Distributed UI Module）与主模块Module 之间数据传输！
CROSSUI 基于 NW,如何在模Module 之间(主index.js and module1.js)传输数据? http://www.crossui.com/Forum/post577.htm ...
Java中利用Scanner键入的字符串与其他字符串的比较
利用Scanner获取到键入的字符串与其他字符串作比较时,如果直接用关系运算符 == 比较,得到的结果总是false,因为实际比较的是两个变量引用的内存地址: 而要比较其内容是否相等,可以使用Obje ...
X-Forwarded-For 的一些理解
X-Forwarded-For 是一个 HTTP 扩展头部, 主要是为了让 Web 服务器获取访问用户的真实 IP 地址(其实这个真实未必是真实的,后面会说到). 那为什么 Web 服务器只有通过 X ...
python 全栈开发，Day124(MongoDB初识,增删改查操作,数据类型,$关键字以及$修改器,"$"的奇妙用法,Array Object 的特殊操作,选取跳过排序,客户端操作)
一.MongoDB初识什么是MongoDB MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介 ...
2018-2019 2 20165203 《网络对抗技术》 Exp4 恶意代码分析
2018-2019 2 20165203 <网络对抗技术> Exp4 恶意代码分析实验要求监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或Exp ...
Python内置数据结构--列表
本节内容: 列表元组字符串集合字典本节先介绍列表. 一.列表一种容器类型.列表可以包含任何种类的对象,比如说数字.子串.嵌套其他列表.嵌套元组. 任意对象的有序集合,通过索引访问其中的元素 ...
Codeforces 739C Alyona and towers 线段树
Alyona and towers 这个题写起来真的要人命... 我们发现一个区间被加上一个d的时候, 内部的结构是不变的, 改变的只是左端点右端点的值, 这样就能区间合并了. 如果用差分的话会简单一 ...
Codeforces Round #468 (Div. 2, based on Technocup 2018 Final Round)
A.B都是暴力搞一搞. A: #include<bits/stdc++.h> #define fi first #define se second #define mk make_pair ...

潭州课堂25班：Ph201805201 WEB 之 HTML 第一课 (课堂笔记)

潭州课堂25班：Ph201805201 WEB 之 HTML 第一课 (课堂笔记)的更多相关文章

随机推荐

热门专题