前端之HTML

时间  2019-11-18
标签 前端 html 栏目 HTML 繁體版
原文   原文链接

前端之html

HTML是一种超文本标记语言,是一种用于建立网页的标记语言css

  • 它本质上是浏览器可识别的规则, 咱们按照规则写网页, 浏览器根据规则渲染咱们的网页. 对于不一样的浏览器, 对于同一个标签可能会有不一样的解释. (兼容性问题)html

    记住它不是一种编程语言,它是用来描述网页的前端

HTML文档结构web

<!DOCTYPE>
<html lang="zh-CN"
<head>
  <meta charset="utf8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>

1.<!DOCTYPE>声明为HTML5文档
2.<html>,</html>是文档的开始标记和结束的标记,是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body).
3.<head>,</head>定义了HTML文档的开头部分. 它们之间的内容不会在浏览器的文档窗口显示,包含了文档的元(meta)数据
<title>,</title>定义了网页标题, 在浏览器标题栏显示.
<body>,</body>之间的文本是可见的网页主体内容

HTML标签编程

  • HTML标签是由尖括号包围的关键字, 如<html.>,<div.>等
  • HTML标签一般是成对出现的, 好比<div.>和</div.>, 第一个标签是开始, 第二个标签是结束, 结束标签会有斜线.
  • 也有一部分标签是单独呈现的, 如:<br/.>,<hr/.>,<img src="1.jpg"/.>等
  • 标签里面能够有若干属性, 也能够不带属性.

标签的语法:浏览器

  • < 标签名 属性1="属性值1" 属性2="属性值2".....>内容部分
  • <标签名 属性1="属性1"属性2="属性值2"..../>

几个很重要的属性:服务器

  • id: 定义标签的惟一ID, HTML文档树中惟一
  • class: 为html元素定义一个或多个类名(classname)(CSS样式类名)
  • style: 规定元素的行内样式(CSS样式)

HTML注释和标签编程语言

<!--注释内容--> 
<!--注释是标签之母-->

<!DOCTYPE> 声明必须是HTML文档的第一行, 位于<html>标签以前.
<!DOCTYPE> 声明不是HTML标签, 它是指示web浏览器关于页面使用哪一个HTML版本进行编写指令.

HTML经常使用标签

head内经常使用标签post

标签 意义
定义网页标题
定义内部样式表
定义JS代码或引入外部JS文件
引入外部样式表文件
定义网页原信息

Meta标签网站

Meta标签介绍:

  • <meta.>元素可提供有关页面的元信息, 针对搜索引擎和更新频度的描述和关键词
  • <meta.>标签位于文档的头部,不包含任何内容
  • <meta.>提供的信息是用户不可见的
meta下http-equiv属性
<!--指定文档的编码类型(须要知道)-->
<meta http-equiv="content-Type" charset='UTF8'>
<!--2秒后跳转到对应的网址, 注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--告诉IE以最高模式渲染文档(了解)
<meta http-equiv="x-ua-compatible" content="IE=edge"
meta下name属性: 
主要用于描述网页, 与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的.
<meta name="keywords" content="meta总结,html,meta属性,meta跳转">
<meta name="description" content="个人英雄学院">

body内经常使用标签

基本标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</U>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题1</h2>
<h3>标题1</h3>
<h4>标题1</h4>
<h5>标题1</h5>
<h6>标题1</h6>

<!--换行-->
<br>

<!--水平线--> <hr>

特殊字符

内容 对应代码
空格 &.nbsp;
大于号> &.gt;
小于号< &.lt;
& &.amp;
¥ &.yen;
版权 &.copy;
注册 &.reg;

div标签和span标签

div标签用来定义一个块级元素, 并没有实际的意义, 主要经过CSS样式为其赋予不一样的表现

span标签用来定义内联(行内)元素, 并没有实际意义, 主要经过CSS样式为其赋予不一样的表现

块级元素与行内元素的区别:

所谓块元素, 是以另起一行开始渲染的元素,行内元素则不须要另起一行, 若是单独在网页中插入这两个元素,不会对页面产生任何的影响,

这两个元素是专门为定义CSS样式而生的

a标签

超连接标签

所谓超连接是指从一个网页指向一个目标的链接关系, 这个目标能够是另外一个网页,也能够是相同网页上的不一样位置,还能够是一个图片,一个电子邮件地址, 甚至能够是一个应用程序.

什么是URL?
URL是统一资源定位器的缩写, 也被称为网页地址, 是因特网上标准的资源的地址
URL举例:
http://www.sohu.com/stu/intro.html
http://222.127.123.33/stu/intro.html

URL地址有4部分组成
第一部分: 为协议: http://, ftp://等
第二部分: 为站点地址: 能够是域名或IP地址
第三部分: 为页面在站点中的目录: stu
第四部分: 为页面名称, 例如 index.html
各部分之间用"/"符号隔开
eg:
<a href="http://www.baidu.com" target="_blank">点我</a>

href属性指定目标网页地址.该地址能够有几种类型:

  • 绝对URL -执行另外一个站点(好比 href="http://www.jd.com")
  • 相对URL - 指当前站点中确切的路径 (href="index.html")
  • 锚 - 指向页面中的锚(href="#top")

target:

  • _blank表示在新标签页中打开目标网页
  • _self表示在当前标签中打开目标网页

列表

1.无序列表

<ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
</ul>

type属性:

  • disc (实心原点, 默认值)
  • circle (空心圆圈)
  • square (实心方块)
  • none (无样式)

2.有序列表

<ol type="1" start="2">
    <li>第一项</li>
    <li>第二项</li>
</ol>

type属性:

  • 1 数字列表, 默认值
  • A 大写字母
  • a 小写字母
  • I 大写罗马
  • i 小写罗马

3.标题列表

<dl>
    <dt>标题1</dt>
        <dd>内容1</dd>
    <dt>标题2</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
</dl>

表格

表格是一个二维数据空间, 一个表格由若干行组成,单元格里能够包含文字.列表,图案,表单,数字符号,预置文本和其余的表格内容.

表格最重要的目的是显示表格类数据, 表格类数据时指最适合组织为表格格式,(即按行和列组织)的数据

表格个基本结构:

<table>
   <thead>
      <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>爱好</th>
      </tr>
   </thead>
   <tbody>
       <tr>
          <td>1</td>
          <td>kang</td>
          <td>wan</td>
       </tr>
      <tr>
          <td>2</td>
          <td>wei</td>
          <td>日天</td>
        </tr>
   </tbody>

</table>

属性:

  • border: 表格边框
  • cellpadding: 内边框
  • cellspacing: 外边距
  • width: 像素 百分比: (最好经过CSS来设置长宽)
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列( 即合并单元格)

HTML之form

功能:

表单用于向服务器传输数据,从而实现用户与Web服务器的交互

表单可以包含input系列标签,好比文本字段,复选框,单选框,提交按钮等

表单还能够包含textarea,select,filedset和lable

表单属性

属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）
autocomplete 规定浏览器应该自动完成表单（默认：开启）
entype 规定被提交数据的编码（默认：url-encoded）。若是是上传文件须要将enctype="multipart/form-data"
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
movalidate 规定浏览器不验证表单
target 规定action属性中地址的目标(默认: _self).

表单元素

基本概念:

HTML表单是HTML元素中较为复杂的部分, 表单每每和脚本,动态页面,数输处理等功能结合,所以它是制做动态网站很重要的内容.表单通常用来收集用户的输入信息

表单的工做原理:

访问者在浏览有表单的网页时,可填写必须的信息,而后按某个提交按钮提交,这些信息经过Internet传送到服务器上.

服务器上专门的程序对这些数据进行处理,若是有错误会返回错误的信息,并要求纠正错误,当数据完整无误后,服务器反馈一个输入的信息.

input

<input>元素会根据不一样的type属性,变化为多种形态.
type属性 表现形式 对应代码
text 单行输入文本
password 密码输入框
date 日期输入框
checkbox 复选框
radio 单选框
submit 提交按钮 <input type='submit" value="提交"/>
reset 重置按钮
button 普通按钮
hidden 隐藏输入框
file 文本选择框

属性说明:

  • name: 表单提交时的"键",注意和id的区别
  • value: 表单提交时对应的值
    • type="button", "reset", "submit"时, 为按钮上显示的文本内容
    • type="text","password","hidden"时, 为输入框的初始值
    • type="checkbox","radio","file"时, 为输入相关联的值
  • checked: radio和checkbox里默认被选中的项
  • readonly: text和password设置只读
  • disabled: 全部input均适用

select标签

<form action="" method="post">
    <select name="city" id="city">
        <option values='1'>北京</option>
        <option selected="selected" value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">深圳</option>
    </select>
</form>

属性说明:

  • multiple: 布尔属性设置后为多选,否者默认单选
  • disabled; 禁用
  • selected: 默认选中该项
  • value: 定义提交时的选项值

lable标签

定义: 标签为input元素定义标注(标记)

说明:

  1. lable 元素不会向用户呈现任何的特殊效果.
  2. 标签的for属性值应当与相关元素的id属性值相同 
<form action="">
    <lable for="username">用户名</lable>
    <input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">默认内容</textarea>

属性说明:

  • name: 名称
  • rows:行数
  • cols:列数
  • disabled:禁用

标签的总结

块级元素：块级大多为结构性标记

  <h1>...</h1>  标题一级

  <h2>...</h2>  标题二级

  <h3>...</h3>  标题三级

  <h4>...</h4>  标题四级

  <h5>...</h5>  标题五级

  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

  <ul>...</ul>  无序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定义列表

  <table>...</table>  表格

  <form>...</form>  表单

  <div>...</div>

行内元素：行内大多为描述性标记

  <span>...</span>

  <a>...</a>  连接

  <br>  换行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <img >  图片

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本

  <select>...</select>  下拉列表

·块级元素

  1.老是重新的一行开始

  2.高度、宽度都是可控的

  3.宽度没有设置时，默认为100%

  4.块级元素中能够包含块级元素和行内元素

·行内元素

  1.和其余元素都在一行

  2.高度、宽度以及内边距都是不可控的

  3.宽高就是内容的高度，不能够改变

  4.行内元素只能行内元素，不能包含块级元素
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程