前端基础之HTML

前言

HTML、CSS、JS的关系？

B/S架构

HTML概念

HTML全称为超文本标记语言（HyperText Mark-up Language）

相较于普通文本来说，HTML超文本语言不仅可表示字符串内容，还可以展示图片、视频、表格、链接等数据内容。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <!--字符编码  -->
    <meta charset="UTF-8">
    <!-- 标题-->
    <title>Title</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> 声明该html页面，使用的编写规范；
<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
<title></title>定义网页标题，在浏览器标题栏显示。
<body></body>之间的文本是可见的网页主体内容

html标签的格式

标签的语法：

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

<标签名属性1=“属性值1” 属性2=“属性值2”…… />

HTML标签分类

HTML标签根据其在浏览器中显示的特征分为：

块级标签：独占一行
内联标签：根据内容大小而定
div标签：没有任何标记效果，是一张白纸。

HTML基本标签

HTML中包含了很多标签帮我们构建出网站的框架。

<!DOCTYPE>标签

<!DOCTYPE> 此标签可告知浏览器该HTML文档使用哪种 HTML 或 XHTML 规范。

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat

<head>标签

用于描述和网页相关的源数据信息

<meta>标签

META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。

<head>
    <!--字符编码-->
    <meta charset="UTF-8">
    <!--浏览器标签页显示的标题-->
    <title>IT运维平台</title>
    <!--刷新当前网页， 2秒钟之后跳转到https://www.cnblogs.com/sss4/p/6863361.html -->
   <!--<meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/sss4/p/6863361.html"> -->
    <!--兼容IE浏览器-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!--在移动端打开以屏幕大小打开 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
    <!--搜素引擎SEO关键词优化 -->
    <meta name="keywords" content="python,golang,html,css,javescript,上门,服务">
    <!--在搜素引擎排名之后的描述信息 -->
    <meta name="description" content="我来自........我擅长。。。。。。。">


</head>

meta标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

手机端网页

<body>标签

描述网页真正要渲染的内容

基本标签（块级标签和内联标签）

'''
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

特殊字符：
      &lt; &gt；&quot；&copy;&reg;

'''

<hr>水平线标签

中/英文空格标签

由于在utf-8编码中文占3个字节长度，所以1个中文空格相当于3个英文空格。

&emsp;前面是1个中文空格
<hr width="100%" color="cyan">
&nbsp;&nbsp;&nbsp;前面是3个英文空格

中/英文空格

&emsp;中文空格
 英文空格

<div>和<span>标签

<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

<img>图片标签

'''
src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

'''

音频和视频标签

HTML超文本比文本的超级之处就在于HTML可以表示音频和视频。

<!--音频标签-->
<audio src="../img/jq.mp3" controls></audio>
<!--视频标签-->
<video src="../img/ds.mp4" width="320" height="240" controls="controls"></video>

<a>标签

target属性

target=_self 在当前页签打开目标网站
target=_blank在新页签打开目标网址

href属性

链接至本地页面
链接至外网页面
锚定到本页面的标签

<input type="text" id="pid" placeholder="请输入pid">
<hr color="cyan" width="10px">
<a href="./01-标题.html" target="_blank">链接至本地页面</a>
<hr color="cyan" width="10px">
<a href="https://www.cnblogs.com/sss4/" target="_blank">链接至外网</a>
<hr color="cyan" width="10px">
<a href="#pid" target="_self">链接至本页面的p标签</a>
<a href="#pid" target="_parent">链接至本页面的p标签</a>

a标签

<ul>列表标签

'''
<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>: 有序列表
         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题
         <dd> 列表项

'''

<table>标签

HTML中的table没有列的概念，tr标签中嵌套多个td。

<tr> 是table row 的缩写，表格中的一行
<td> 是table data cell 的缩写，单元格

table创建快捷键

table>tr*6>td*1

表格的基本结构

<table>
         <tr>
                <td>标题</td>
                <td>标题</td>
         </tr>
         
         <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>

table标签的属性

'''

<tr>: table row

<th>: table head cell

<td>: table data cell


属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列（即合并单元格）

'''

table练习：

<form>标签

用于在前端引导用户输入数据，把收集的数据组织成字典形式，传输到服务端。

表单标签内可以嵌套的标签：input系列标签，。

<form>标签属性：

<input type(属性)=‘text’ > (input 是自闭合标签 ) （<form>（开始标签）+</form>（结束标签）=闭合标签）

</form>

<input> 输入框标签

name属性是键；输入内容是与之对应的值；

nane属性必须定义，注意checkbox类型;必须手动设置value属性；radio类型：必须共用1个name键；

发往服务端的数据类型：name:key， checkbox类型的input：name:[key1,key2,key3]

<input>标签系列的类型

text类型:文本输入框

passwd类型：密码输入框

date类型：日期输入框

checkbox类型：多选框

radio类型：互斥框（只能选择1个value）

select类型：当单选框的选择项比较多的情况下，使用下拉框。

form标签提交表单

按钮的类型

button类型：一般配合js使用。

rest类型：重置清除当前form中输入的内容。

submit类型：注意表单提交类型的input标签里面的value属性设置的是提交按钮显示的字,而其他类型设置的是键中的值。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>张根</title>
</head>
<body>

<form>
    <p>请输入用户名：<input type="text" name="username" ></p>
    <p>请输入密码：<input type="password" name="passwd" ></p>
    <p>文学：<input type="checkbox" name="爱好" value="somking"> 历史<input type="checkbox" value="fuck"></in></p>

    <p>性别 男 <input type="radio" name="sex"> 女 <input type="radio" name="sex"> 其他 <input type="radio" name="sex"> </p>
    <p><input type="submit" value="sub"> </p>
     <p><input type="button" value="button"> </p>
</form>
</body>
</html>

View Code

from之select 下拉框标签

select特性：

select下拉框标签由 select标签+option标签+optgroup组成，select里面设置name键，option里面设置value值；

select标签的属性：

name:设置键值对的键

size：默认选择个数

multiple:multiple 设置同时多选

select标签的属性：

value属性：设置键值对的值

selected属性：设置这个下拉框默认选中的选项

optgroup标签：

把多个option组织到1组，label="组名”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>张根</title>
</head>
<body>
<form>
    <select name="Java">
        <optgroup label="JavaSE"></optgroup>
        <option value="array">数组</option>
        <option value="ArrayList">ArrayList</option>
        <option value="HashMap<">HashMap</option>
        <optgroup label="JavaEE"></optgroup>
        <option value="tomcat">Tomcat</option>
        <option value="springBoot">springBoot</option>
        <option value="springCloud">springCloud</option>
    </select>
</form>
</body>
</html>

optgroup

from之textarea标签

多行文本输入框

name属性：键

rows:控制文本输入框占的行数

cols:控制文本输入框占的列数

<from>
    <select name="china" >
        <optgroup label="唐县.齐家佐乡"></optgroup>
        <option value="hb">管家佐村</option>
        <option value="hn">齐家佐村</option>
        <option value="zj">马家峪村</option>
    </select>

    <textarea name="jianjie" rows="4" cols="30">
     伟
     人
     故
     乡
 </textarea>
</from>

View Code

from之label>标签

用来和input标绑定，绑定后，点击输入框的范围里其他区域也可以输入内容了，让用户体验更好点。

说明：
1、 label 元素不会向用户呈现任何特殊效果。
2、<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

from之fieldset标签

<fieldset> 标签可以对 form标签内的相关元素分组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>\</title>
</head>
<body>
<form>
    <!--使用<fieldset> 标签可以将表单内的相关元素分组。-->
    <fieldset>
        <legend>男生:</legend>
        Name: <input type="text"><br>
        Email: <input type="text"><br>
        Date of birth: <input type="text">
    </fieldset>
    <fieldset>
        <legend>女生</legend>
        Name: <input type="text"><br>
        Email: <input type="text"><br>
        Date of birth: <input type="text">
    </fieldset>

</form>
</body>
</html>

submit和botton的区别

submit 默认有提交表单的功能

botton：(按钮)需要绑定事件

posted on 2017-05-16 19:56 Martin8866 阅读(368) 评论(0) 编辑收藏举报

刷新页面返回顶部