HTML基础学习 - CodeSky&木子

HTML

HTML全称：Hyper Text Markup Language

一个网页的基本信息

DOCTYPE声明
tiltle 标签
meta标签

<!--DOCTYPE：告诉浏览器我们要用什么规范-->
<!DOCTYPE html>
<!--总标签：HTML都要包含在这个标签里-->
<html lang="en">
<!--head标签代表网页的头部-->
<head>
    <!--meta标签是描述性标签，它用来描述我们网站的一些信息-->
    <!--meta标签一般用来做SEO-->
    <meta charset="UTF-8">
    <!--title标签代表网页的标题-->
    <title>Title</title>
</head>
<!--head标签代表网页的主体-->
<body>

</body>
</html>

1，网页基本标签

注意：标签用后要闭合. </标签名>是闭合标签

标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

效果：

段落标签

<p>段落标签</p>     快捷键：p加Tab

效果：

换行标签

<br/>   快捷键：br加Tab

效果：

水平线标签

<hr/>   快捷键：hr加Tab

字体样式标签

<strong>粗体</strong>
<em>斜体</em>

粗体

斜体

特殊符号

空格：&nbsp;
大于号：&gt;
小于号：&lt;
版权符号:&copy;

2，图像，超链接，功能性标签

图像标签

<!--图像标签
  src:图片的路径
  alt：图片错误时的信息
  title：悬停文字
  width：图片宽
  height：图片高
-->
<img src="" alt=""title=""width=""height="">
快捷键：img加Tab

超链接标签

超链接标签:(快捷键：a加Tab)
herf: 必填，表示要跳转到那个界面标签内部是跳转提示语
target: 表示窗口在哪里打开，跳转提示语可以换成图片


<a href="https://www.baidu.com"target="_blank">跳转提示语</a>
<a href="https://bilibili.com"><img src="../reources/140105tnjyhbf4mjnqyppw.jpg" alt="提示图片"width="200"height="100"></a>

锚链接：
1，需要一个锚标记
2，跳转到该标记

过程：先在网页某个地方设置一个锚标记，比如网页顶部：

top是自己写的标记名

<body>
<!--锚标记-->
<a name="top">顶部</a>

然后再写一个跳转的标签，#加标记名，就可以点击跳转到标记位置。

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

功能性标签

功能性标签
邮件链接 mailto，QQ链接等等

邮箱链接
<a href="mailto:要贴上的邮箱地址"></a>
<br/>
QQ链接：
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号码&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:QQ号码:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

效果：

QQ可以从下面的网页上直接选择类型和复制：

点击跳转到网站

块元素和行内元素

块元素：

块元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。比如标题标签，段落标签等

行内元素：

一般情况下，行内元素只能包含数据和其他行内元素。简单来说就是一行里面的元素就叫行内元素。

列表标签

1,有序列表

有序列表(orderlist简称ol)

<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
    <li>有序列表5</li>
</ol>

2，无序列表

无序列表(undered list简称ul)

<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
    <li>无序列表5</li>
</ul>

3，自定义列表

自定义列表(definition term简称dl)

<dl>
    <dt>标题</dt>
    <dd>自定义列表1</dd>
    <dd>自定义列表2</dd>
    <dd>自定义列表3</dd>
</dl>

效果：

表格标签

为什么使用表格

简单通用
结构稳定

基本结构

单元格

行
列
跨行
跨列

表格标签table代码
行：tr
列: td
border: 边界
colspan: 跨列
rowspan: 跨行

<td colspan="2">1</td>  (表示1跨2列)
<td rowspan="2">1</td>  (表示1跨2行)


<table border="1px">
    <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>
</table>

效果：

3，视频元素和音频元素

音频和视频元素
video 视频
src:视频文件地址
controls：控制器(没有控制器显示不出来)
autoplay:自动播放（注意有的浏览器不支持，可有可无）

<video src="视频地址" controls autoplay></video>

audio 音频
src:音频文件地址
controls：控制器
autoplay:自动播放（注意有的浏览器不支持）

<audio src="音频地址" controls autoplay></audio>

4，页面结构

这些标签产生的效果和标题标签的效果是一样的，但是在做页面设计的时候通过这些标签条理会更加清晰，开发效率也会更高。

5，iframe内联框架

iframe内联框架
**src： ** 引用页面地址
**name: ** 框架标识名

<iframe src="引用页面地址" frameborder="0"name="框架标识名"></iframe>

6，表单

表单就是一个包含表单元素的区域，例如网页上的登录框。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单form
<form action=""method="post">
</form>
action:表示向何处发送表单数据，网页地址
method:提交方法，get直接显示在网页上，不安全，post不显示在网页上，相对安全

表单元素格式：

例如：

<input name="登陆" type="text" value="登陆者"maxlength="8" size="30">

name：表示表单元素的的名字为登陆。

type: 表示元素的类型为text文本。

value: 表示文本初始值为登陆者

maxlength: 表示文本最多能输入8个字符。

size: 表示文本框的长度为30。

表单内容：

单选框：
type类型为radio
value：初始值必须有
name：名字要一样，相当于放进一个组内，否则都可以选

<p>
 性别：<input type="radio"value="女"name="sex">女
      <input type="radio"value="男"name="sex">男
</p>

多选框：
type类型为checkbox
value：初始值必须有(就是点击过后会传输的值)
name：名字要一样，相当于放进一个组内(通常是一类的东西)
checked:默认选中

<p>爱好：
 <input type="checkbox"value="play"name="hobby"checked>玩
<input type="checkbox"value="write"name="hobby">写
<input type="checkbox"value="read"name="hobby">读
 </p>

按钮：
type类型为button
value：按钮的名字
name：表单元素的名称

<p>
    <input type="button"name="bun1"value="我的按钮">
</p>

下拉框：
name:框名(提交值)
option:子选项
selected:默认选择

<p>国家：
<select name="国家">
    <option value="china"selected>中国</option>
    <option value="japan">日本</option>
    <option value="USA">美国</option>
</select>
</p>

文本域：
name：文本域名字
cols= 行
rows= 列

<p>文本域：
<textarea name="文本域"  cols="30" rows="10"></textarea>
</p>

上传文件：
type为file类型

<p>
  <input type="file"name="files">
</p>

滑块：

<p>
 音量：   <input    type="range"min="0"max="100"name="voice">
</p>

数字：

<p>
  数量：  <input type="number"min="0"max="10"step="1"name="number">
</p>

表单的应用：

hidden：隐藏
readonly: 只读
disable：禁用
placeholder: 文本域提示语言
required: 必填项
pattern：正则表达式(很复杂，建议不要手写，网上寻找)

<p>文本：
    <input type="text"name="文本"value="不错" disabled >
    <input type="text"name="文本"value="不错" readonly>
    <input type="text"name="文本"value="不错" hidden>
    <input type="text"name="文本"value="不错" placeholder="请输入用户名">
    <input type="text"name="文本"value="不错" required>
</p>

使用效果：