码迷,mamicode.com
首页 > Web开发 > 详细

HTML基础总结

时间:2019-12-29 23:34:56      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:head   javascrip   password   标准模式   包含   记录   sof   post   添加   

一、什么是HTML

HTML是一种超文本标记语言

  • 超文本:文本,图片,音频,视频,超链接等
  • 标记:符号,标签 标记是没有逻辑的

组成:

  • 指令
  • 转义字符
  • 标签

目的:完成页面的搭建

HTML页面大致的组成部分:

  • <!doctype html>:必须出现在页面的最上方,规定该文档采用的html版本类型
  • <html>:页面标签:包含所有页面内容,只有head与body两个子标签
  • <head> :头标签:样式、脚本、后勤操作:页面编码、页面标签标题图标,主放功能
  • <body>:体标签:页面显示内容存放区域、样式、脚本,主放内容

简单的一个htm5搭建:

<!DOCTYPE html>
<html lang="en"> <!--en会告诉浏览器内容为英文,中文为zh,若没有lang则浏览器会根据内容自己解析>
<head>
    <meta charset="UTF-8"> <!--meta 为body里内容的编码的方式-->
    <title>Title</title>  <!--网页的标题-->
</head>
<body>
</body>
</html>

二、指令

  • 注释:<!--注释内容-->,还有一种不常用的注释写法<!-注释内容->
  • <!DOCTYPE> 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
  • <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前,<!DOCTYPE>声明告知浏览器的解析器用什么文档标准解析这个文档(标准模式)。若声明错误或未声明会导致文档以兼容模式/混杂模式呈现。
  • <!DOCTYPE> 标签没有结束标签。<!DOCTYPE> 声明不区分大小写。总是先给 HTML 文档添加 <!DOCTYPE> 声明,确保浏览器能够预先知道文档类型。

三、转义字符

语法:&内容;

常用的转义字符

<: &lt;
>: &gt;
空格:&nbsp;
版权:&copy;

四、标签

1.标题标签

? h1~h6:里面内容相对于普通的内容加粗,且会自动换行

2.段落标签

? p:自带换行,有段落间距

3.文本类型标签

? 共同点都不带换行

? 常用的文本类型标签

  • b与strong:内容加粗
  • i与em:内容斜体
  • sup:上角标
  • sub:下角标
  • span:没有什么意义,但是会用来嵌套其他文本表示共同使用

4.超链接标签

a标签

例如如下一句

<a href =‘http://www.baidu,com‘ targe = ‘_slef‘>页面中显示的文本内容</a>
  • href:里面选择超链接地址,注意如果没加http://,https://,file://,前缀默认会在原来地址后面添加拼接成一个新的链接
  • targe:
    • _self:在原本的窗口打开
    • _blank:创建一个新窗口打开
    • _top:覆盖上一条记录
    • _parent:覆盖所有的记录

    且超链接点击后会在浏览器上生成记录,显示文本颜色会变紫色

5.图片标签

<img title="这是二哈" alt="二哈" src="url">
  • title:鼠标停留会显示,也可以用于其他标签当属性
  • alt:src中的 url响应失败显示的内容
  • src:图片的url

6.列表标签

? ul>li:无序标签

? ol>li:有序标签

特殊的快捷键:ul>li{第$列}*5,其中$表示显示序列的位数
 显示结果:
<ul>
    <li>第1列</li>
    <li>第2列</li>
    <li>第3列</li>
    <li>第4列</li>
    <li>第5列</li>
</ul>
ul>li{第$$列}*5 显示结果
<ul>
    <li>第01列</li>
    <li>第02列</li>
    <li>第03列</li>
    <li>第04列</li>
    <li>第05列</li>
</ul>

7.表格标签

table>tr>th|td

  • tr:行
  • th:标题单元格
  • td:普通单元格

属性

  • border:边框像素
  • cellspacing:单元格的间距,最小为0
  • cellpadding:单元格的内边距
  • rules:all处理成一条直线,但是不能与cellspacing一起用会冲突
  • colspan:th与td的属性表示占几列默认为1
  • rowspan:th与td的属性表示占几行默认为1

案例:

    <table border="1" rules="all">
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td colspan=2">2</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>

五、表单

from>input|label|button|textarea|select

1.form表单属性

属性 含义
action url 指定一个表单处理目标URL,表单数据将被提交到该URL地址的处理程序。如果该属性值为空,则提交到文档自身。该属性值可以为绝对地址、相对地址、文档片段,甚至是脚本代码
method get或post 将表单数据提交到http服务器的方法,可能值有两个:get和post
enctype application/x-www-form-urlencoded 指定表单数据的编码类型,此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencoded对所有字符进行编码。如果表单包含用于文件上传的控件(input type=“file”),那么这个属性值必须设为multipart/form-data ,不对字符进行编码。

 

2.input标签

input属性大概介绍:

  • type:按钮的属性
  • id:标识
  • name:与后端交互的key
  • values:给后端的值,如果没有name则没法给到后端

案例分析:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单标签</title>
</head>
<body>
    <!--1、form的作用:完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->
    <form action="">
        <p>
            <!--label作为input的文本解释标签,for绑定id-->
            <!--value属性是表单标签的内容,就是提交给后台的-->
            <!--name是提交给后台的key,value是值-->
            <!--placeholder是文本占位符-->
            <!--type是决定标签的类型本质(input|button)-->
            <!--multiple,checked布尔类型属性,不需要写值,multiple多选 checked默认激活-->
            <label for="username">账号:</label>
            <input id="username" type="text" value="Owen" name="usr">
        </p>
        <p>
            <label for="password">密码:</label>
            <input id="password" type="password" placeholder="请输入密码" name="pwd">
        </p>
        <p>
            <input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
        </p>
        <p>
            <input type="file" name="file" multiple>
        </p>
        <p>
            男<input type="radio" value="male" name="sex" checked>
            女<input type="radio" value="female" name="sex">
        </p>
        <p>
            男<input type="checkbox" value="male" name="hobby" checked>
            女<input type="checkbox" value="female" name="hobby" checked>
            哇塞<input type="checkbox" value="other" name="hobby">
        </p>
        <p>
            <button type="button">普通按钮</button>
            <button type="reset">重置按钮</button>
            <button type="submit">提交按钮</button>
        </p>
        <p>
            <textarea cols="30" rows="10"></textarea>
        </p>
        <p>
            <input type="button" value="按钮" />
            <input type="reset" value="重置" />
            <input type="submit" value="登录" />
        </p>
    </form>
</body>
</html>

3.input标签type属性

type属性

空间名称

对应代码

text

单行文本输入框

<input type="text"/>

password

密码输入框

<input type="password"/>

checkbox

复选框

<input type="checkbox" checked=‘checked‘/>

radio

单选框

<input type="radio"/>

submit

提交按钮

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

reset

重置按钮

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

button

普通按钮

<input type="button" value=“普通按钮”/>

hidden

隐藏按钮

<input type="hidden" value=“隐藏按钮”/>

file

文本选择框

<input type="file"/>

4.select标签(下拉列表)

<form id="form1" name="form1" method="post" action="">
    <select name="city" id="city">
        <option value="北京">北京</option>
        <option value="天津" selected="selected">天津</option>
        <option value="河北">河北</option>
        <option value="山东">山东</option>
        <option value="内蒙">内蒙</option>
    </select>
</form>

5.select属性

multiple : 布尔属性,设置后允许多选,否则只能选择一个 disabled : 禁用该下拉列表 selected : 首次显示时,为选中状态 value : 定义发往服务器的选项值

6.textarea标签

<form id="form1" name="form1" method="post" action="">
    <textarea cols=“宽度” rows=“高度” name=“名称”>
    默认内容
    </textarea>
</form>

7.textarea属性

属性

属性值

说明

name

name

控件名称

rows

number

设置多行文本框的显示行数(高度)

cols

number

设置多行文本框的显示列数(宽度)

disabled

disabled

布尔属性,设置当前文本框为禁用状态

8.label标签

<form id="form1" name="form1" method="post" action="">
    <label for="username">用户名</label>
    <input type="text" name="username" id="username" />
</form>

9.label属性

label元素不会向用户呈现任何特殊效果
<label> 标签的 for 属性应当与相关元素的 id 属性相同
结合CSS可以控制表单文本或控件对齐,美化表单

10.button标签

 <button> 标签定义一个按钮。

 在 button 元素内部,您可以放置内容,比如文本或图像。

六、单标签

  • br:换行
  • hr:分割线
  • 表单使用的标签
  • img:图片标签

七、div标签

  • <div> 可定义文档中的分区或节(division/section)。
  • <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
  • 如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
  • <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
  • 不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
  • 可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

八、注意

  • html中不区分大小写
  • 如果你写的显示内容没有写在body内,浏览器解析后仍会默认把内容放到body标签内

属性

HTML基础总结

标签:head   javascrip   password   标准模式   包含   记录   sof   post   添加   

原文地址:https://www.cnblogs.com/meijifu/p/12116468.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!