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

HTML

时间:2019-10-11 21:50:14      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:标题   get   self   响应   oge   lin   Enctype   第三部分   鼠标悬停   

web服务本质

浏览器发请求 --> HTTP协议 --> 服务端接收请求 -->服务端返回响应 -->服务端把HTML文件内容发给浏览器-->浏览器渲染页面

HTML是什么

  • 超文本标记语言(Hypertext Markup Language , HTML)是一种用于创建网页的标记语言
  • 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
  • 网页文件的扩展名:.html 或者 .htm

HTML不是什么

  • HTML是一种标记语言,他不是一种编程语言

  • HTML使用标签来描述网页

HTML默认格式

<!DOCTYPE html>               # 声明为HTML5文档
<html lang="zh-CN">           # 是HTML文档的开始标记
<head>                      # 定义了HTML文档的头部分
  <meta charset="UTF-8">      # 对于中文网页需要声明编码格式
  <title>css样式优先级</title> # 网页的标题
</head>
<body>                      # 网页的身体部分

</body>
</html>                     # 是HTML文档的结束标记

# 一些软件默认的生成的一种固定的格式

HTML标签

重要的标签

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

注释方法

<!--注释内容-->

最开始标签

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

head内常用标签

<title></title> # 定义网页的标题
<style></style> # 定义内部样式表
<script></script> # 定义JS代码或引入外部JS文件
<link/> # 引入外部样式表文件或网站文件
<meta/> # 定义网页元信息
    1. <meta>元素可以提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词
    2. <meta>标签位于文档的头部,不包含任何内容
    3. <meta>提供的信息是用户不可见的
    <meta>标签的组成: <meta>标签共有两个属性,他们分别是http-equiv属性和name属性, 不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能
    1. http-equiv属性: 相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确的显示网页内容,与之对应的值为content --> content中的内容其实就是各个参数的变量值.
    <!--指定文档的编码类型-->
    <meta http-equiv='content-Type' charset='UTF8'>
    <!--2秒后跳转到对应的网址,注意引号-->
    <meta http-equiv='refresh' content='秒数;跳转后的地址'>     
    <!--告诉IE以最高级模式渲染文档-->
    <meta http-equiv='x-ua-compatible' content='IE=edge'>
    2. name属性:只要用户描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
    <!--规定一个逗号分隔的关键词列表 - 相关的网页(告诉搜索引擎页面是与什么相关的).(用于搜索引擎对页面进行分类)-->
    <meta name='keywords' content=''> 
    <!--规定页面的描述。搜索引擎会把这个描述显示在搜索结果中.-->
    <meta name='description' content=''> 

    注意: 如果设置了http-equiv属性,则不应该设置name属性

body内常用标签

<!--基本标签(块级标签和内联标签)-->
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

<p>段落标签</p> : 占一行

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

<br> : 换行

<hr> : 水平线

<!--特殊字符-->
&nbsp; 空格,
&gt; 大于号
&lt; 小于号
&amp; & 也就是他自己本身,
&yen; ¥ 人民币符号,
&copy; 版权符号,
&reg; 注册符号,
            
<!--div标签和span标签-->
div标签用来定义一个块级元素,并无实际的意义.主要通过CSS样式为其赋予不同的表现
span标签用来定义内联(行内)元素,并无实际的意义.主要通过CSS样式为其赋予不同的表现

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

注意:
关于标签的嵌套:一般块级元素内可以包含内联元素和某些块级元素,但是内联元素中不能包含块级元素,他只能包含其他内联元素.
p标签不能包含块级元素,p标签也不能包含p标签

<!--img标签-->
<img src='图片的路径' alt='图片未加载成功显示的提示' title='鼠标悬停时提示的信息' width='' height=''>
宽和高两个属性只有一个会等比缩放

<!--a标签-->
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件,一个文件,甚至是一个应用程序.
    <!--url-->
    url --> 统一资源定位器,也被=称为网页地址,是inter网上标准的资源的地址
    eg: http://www.chaoge.com/name/my.html

    url组成部分:
        第一部分: 协议: http://,ftp://等
        第二部分: 站点地址: 可以是域名,也可以是ip地址 www.chaoge.com
        第三部分: 网页在站点中的目录: /name/
        第四部分: 页面名称: my.html
    每个部分使用'/'隔开
        
<a href='点击之后跳转的地址' target='_blank/_self'>点击</a>
href:
    1. 可以是绝对地址
    2. 可以是相对地址
    3. 可以是锚点 (href='所指向的标签的id')
target:
    _blank: 重新打开一个页面显示网页
    _self: 就当前页面显示点击之后的页面(默认)

<!--列表-->
1. 无序列表
<ul type='属性'>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ul>

type属性:
    1. disc - 实心圆点(默认值)
    2. circle - 空性圆点
    3. square - 实心方块
    4. none - 啥也没有

2. 有序列表
<ol type='属性' start='从第几个开始-必须是数字'>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ol>

type属性:
    1. 1 - 数字列表(默认值)
    2. A - 大写字母
    3. a - 小写字母
    4. I - 大写罗马
    5. i - 小写罗马

3. 标题列表
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dt>内容2</dt>
</dl>

<!--表格-->
表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干个单元格组成,单元格可以包含文字,列表,图案,表单,数字符号,预置文本和其他的表格等内容.
表格最重要的目的是显示表格内数据,表格内数据是指最适合组织为表格格式(即按行和列组织)的数据
表格的基本结构:
<table border='表格边框' cellpadding='内边距' cellspacing='外边距'>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
</table>

boreder: 表格边框
cellpadding: 内边距
cellspacing: 外边距
width: 像素 百分比
rowspan: 单元格竖跨多少行
colspab: 单元格横跨多少列

实现数据交互的重点标签

<!--form表单-->
功能:
表单用于向服务器传输数据,从而实现用户与web服务器的交互.
表单能够包含input系列标签,比如文本字段,复选框,单选框,提交按钮等.
表单还可以包含textarea,select,fieldset和label标签.

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

表单其实就是用户才操作完表单里面的一些框,按钮之后,把所选的数据传输到服务器上面.

表单中的 input 标签

<!--input标签中的type属性-->
text : 单行输入文本
password : 密码输入框 -> 看不见输入的东西
date : 日期输入框
checkbox : 复选框
radio : 单选框 -> 基于name,多个单选框是同一个name,就可以实现单选
submit : 提交按钮
reset : 重置按钮
button : 普通按钮
hidden : 隐藏输入框
file : 文本选择框 -> 就是提交文件的


属性:
    name : 表单提交时的"键"
    value : 表单提交时的"值"
    checked : radio和checkbox默认被选中的项
    readonly : 输入框只能看不能摸
    disabled : 所有input都适用,标签被禁用了

表单中的select标签

<!--select标签这个就是一个下拉框-->

<form action="提交到哪儿去" method="提交方式GET/POST">
    <select name="city">
        <option value="北京">北京</option>
        <option value="上海" selected="selected">上海</option> # selected默认被选中的项,类似于checked
    </select>
    
</form>

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

表单中的label标签和textarea多行文本标签

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

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

<!--textarea标签-->

<textarea name="名称" rows="行数" clos="列数" disabled(禁用)></textarea>

HTML

标签:标题   get   self   响应   oge   lin   Enctype   第三部分   鼠标悬停   

原文地址:https://www.cnblogs.com/xiongchao0823/p/11657099.html

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