在前端中的html基础知识

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在前端中的html基础知识，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8414字，纯文字阅读大概需要13分钟。

内容图文

这次给大家带来在前端中的html基础知识，使用前端中html基础知识的注意事项有哪些，下面就是实战案例，一起来看一下。

HTML基本知识
学习html首先我们先看看HTML本质：

web框架本质

我们在学socket，我们创建一个socketserver，然后运行起来，有一个client客户端要连接socket服务端，连接上之后，如果两边都没有close，就一直不断开，可以不断的进行请求。

那我们说一个网站，我们在服务器端运行我们的网站，所有的客户端就可以通过浏览器访问我们写的网站，所以我们用的iis,apache等它们本质上就是一个socket服务端，而我们打开的浏览器就是client端，进行数据传输。

我们如果基于TCP,客户端和服务端连接之后，只要两边不close，也都可以一直不断的访问交互。但是网站浏览器浏览和这个是不一样的。浏览器访问了服务端，服务端给我们数据，浏览器得到了数据之后，连接就立马断开了，如果还想要拿数据，还得再次建立连接。即一次请求，一次响应，一次断开。

我们下面写一个socket服务端：

 1 import socket 2  3 def handle_request(client): 4     buf = client.recv(1024) 5     client.send(bytes("HTTP/1.1 200 ok\r\n\r\n",encoding="utf-8")) 6     client.send(bytes("Hello,Charles",encoding="utf-8")) 7  8  9 def main():10     sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)11     sock.bind(('localhost',8000))12     sock.listen(5)13 14     while True:15         connection,addr = sock.accept()16         handle_request(connection)17         connection.close()18 19 if name == 'main':20     main()

我们运行之后用浏览器访问起来：

在前端中的html基础知识 - 文章图片

所以服务器的本质根源就是这20行代码，建立socket连接。

其实我网站的显示内容本质上也就是一大堆的字符串，我们在send函数中发送了hello,clarles，在网站上就显示了那个内容，如果我们加上一些标签比如

<h1 style='background-color:red'>Hello,Charles</h1>

那么浏览器中显示的就是如下：

在前端中的html基础知识 - 文章图片

那所以客户端和服务器端进行交互的时候，服务端返回的永远是字符串，这个字符串之所以我们在浏览器上能看到上图的样式，那是因为浏览器把这个字符串进行了解析。浏览器认识这种格式。

所以我们要学的html其实就是一套浏览器认识的规则，这个就是html本质。

而我们开发者要做的就是：

1.学习html规则|（充当模板的作用）

2.从数据库中获取数据，然后替换到html文件的指定位置,这个事情以后就由web框架来做

html标签知识

注释：

标签分类：

1.自闭合标签：<meta charset="utf-8">

2.主动闭合标签：<title>测试</title>

head内的标签

title

网页头部信息：<title>TItle</title>

Link

1.css

2.icon:网站图标

在前端中的html基础知识 - 文章图片

Style

在页面中写样式

例如：
<style type="text/css" >
.bb{
background-color: red;
}
</style>

Script

1.引进文件

2.写js代码

< script type="text/javascript" > ... </script >

body内的标签

标签一般分为两种：块级标签和行内标签

行内标签：a、span、select 等

块级标签：p、h1、p 等

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

空格：  小于号：> 大于号：<

1.p和br

p表示段落，默认段落之间是有间隔的！

br 是换行

<p>1231<br/>32132</p>
<p>123132132</p>
<p>123132132</p>

2.H 标签

3.input系列:

a.text文本框：<input type="text" name="user" value="输入框中的默认值"> ，显示效果：

b.password密码框:<input type="password" name="passwd">输入的密码是点,显示效果：

c. submit提交按钮:<input type="submit" value="提交">,显示效果：

用于表单的提交

d.button按钮:<input type="button" value="登录">,显示效果：

仅仅只是一个按钮，没有办法进行表单的提交

e. radio单选框：<input type="radio" value="登录" name="gender">,

name属性如果都相同，则互斥

value属性用于后台获取选择的值

<form>
        <p>
            <p>请选择性别：</p>
        男：<input type="radio" name="gender" value="1"/>
        女：<input type="radio" name="gender" value="2"/>
        </p>
        <input type="submit" value="提交"/>
    </form>

在前端中的html基础知识 - 文章图片

f.checkbox多选框：<input type="checkbox" value="1" name="hobby">

<p>爱好</p>篮球：<input type="checkbox" name="hobby" value="1"/>足球：<input type="checkbox" name="hobby" value="2"/>排球：<input type="checkbox" name="hobby" value="3"/>网球：<input type="checkbox" name="hobby" value="4"/><p>技能</p>
 python：<input type="checkbox" name="skill" value="python"/>
 php：<input type="checkbox" name="skill" value="php"/>

效果:

在前端中的html基础知识 - 文章图片

如果需要默认选中的话：加一个属性：checked="checked"

g.file上传文件：<input type="file" name="fname">

如果你要用上传文件功能，你再form表单中一定要加一个属性：enctype='multipart/form-data'

h:reset内容重置:<input type="reset" name="重置">

4.textarea多行文本:

<textarea name="meno">asdfasdf</textarea>

多行文本的默认值写在中间

5.select下拉框：

<select name="city" size="10" multiple="multiple">
      <option value="1">北京</option>
       <option value="2" selected="selected">上海</option>
       <option value="3">南京</option>
       <option value="4">广州</option>
       <option value="5">深证</option></select>

显示效果：

参数解释：

size设置一次显示多少个值
multiple可以多选，按住control键
selected="selected"：默认选择的值

分组显示：optgroup，但是这些江苏省，湖南省没有办法选中

<select name="city2" size="5">
     <optgroup label="江苏省">
             <option>宿迁</option>
             <option>苏州</option>
     </optgroup>
     <optgroup label="湖南省">
             <option>湘潭</option>
             <option>长沙</option>
     </optgroup></select>

效果如图：

6. a标签

作用：

跳转
锚点 :href="#某个标签的id"标签的ID不允许重复

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <p id="i1" style="height:600px;">第一章内容</p>
    <p id="i2" style="height:600px;">第二章内容</p>
    <p id="i3" style="height:600px;">第三章内容</p>
    <p id="i4" style="height:600px;">第四章内容</p></body></html>

这个就是一个锚的效果：点击第一章，跳转到本页面的第一章位置；点击第二章，跳转到本页面的第二个位置

7.img标签

注意：默认img标签，有一个1px的边框，在使用的时候应该先用border:0；把边框去掉

8.列表

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body>
    <ul style="background-color: red">
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ul>
    <ol style="background-color: green">
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
    </ol>
    <dl style="background-color: yellow">
        <dt>asdf</dt>
            <dd>asdf12</dd>
            <dd>asdf12</dd>
        <dt>asdf</dt>
            <dd>asdf12</dd>
            <dd>asdf12</dd>
    </dl></body></html>

显示效果如图：

在前端中的html基础知识 - 文章图片

9.表格：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body>
    <table border="1">
        <tr>
            <td>主机名</td>
            <td>ip</td>
            <td>端口号</td>
        </tr>
        <tr>
            <td>localhost</td>
            <td>192.168.1.1</td>
            <td>8080</td>
        </tr>
    </table>
    <!--最规范的写法，有表头，有内容-->
    <table border="1">
        <thead>
            <tr>
                <th>主机名</th>
                <th>ip</th>
                <th>端口号</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>localhost</td>
                <td>192.168.1.1</td>
                <td>8080</td>
            </tr>
        </tbody>
    </table></body></html>

效果显示：

在前端中的html基础知识 - 文章图片

要注意代码的规范性！！

合并单元格：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body>
    <!--最规范的写法，有表头，有内容-->
    <table border="1">
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td colspan="2">1</td>
                <td>1</td>
            </tr>
            <tr>
                <td rowspan="2">2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
        </tbody>
    </table></body></html>

行合并用：rowspan 列合并用：colspan

效果显示：

在前端中的html基础知识 - 文章图片

10.label标签：用于点击文字，使得关联的标签获得光标

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

在前端中的html基础知识 - 文章图片

用id把input 和 label进行关联，原本如果只是写一个label和一个input，我们在点击用户名的时候，input没有被选中，如果用for关联了input里的id之后，我们点击“用户名”的时候也就选中input输入框

11.fieldset: 在一个框中然后插入标题

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body>
    <fieldset>
        <legend>登录</legend>
        <label for="username">用户名：</label>
            <input id="username" type="text" name="user"><br>
        <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
            <input id="password" type="text" name="pwd">
    </fieldset></body></html>

显示效果：

在前端中的html基础知识 - 文章图片

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的在前端中的html基础知识全部内容，希望文章能够帮你解决在前端中的html基础知识所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/293892.html

来源：【匿名】

【上一篇】HTML与CCS结合【下一篇】PHP 和 HTML

更多 ►

【在前端中的html基础知识】教程文章相关的互联网学习教程文章

Q：HTML5是什么？为什么要用HTML5？有什么新特性？移除了哪些元素？HTML5是HTML的最新版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是替换1999年制定的HTML4.01和XHTML1.0标准，以期望能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。HTML5指的是包括HTML，CSS和Javascript在内的一套技术组合。它希望能够减少网页浏览器对基于插件的网络应用服务（Plug-in-Based Rich Internet Application,RIA），例...

HTML表格基础知识总结【图】

表格的基本就是一个框架，难点就是对表格的优化处理。<table frame="hsides" border="1" width="300px" height="100px" align="center" bordercolor="#00FF00"><caption>学生信息</caption><tr><th>学号</th><th>学号</th><th>学号</th></tr><tr id="bg"><th>123</th><th>123</th><th>123</th></tr></table>这一个最简单的表格；效果如下：至于表格的优化可以分为1.边界2.表格背景3.表格位置4.单元格间距，单元格边距。1.边界：b...

html5基础知识【图】

HTML 5新增的主体结构元素：article：表示完整的、独立的，可以被外部独自引用的内容。如一篇博客，报刊中的文章，帖子，用户评论或独立的插件。Section：用于网站页面上的内容进行分块。由内容及标题组成。Nav：用作页面导航的连接组。如：导航栏，页内导航，翻页操作等。Aside：表示当前页面的附属信息部分。如：引用，广告，侧边栏等。Time：datetime.pubdate(发布日期) 新增的非主体结构元素：header：引导和导航作用的元素。 ...

MVC 使用cshtml的一些基础知识-和相关整理

首先在认识cshtml之前，先要了解一下Razor视图引擎如果对此有疑问的话可以借鉴博客园博文：http://kb.cnblogs.com/page/96883/ 或博客博文：http://www.cnblogs.com/dengxinglin/p/3352078.html上面都讲解了Razor 以及cshtml的使用语法这里呢，我们只是整理一下大家熟悉的asp.net和cshtml之间容易出现错误的书写方法从aspx转到chshtml还是有很多要适应的地方的，本帖是个人学习笔记帖不断更新。每天开着本帖编程。按第一个有意义的...

HTML基础知识总结【图】

1.网页主要由文字、图片和按钮等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。 2.web标准w3c 万维网联盟组织，用来制定web标准web标准（制定网页要遵循的规范）：结构标准（html）、表现标准（css）、行为标准（js） 3.浏览器（客户端）vs服务器4.htmla）html (Hyper Text Markup Language ) 中文译为“超文本标记语言”，主要是通过html标记对网页中的文本，图片，声音等内容进行描述<html>标...

0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 html基础知识 html5新增标签

HTML基础知识总结【图】

HTML基础知识总结 HTML的元素网页文档的结构和格式的定义，是由HTML元素来完成的，HTML元素又是由单个或一对标签定义的包含范围。一个标签就是左右分别有一个小于号< 和大于号> 的字符串，开始标签是指不以斜杠/ 开头的标签，其内是一串允许的属性——值对，结束标签是以一个斜杠/ 开头的标签。 HTML的框架框架，就是HTML编写网页的基本格式。我们在编写HTML文档时，即...

HTML复选框和单选框checkbox和radio事件介绍_基础知识

checkbox 和 radio的事件选择一度让我很迷惑。开始以我对js的理解，我觉得change事件应该是最合理的，可惜啊ie下change事件是在改变后焦点离开时才触发。后来就用click mousedown等鼠标事件代替。发现click比mousedown要更完美一些： radio注册了click事件以后，神奇的是用键盘上的上下左右选择时，居然会触发鼠标事件，滚轮也会触发，这种神奇的事情在mousedown下面是不会发生的。（webkit不能使用上下左右选择） checkbox注册c...

XHTML教程,简单认识XHTML基础知识

本文简单让大家认识一下XHTML,了解XHTML的基础知识什么是XHTML　　XHTML是The Extensible HyperText Markup Language(可扩展标识语言)的缩写。HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。　　2000年底，国际W3C组织(World ...

JavaScript操作HTMLDOM节点的基础教程_基础知识【图】

因为 DOM 的存在，这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。 NOTE：下面提供的例子中的 element 均为元素节点。获取节点父子关系element.parentNode element.firstChild/element.lastChild element.childNodes/element.children兄弟关系element.previousSibling/element.nextSibling element.previousElementSibling/element.nextElementSibling通过节点直接的关系获取节点会导致代码维护性大大降低（节点之...

关于HTML5video基础知识总结

一、video标签的基本属性1.autoplay=“autoplay”：规定一旦视频就绪马上开始播放2.control=“controls”：让浏览器为视频播放器提供默认的暂停、进度条等控件。如果设置了这个就不能使用自己定义的控件。3.width=“320” height=“240”：定义视频播放器的宽高。设置这个会让页面对视频播放器部分空间进行保留，入不设置一开始不会保留可能造成页面布局混乱4.loop=“loop”：规定视频结束后将重新开始播放5.preload属性：auto表示...

HTML基础知识笔记(三)_html/css_WEB-ITnose

HTML下拉列表框讲解： 1、value： House Blend 2、selected="selected"：设置selected="selected"属性，则该选项就被默认选中。下拉列表框进行多选：下拉列表也可以进行多选操作，在标签中设置multiple="multiple"属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。 HTML提交按钮...

在前端中的html基础知识【图】

这次给大家带来在前端中的html基础知识，使用前端中html基础知识的注意事项有哪些，下面就是实战案例，一起来看一下。HTML基本知识学习html首先我们先看看HTML本质：web框架本质我们在学socket，我们创建一个socketserver，然后运行起来，有一个client客户端要连接socket服务端，连接上之后，如果两边都没有close，就一直不断开，可以不断的进行请求。那我们说一个网站，我们在服务器端运行我们的网站，所有的客户端就可以通过浏览...

注释的艺术——JS里直接写HTML，无需转义_基础知识

利用JS的多行注释配合函数的直接量可以做到JS里直接写HTML代码，除 script 的结束标签之外，无需任何的转义符和续行符。 //Code By Dron //Ucren.com document.write((function (){/* Hello Word! alert("Hello Word!"); */}).toString().replace(/^.+?\*|\\(?=\/)|\*.+?$/gi, "")); [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]//Code By Dron //Ucren.com alert(function(){/* Hello Word! alert("Hello...

你所要知道JS（DHTML）中的一些技巧_基础知识【图】

这些天都没有更新日志了，这篇文章就也算是自己的一些经验谈了。简单的说一些技巧给大家，希望对你有所帮助，如果还有疑问，可以在下边留言。一、全等运算符在JS中，不为0的数皆为true，除了几个特殊的变量除外。比如：undefined，null，""等。这在大多数情况下，也是我们所期望的。但你不应该忽略这个全等运算符。因此需要较为严格的效验下，我们可以用===这个全等运算符，看下面的代码： //平常的一些效验 var foo = functio...

HTML - 技术教程分类

HTML 教程 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 文本格式化 HTML 链接 HTML 头部 HTML CSS HTML 图像 HTML 表格 HTML 列表 HTML 区块 HTML 布局 HTML 表单 HTML 框架 HTML 颜色 HTML 颜色名 HTML 颜色值 HTML 脚本 HTML 字符实体 HTML URL HTML 速查列表 HTML 总结 XHTML 简介 HTML 媒体(Media) HTML 插件 HTML 实例 HTML 标签列表（功能排序） HTML 属性 HTML 事件 HTML 画布 HTML 音频/视频 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML 语言代码 html 全部

HTML - 最热教程

html5代码如何实现进度条功能？（示例）javascript中html字符串转化为jquerydo...HTML5实战与剖析之CSS选择器——getEle...html5中设置或返回音频/视频是否应该被...HTML5获取设备信息 jQuery打印指定区域Html页面并自动分页...jQuery+HTML5+CSS3制作支持响应式布局时...JS+HTML5实现上传图片预览效果完整实例...php删除html标签和标签内的内容的方法总...XMLHttpRequest中responseText如何获取...

首页 / HTML / 在前端中的html基础知识

在前端中的html基础知识

内容导读

内容图文

HTML基本知识
学习html首先我们先看看HTML本质：

web框架本质

html标签知识

head内的标签

meta

title

Link

Style

Script

body内的标签

各种符号

内容总结

内容备注

内容手机端

【在前端中的html基础知识】教程文章相关的互联网学习教程文章

HTML/CSS基础知识（二）

HTML表格基础知识总结【图】

html5基础知识【图】

MVC 使用cshtml的一些基础知识-和相关整理

HTML基础知识总结【图】

0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 html基础知识 html5新增标签

HTML基础知识总结【图】

HTML复选框和单选框checkbox和radio事件介绍_基础知识

XHTML教程,简单认识XHTML基础知识

JavaScript操作HTMLDOM节点的基础教程_基础知识【图】

关于HTML5video基础知识总结

HTML基础知识笔记(三)_html/css_WEB-ITnose

在前端中的html基础知识【图】

注释的艺术——JS里直接写HTML，无需转义_基础知识

你所要知道JS（DHTML）中的一些技巧_基础知识【图】

HTML - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程