html

菜鸟教程(runoob.com)

<html>
<head>
<meta charset='utf-8'>
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
</body>
</html>

这是一个标题

这是一个段落

html文档后缀名： .html  .htm

 

常用的编辑器：VS Code https://code.visualstudio.com/

　　　　　　　Sublime Text: https://www.subliment.com/

HTML链接是通过<a>来决定的

<a herf="https://www.runoob.com">这是一个链接</a>

引入图片：<img loading="lazy" src="/images/logo.png" width="452" height="39"/>

loading="lazy"惰性加载

<br> 换行无结束标签

开始标签被称为起始标签，结束标签常称为闭合标签

a:

title 一般没什么用，是一个标志 class设定样式，可以重复 

target:决定是刷新页面还是新打开一个页面

 

class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id  一个id只能出现一次
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)

 

 

 

 

 

<hr>标签在HTML页面中创建水平线

<!--注释-->

<font size='6'>这是一个6</font>行元素 用来给中间元素加样式属性

<font size='6' style='color:red'></font>

<h1>-<h6>块元素

<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

 

 

 

 

 

 

 

 

 

 

HTML "计算机输出" 标签

标签描述
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本

 

 

 

 

 

HTML 引文, 引用, 及标签定义

标签描述
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。

 

 

 

 

 

 

 

 

 

 

HTML<link>元素

<link>定义了文档与外部资源之间的关系

<link>通常用于链接样式到样式表：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<head>
<style type = "text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

增加样式渲染HTML文档

 

内联样式：

<p style="color:blue;margin-left:20px;">这是一个段落</p>

背景颜色：

<body style="background-color:yellow;">
<h2 style="background-color:red;"/>
<p style="background-color:green;"/>

字体、字体颜色，字体大小

<h1 style="font-family:verdana;">
<p style="font-family:arial;color:red;font-size:20px;"/>

文本对齐方式

<h1 style="text-align:center;"/># 居中对齐

内部样式表，可以在head部分通过<style>标签来定义内部的样式

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式，可以通过更改一个文件来改变整个站点的外观

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

在浏览器无法载入图像的时候，替换文本属性告诉读者她们失去的信息,浏览器显示的将不是图片，而是替代性的文本

<img src="boat.gif" alt="Big Boat">

设置图片的宽度高度

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="222">

HTML图像标签：

<img>定义图像

<map>定义图像地图

<area>定义图像地图中可点击区域

图片放在哪里

 

表格：

<table border="1"> #表格的线长为1
    <tr>#行
          <td>row 1,cell1</td>#列
          <td>row 1,cell2</td>
    </tr>
    <tr>
           <td>row 2,cell1</td>
           <td>row 2,cell2</td>
    </tr>
</table>

<th> 定义表头

 

HTML无序列表   前面一般有个点  可以通过css样式隐藏

无序列表是一个项目的列表，此列表项目使用粗体远点（典型的小黑圆圈进行标记）

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

<ol>
<li>ffff</li>
<li>dddd</li>
</ol>

自定义列表 

<dl>
<dt>Coffee</dt>#自定义列表项
<dd>-black hot drink</dd>#自定义列表项的描述
<dt>Milk</dt>
<dd>- White cold drink</dd>
</dl>

 

区块元素

大部分HTML元素被定义为块级元素或内联元素

块级元素在浏览器显示时，通常会以新行来开始和结束

实例：<h1><p><ul><table>

 

内联元素

在显示时通常不会以新行开始

实例：<b>加粗<td><a><img>

 

<div>元素是块级元素，可以组合其他HTML元素的容器

如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性

<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法，使用<table>元素进行文档布局不是表格的正确方法

 

<span>   

 为部分文本设置样式属性

 

布局

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>
</html>

 

表单和输入

表单用表单标签<form>来设置：

<form>
input 元素
</form>

文本通过<input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
First name:<input type="text" name="firstname"><br>#密码会直接显示
Last name:<input type="text" name="lastname"><br>
</form>
<form>
password:<input type="password" name="pwd">#密码会匿名显示
</form>

 

单选按钮

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选按钮

<input type = "checkbox">定义了复选框，用户需要从若干给定的选择中选取一个或若干个选项

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

提交按钮

<input type="submit">定义了提交按钮

<form name="input" action="html_form_action.php"#提交到哪儿去 method="get"#用什么方法提交>
Username:<input type="text" name="user">
<input type="submit" value="Submit">
</form>

method有两种方法 get：传递不太重要的消息

　　　　　　　　  post：保密，在链接上看不见

下拉选择：

<select>
<option>张三</option>
<option>张四</option>
<option>张五</option>
<option>张六</option>
</select>

 

 

HTML框架

iframe语法：

该URL指向不同的网页

<iframe src="URL"></iframe>

height width属性用来定义iframe标签的高度与宽度

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

frameborder属性用于定义iframe表示是否显示边框

设置属性值为“0”移除iframe的边框

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

 使用iframe来显示目标链接页面

iframe可以显示一个目标链接页面

目标链接的属性必须使用iframe的属性

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

 

HTML5第一行必须为

<!DOCTYPE html>

 

视频：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

音频：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

 

 

https://www.runoob.com/html/html-tutorial.html

 

颜色可以用十六进制表示，也可以用RGB表示

十六进制    #000000     

颜色RGB    rgb(0,0,0) 三原色   光的三原色 红绿蓝

                  rgb(255,255,255)

 

脚本

<script>脚本

像浏览器输出 hello world

<script>
document.write("Hello World!");
</script>

打包好了的

 

<noscript>标签提供无法使用脚本时的替代内容,在浏览器禁用脚本时，或浏览器不支持客户脚本时

<noscript>元素可包含普通HTML页面的body元素中能够找到所有元素

只有在浏览器不支持脚本或者禁用脚本时，才会显示<noscript>元素中的内容：

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持</noscript>

 

HTML字符实体

HTML中预留字符必须被替换为字符实体

一些在键盘上找不到的字符也可以用字符实体来替换

防止被浏览器直接解析就可以先转为实体

 

Input类型color

从拾色器中选择一个颜色：

选择你喜欢的颜色: <input type="color" name="favcolor">

Input类型：date

date类型允许你从一个日期选择一个日期

生日: <input type="date" name="bday">

Input类型：datetime

datetime类型允许你选择一个日期（UTC时间）

生日 (日期和时间): <input type="datetime" name="bdaytime">

Input类型：datetime-local

datetime-local类型允许你选择一个日期和时间（无时区）

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

Input类型：email

email类型用于应该包含e-mail地址的输入域

E-mail: <input type="email" name="email">

Input类型：month

month类型允许你选择一个月份

生日 (月和年): <input type="month" name="bdaymonth">

number

number类型用于应该包含数值的输入域

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

range

用于包含一定范围内数字值的输入域

range类型为滑动条

<input type="range" name="points" min="1" max="10">

search

用于搜索域，比如站点搜索或Google搜索

Search Google: <input type="search" name="googlesearch">

tel

定义输入电话号码字段

电话号码: <input type="tel" name="usrtel">

time允许你选择一个时间

选择时间: <input type="time" name="usr_time">

url

用于应该包含URL地址的输入域，再提交表单时，会自动验证url域的值

添加您的主页: <input type="url" name="homepage">

week：允许选择周和年

 

点击超链接不进行跳转

<a herf="javascript:void(0);" class="so_book"  >

因为这一块是用的js提交请求 不是通过表单页面提交请求

 

轮播图

<bdo id="s_dd"></bdo> 

 

开头带.的实际上都是给class设置的样式

 

posted @ 2021-11-10 17:53  来自苏格兰  阅读(41)  评论(0)    收藏  举报