前端Summary——HTML学习

最新推荐文章于 2022-06-06 17:52:56 发布

ZoJane

最新推荐文章于 2022-06-06 17:52:56 发布

阅读量538

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_35706707/article/details/109466187

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一。基础内容

1.基础总结

Html基本结构

2.html的基本标签

（1）head标签

<head>内部标签	说明
<title>	定义网页的标题
<meta>	定义网页的基本信息（供搜索引擎）
<style>	定义CSS样式
<link>	链接外部CSS文件或脚本文件
<script>	定义脚本语言
<base>	定义页面所有链接的基础定位（用得很少）

3.段落与文字

（一）、段落标签

（1）段落与文字标签

标签	语义	说明
<h1>~<h6>	header	标题
<p>	paragraph	段落
<br>	break	换行
<hr>	horizontal rule	水平线
<div>	division	分割（块元素）
<span>	span	区域（行内元素）

（2）文本格式化标签

标签	语义	说明
<strong>	strong（加强）	加粗
<em>	emphasized（强调）	斜体
<cite>	cite（引用）	斜体
<sup>	superscripted（上标）	上标
<sub>	subscripted（下标）	下标

二.HTML

4.HTML样式、链接和表格

（一）HTML样式

（1）三种样式表插入方法

说明：rel="stylesheet":外部样式表

type="text/css":引入文档的类型

外部样式表：

内部样式表：

body {background-color:red}

p {margin-left: 20px}

</style>

内联样式表：

(二)html链接

（1）链接数据：文本链接、图片链接

<a href="http://www.baidu.com">nihao</a>

</a>

（2）属性：

href属性:指向另一个文档的链接

name属性：创建文档内的链接

文档内跳转：

<a name="tips">hello</a>

<br>

<a href="#tips">跳转到hello</a>

（三）html表格

（·1）表格标签

<table border="1">：显示表格边框

标签	语义	说明
table	table（表格）	表格
tr	table row（表格行）	行
td	table data cell（表格单元格）	单元格
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格

（2）表格基本结构

<tr>

</tr>

<tr>

</tr>

</table>

（3）表格完整结构

（4）合并行和合并列

1.合并行: <td rowspan="跨度的行数">

2.合并列：<td colspan="跨度的列数">

5.html列表、块和布局

（一）列表

(1)有序列表

<ol type="列表项符号">

<li>有序列表项</li>

</ol>

列表项符号：A、a、l、i、start、

（2）无序列表

<ul type="列表项符号">

<li>无序列表项</li>

</ul>

type属性值	列表项的序号类型
disc	默认值，实心圆“●”
circle	空心圆“○”
square	实心正方形“■”

（二）块

(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；

(2)、块元素特点：

（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；

（2）块元素内部可以容纳其他块元素或行元素；

常见块元素有：h1~h6、p、hr、div等。

(3)、行内元素特点：

（1）可以与其他行内元素位于同一行；

（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；

常见行内元素有：strong、em、span等。

（三）布局

（1）div布局：

body{

margin: 0px;

}

div#container{

width: 100%;

height: 950px;

background-color: brown;

}

div#head{

width: 100%;

height: 10%;

background-color:red;

}

div#content_menu{

width: 30%;

height: 80%;

background-color:darkblue;

float: left;

}

div#content_body{

width: 70%;

height: 80%;

background-color:green;

float: left;

}

div#foot{

width: 100%;

height: 10%;

background-color: blueviolet;

clear: both;

}

</style>

</div>

（2）table布局

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

6.html表单和表单与php交互

（一）表单的创建

需要用<form></form>包裹住<input>

（1）复选框

你喜欢的水果有？

<br/>

苹果<input type="checkbox">

香蕉<input type="checkbox">

西红柿<input type="checkbox">

（2）单选按钮

你的性别：

男<input type="radio" name="sex">

女<input type="radio" name="sex">

（3）下拉列表

请选择你的公司

<option>baidu</option>

<option>bytedance</option>

<option>tencent</option>

</select>

（4）文本域

<textarea cols="30" rows="30">请输入内容</textarea>

（5）创建按钮

（二）与php交互

用户名：<input type="text" name="name">

密码：<input type="password" name="password">

<br/>

</form>

解释

action指定具体要提交到哪个服务器的地址，method代表提交方式有get和post，
提交按钮按下就会向服务器提交表单。

7.html背景和实体

（一）背景

（1）背景图片

</body>

（2）背景颜色

</body>

（二）实体

类似<html>在网页中展现的方式，用实体，搜索html实体即可。

8.新增的主体结构元素（article、section、nav、aside、time）

（一）article元素

（1）含义

article元素代表文档、页面、应用程序、或网站中一个独立的、完整的、可以独自被外部引用的内容，它可以是一篇论坛帖子、一篇文章、一篇新闻报道、一篇博客文章等任何独立的内容块，它通常有自己的标题、页脚等。因此，article元素里面可包含独立的 header、footer 等结构化元素。

（2）用法

<p>hello,欢迎来到百度</p>

</header>

</footer>

</article>

（二）section元素

（1）含义

section元素对于网站或者应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成，但是section 元素不是一个普通的容器元素，当一个容器需要被直接定义样式或者脚本定义行为时，推荐使用div而不是section

（2）用法

（三）nav元素

（1）含义

nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其它部分。并不是所有的链接组都要被放进nav元素，只需要将主要的、基本的链接组放到nav元素中即可。

nav元素可以用于一下场合：

传统导航条

侧边栏导航

内页导航

翻页导航

（2）用法

<nav>

<ul>

</ul>

</nav>

（四）aside元素

（1）含义

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其它类似的有别与主要内容的部分。

（2）用法

<aside>

<p>语法：这是一个对语言来说很重要的内容体</p>

</aside>

</article>

<aside>

<nav>

<ul>

</ul>

</nav>

</aside>

（五）time元素

（1）含义

（2）用法

9.新增的非主体结构元素（header、footer、address）

（一）header元素

（1）含义

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。

（2）用法

<h1>IT最新技术</h1>

<nav>

<ul>

</ul>

</nav>

</header>

（二）footer元素

（1）含义

footer元素可以作为其上层父级内容区块或一个根区块的脚注。footer通常包含其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

（2）用法

<ul>

</ul>

</footer>

（三）address元素

（1）含义

address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。

10.表单form新增元素与属性

（一）form属性

（1）含义

在html4中表单内的从属元素必须写在表单内部，在html5中没有这个限制，可以写在页面任何地方，然后给该元素一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定的表单了。

（2）改变

原：

</form>

现：

</form>

<textarea form="testform"></textarea>（可以在form之外）

（二）formaction属性

（1）含义

在html4中，一个表单所有的元素只能通过表单的action属性统一提交另一页面，而在HTML5中可以给所有的提交按钮（<input type="submit">、<input type="image">、<button type="submit">），都增加了不同的formaction属性，点击不同的按钮提交给不同的页面。

（2）改变

原：

<input type="submit" name="s1" value="v1" >提交到xx.jsp

<input type="submit" name="s2" value="v2" >提交到xx.jsp

<input type="submit" name="s3" value="v3" >提交到xx.jsp

</form>

现在可以：

<input type="submit" name="s1" value="v1" formaction="xx.jsp">提交到xx.jsp

<input type="submit" name="s2" value="v2" formaction="xxx.jsp">提交到xxx.jsp

<input type="submit" name="s3" value="v3" formaction="xxxx.jsp">提交到xxxx.jsp

</form>

（三）formmethod属性

（1）含义

在 HTML4 中，一个表单内只能有一个 action 属性用来对表单内所有元素统一指定提交页面，所以每个表单内只能有一个 method 属性来统一指定提交方法，而在 HTML5 中，可以使用 formmethod 属性来对每个表单元素分别指定不同的提交方法

（2）改变

现在可以：

<input type="submit" name="s1" value="v1" formmethod="post" formaction="http://www.baidu.com">提交至本页

<input type="submit" name="s1" value="v1" formmethod="get" formaction="http://www.baidu.com">到百度

</form>

（四）formenctype属性

（1）含义

在 HTML4 中，表单元素具有一个 enctype 属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码，而在 HTML5 中，可以使用 formenctype 属性对表单元素分别指定不同的编码方式

（五）formtarget属性

（1）含义

在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。

在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需要加载的页面。

（六）autofocus属性（重要）

（1）含义

为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。

（2）使用

<form>

</form>

（七）required属性（重要）

（1）含义

HTML5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。

（2）使用

</form>

（八）labels属性（重要）

（1）含义

在HTML5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。

（2）使用

function Validate() {

var txtName = document.getElementById("txt_name");

var button = document.getElementById("btnValidate");

var form = document.getElementById("testform");

if(txtName.value.trim()==""){

var label = document.createElement("label");

label.setAttribute("for","txt_name");

form.insertBefore(label,button);

txtName.labels[1].innerHTML = "请输入姓名";

txtName.labels[1].setAttribute("style","font-size:9px;color:red")

}

</script>

</form>

（九）control属性

（1）含义

在html5中，可以在表单内部放置一个标签元素，并且通过该标签的control属性来访问该表单元素。

（2）使用（设置默认值）

function setValue() {

var label = document.getElementById("label");

var textbox = label.control;

textbox.value = "010010";

}

</script>

<form>

邮编：

<small>请输入六位数字</small>

</label>

</form>

（十）placeholder属性（十分重要）

（1）含义

placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。

（2）使用

（十一）list属性（重要）

（1）含义

在html5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id.

datalist元素也是html5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不再选择列表之内时，

允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。

（2）使用

<form>

</datalist>

</form>

（十二）pattern属性（稍重要）

含义

在HTML5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。

（2）使用

请输入内容

</form>

（十三）selectiondirection属性

（1）含义

对input元素和textarea元素，HTML5增加了selectiondirection属性。当用户在这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，改属性值为“forward”,当用户反向选取文字时，该属性值为“backward”。当用户没有选取任何文字时，该属性值为“forward”。

（2）使用

function AD() {

var control = document.forms[0]['text'];

var Direction = control.selectionDirection;

alert(Direction);

}

</script>

<form>

</form>

（十四）indeterminate属性

含义

对于复选框checkbox元素来说，过去只是选取与非选取这两种状态。在html5中，可在javascript脚本代码中对该元素使用indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。

（2）使用

<input type="checkbox" indeterminate id="cb">属性测试

var cb = document.getElementById("cb");

cb.indeterminate = true;

</script>

（十五）image提交按钮的height属性与width属性

含义

针对类型为image的input元素，html5新增了两个属性，height、width分别用来指定图片按钮的高度和宽度。

（2）使用

姓名：<input type="text" name="name">

</form>

ZoJane

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端Summary——HTML学习

基础内容基础总结Html基本结构html的基本标签head标签 <head>内部标签说明 <title> 定义网页的标题 <meta> 定义网页的基本信息（供搜索引擎） <style> 定义CSS样式 <link> 链接外部CSS文.
复制链接

扫一扫