A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 厦门校区 黑马粉丝团   /  2018-5-14 17:14  /  11084 人查看  /  121 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 厦门校区 于 2018-5-14 17:21 编辑

同学们,以下是今日任务,以案例为主,重点是表格与表单,请大家在敲案例的过程中熟悉各标签的使用,然后以口语化的方式在评论区提交你的每日总结,谈谈你对今日重点知识的理解!

  • 网站信息页面案例
  • 网站图片信息页面案例
  • 网站友情链接页面案例
  • 网站首页案例
  • 网站注册页面案例
  • 网站后台页面案例



121 个回复

倒序浏览
名:曾耀峰

HTML——超文本标记语言总结
一、前言
   HTML文本又称为超文本标记语言,英语全称为Hyper Text Markup Language。是一种可以组织文本,链接,图像,媒体等元素的网页编辑语言,它的语言结构由标签构成。在计算机编程语言中,HTML算是一种低级语言,与Java、C++等可编译的高级语言相比,HTML不具备有编译发现错误的功能,之前有XHML这样较为严谨升级版语言,但是并没有获得浏览器厂商的认可。因为HTML这种不严谨,使多数人花少部分时间即可学好。因此在编写网页的时候,除了特别小心,时常运行查看效果以外,还是建议少使用HTML标签代码。一些修改元素外观的功能,建议使用CSS样式来代替标签。
   大部分网页都有文本、超链接、图像、声音、视频等元素,因此这些元素是使用频率比较高。HTML有近百个标签,大部分不常用记住了也没用,简单地了解一下即可。现在总结一些比较常用的标签。
一、块级标签、内联标签:
在学习之前,有必要了解一下块级标签和内联标签这两个概念。
块级标签指的是该标签必须独立存在一行。
内联标签可以多个标签一起存在一行。
常见的块级标签:<p>标签,<div> ,<ul>,<table>,<font><input><h1-h6>等
常见的内联标签:<a>标签,<img>标签,<a><meta><title>等标签,
二、标签:
1.超链接标签<a>
超链接标签是一个使用频率极高的标签,可以存放一个指向其他链接的链接。其属性有
Href:存放链接的路径:可以是本地的一个网页硬盘存放路径,或者是以”http://”开头的网站网址。
     Target:打开的方式。_self是直接本页跳转到其他网页。_blank是打开一个新窗口  
另外超链接还有锚点定位一个网页不同位置的功能。

2.文本标签
   <p>标签是文本标签,是一个块级标签。声明一个p元素独立一行。
   <h1>~<h6>标签是标题标签。该标签不仅仅是一个使文本加大加粗的标签。搜索引擎在定位你的网页时也定位你的标题,因此SEO方面要慎用标题标签
   <hr>一个直线间隔标签
   <br>折行标签。空的块级标签。
   另外像<br> <font><b><strong><u>等改变文本样式的老式标签已经逐渐被淘汰,这些功能在css中都具有,因此不用掌握
图像标签:
<img>标签能存放图片。其属性有src 存放图片来源;width,height属性修改图片的大小;alt 属性:当图片找不到的时候给用户的提示
这里想总结的是src的路径问题:例如
<img src="cs10006.jpg" />在同一级路径
<img src="./cs10006.jpg" />上一级路径
<img src="../cs10006.jpg" />上两级路径 一个“.”号表示向上翻一个路径

3.列表标签:
掌握无序标签<ul><li>系列:<ul></ul>是声明一个无序标签,是一个能独立一行的块状标签。<li>标签是<ul>里面的每项标签声明。通过样式可以修改无序标签的前面的点号。常用来做网站的导航
4.表格标签
<table>标签 ,是块状标签。声明一个表格。其子标签有
<tr>一行
<td>一列
格式如下:
<table>
  <tr>
    <td></td>
</tr>
</table>
掌握属性:
Width 表格宽度
Height 表格高度
Border 表格的边框厚度
Align:表格位置
表格合并 :
<td>的属性:
                            * colspan  =”列数”
* rowspan =”行数”
在没接触CSS的div和浮动布局之前 ,可以用表格标签嵌套表格标签的形式来对一个页面进行排版
利用表格嵌套来做布局。还是比较麻烦的。没有理解好高度与宽度的定义

5.<form>表单标签:
使用<form>表单标签可以将网页上用户的请求和输入的数据提交到服务器上。这个标签要用在需要提交请求的最外层。
<form>标签的属性有:
1.action:提交给哪个页面或者服务站点的链接。默认为提交到当前。
2.Method属性:有get值和port值。
Get值内容透明,会将用户提交的数据显示在地址栏中,并且提交的内容长度有限制。而port提交方法将数据封装在请求包中,对用户隐藏。并且提交的内容长度不限制。
从功能上来看,get方法几乎比不上port方法。大部分情况下选用port
3.组件:
使用form的表单组件,要注意每个组件都要有属性name字段,不然将是一个没有意义的标签。主要掌握<input>标签组件。根据其属性type,组件的类型有:文本框text,密码框:password,单选按钮radio,多选框:checkbox;普通按钮button,上传文件组件file,提交按钮submit。隐藏域hidden。
另外有两个不属于<input>组件的是下拉框<select><option>组件;还有文本域<textarea>
另外html5有添加一些新的form组件,由于没有全兼容浏览器不做掌握。



点评

知识列举详细,有自己的理解,但不推荐大篇幅列举知识,按照你的方式可以在xmind笔记后面扩展,结构还更清晰。这里提交的总结用自己的话谈谈思考  发表于 2018-5-15 12:28
回复 使用道具 举报
杜石苇
HTMLday1总结
今天学习了HTML ,首先HTML是超文本标记语言,用来制作静态页面,一些数据会与后台的数据库和JAVA相关联,所以注册登陆表单项目的 比较重要.
现在新的浏览器已经基本都是HTML5了 除非一些比较旧的浏览器  比如IE10以下的
HTML的结构是 根<HTML></HTML> 头<head> 头写标题  身体 <body>  身体是放进页面内容  可以是图片 文本 视频多媒体链接 等等
一些常用的标签  标题<h1><h2>等等 段落<p> 换行<br/> 横线<hr/> 加粗 下划线  斜体等等
文字字体可以设置字体<font color="颜色" size="大小"  
图片也可以设置来源 src 高度height  宽度width (表格中的行列同样可以设置高和宽 可以用百分比和像素大小设置)  居中
超文本链接<a>可以设置链接
HTML表格标签可以嵌套在嵌套  行列可以合并  合并方式是td里写入colspan 占用几列 rowspan占用几行 然后删除相应的行列数量
可以把整个页面当成是一个大表格  切割成行和列放进去元素  行和列里面还可以在嵌套表格
表格是先写table 然后写行<tr> 行里面有列<td>  td列里面写内容 可以写嵌套使用配合表单
表单标签内容是用来提交到后台的  <input type =****  name="return"    name是用来返回到后台的值  还有一些常用按钮 如****=+ text password  reset email date等等

点评

用自己的话谈了对知识的理解,很不错  发表于 2018-5-15 12:15
回复 使用道具 举报 2 0
常小天
今天学习了HTML,通过今天的学习,了解了HTML制作静态页面的方式和方法。HTML意为“超文本标记语言”。通过这个名字就可以了解到,HTML操作对象是文本,包含图片、超链接等特殊文本内容,它还是一种语言,既然是语言就要有语法,将HTML称为“标记语言”就是因为它是一种以标签为基本语法规则来规范其使用,同时也是通过标签来实现其创造对象的功能的编程语言。
HTML将我们看到的色彩丰富,内容多样的网页划分成了一个个小的个体,包括文字、图片、超链接等。HTML正是通过使用标签创建这一个个小的个体,再借助表格、表单将其组合起来,形成了我们所看到的网页。
类是通过对对象共性与特性的描述而创建出的一种规范,通过这种规范我们又可以在电脑上创建出一个个实物对应的虚拟对象。与类相似,标签也是一种规范,标签名将这种规范与页面上的待创建的一个个对象(文字、图片、超链接、表格、表单)连接起来,让电脑明白我们要创建一个什么东西,标签中的属性则是这种规范的实际载体,通过设定属性值我们能够准确地创建出符合我们要求的对象,也就是一段话、一张图、一个表单……这里要提及几个特殊的标签,因为我觉得这几个标签与我前面所说的有些不同之处。我前面说到标签名只是表明要创建的是什么而没有具体的规范,规范是标签的属性来表现的。而这几个特殊的标签,其标签名更像是一种属性,它规范了对象的一些属性。这些标签有:
字体加粗标签 : <b>文字</b>
居中标签 : <center>内容</center>
字体斜体标签:<i>文字</i>
字体下划线 : <u>文字</u>
标题标签则像是同时包含了这两种要素,即指明了要创建的是一个标题对象,同时又已经规范了标题的格式。
根标签、头标签和体标签属于我前面所说的正常的标签,因为他们就表示的是它其中的代码所要创建的是一个静态页面。
表单是今天学习的重点,但在我看来它并不特殊,它一样属于前文所述的正常标签,只是它的内容更复杂,属性更丰富,功能更强大。在学习中多加练习即可。

点评

不错不错,下次总结更多围绕重点内容去谈!  发表于 2018-5-15 12:31
回复 使用道具 举报
柯威龙
html的理解就是超文本语言,比普通的文本强,作用的话就是制作页面.创建html的文件时结尾应该是.html或者.htm.
html的结构用HBuilder就能知道了,一个头标签 一个体标签.
首先学习了html的最常用的标签,例如:<fount> 这个是文字标签        <br/>这是换行
<p>这是段落        <h1>--<h6>这是标题,h1最大        <pre>原生标签的作用是当我们把文本赋值过来的时候他可以原封不动的
一点都不用改,个人感觉最神奇的标签 然后又学习了图片标签<img> 还有图片路径的问题.如果图片与文件同一级的话那么直接输
入图片名称或者./就可以了.上一级的话就../,或者是文件的下级就是前面写上img.注意 如果路径没写对的话,图片就显示不到页面上了
学完图片标签又学习了列表标签,列表标签的只是点比较少,只分为有序和无序,有序是<ol>,无序是<ul>,有序与无序的区别只存在于他们的实行.
觉得超链接<a>好神奇.可以让页面里面的文字可以点击并且还可以跳转.超链接的路径是href,像target的打开方式我也不知道有什么用
因为今天学习好像也没有用过.
最重要的是表格链接与表单.尤其是表格链接的嵌套.嵌到后面我自己都晕了,这能删掉重新打.后面知道在嵌套之前需要写个
注释,这样如果那里错了还可以很快的去找到.表格之前要先打<table>然后开始<tr>行<td>列嵌套前需要在嵌套的位置写上<Table>
表单我是听懂了,但是由于没有练习,有点乱乱的 打表单之前需要写上<input tyte>然后在后面写上自己所需要的单词
这是我今天学完html的总结.

点评

不错,很认真的思考了当天的知识。下次对重点内容多一些总结。  发表于 2018-5-15 17:17
回复 使用道具 举报 1 0
颜琳琳
        今日学习了html标签的概念以及其常用的一些标签
Html标签是一种超文本标记语言,用来制作网页的.
Html的结构为<head>(头标签)
<body>(体标签)</body>
</head>
Html常用标签有:(用在<body>体标签中)
1.字体标签:<font>文字</font>
<font>标签中有size: 文字大小 color:文字颜色等常用属性.
2.换行标签:</br>  3. 标题标签:<h1>至<h6> <h1>字体最大,表示一级标题.
3.段落标签:<p>   5. 居中标签:<center>等比较重要比较常用的标签.其他字体加        粗标签<b>,字体斜线标签<i>,字体下划线<u>等了解使用到知道用就可以.
图片标签:
<img>(是image图片的缩写),中的属性有:src:图片源路径,width:图片宽度,height图片        高度,alt:图片找不到所显示的内容
超链接标签:
<a>只需懂得使用该标签的href:超链接的路径属性以及target:打开方式中的_self在        自身页面打开和_blank在新的窗口中打开
列表标签:(了解)
有序标签:<ol><li></li></ol>该标签中的type属性中有:1,a,I等分别表示数字类型标签,英文类型标签,罗马字符,用来将所要写的内容进行有序的描述,这些属性写在<li>中li后边.
无序标签:<ul><li></li></ol>该标签的type属性中用,disc:实心点.circle        :空心圆        square:方块用来将所要写的内容进行有序的描述,这些属性写在<li>中li后边.
今日学的比较重要的内容就是表格标签,用<table>来表示,其中<tr>为行标签,<td>为列标签,<table>标签中交重要的属性border:边框和algin:表格是水平位置,该属性中有left,center,right等三个分别表示左,中,右位置.
接下来就是今天BOSS,最重要的内容:表单的使用,表单标签用<form>来表示,该标签中有常用的属性有algin和method分别表示提交的路径和提交的方法,method属性中get和post的区别:1. get提交的数据会显示在地址栏,而post不会;2. get提交的方式在浏览器中有大小限制,而post没有大小限制. <input type=”文本”>:文本框中主要的属性有name,vlaue,size,maxlength;<input type=”password”>:密码框中主要属性有name,value;<input type=”redio”>:单选按钮中主要属性有name,value,checked;<input type=”checkbox”:复选按钮中的属性值和单选框一样,这4种表单中元素都必须有name属性值,且单选按钮中的name必须相同.
表单中还有:
<input type=”button”>:普通按钮.没有任何功能的按钮.
<input type=”submit”>        :提交按钮.
<input type=”reset”>:重置按钮. <input type=”file”>:文件上传的表单项.
<input type=”hidden”>:隐藏字段.<input type=”image”>:图片按钮
<select>:下拉列表. <textarea>:文本域.等八种元素需要了解并会使用.
注意:
下拉列表和文本域不写在<input>的type中,而是单独写在表单中.

点评

不仅仅是当天知识的陈列,还有自己的理解!不错,置顶!  发表于 2018-5-15 17:29
回复 使用道具 举报
林文辉 html第一天总结
今天学的主要是一些基本的标签,并且都是常用的,基本是自己写一个html就差不多熟了
主要关于table 如果单独把table拿出来做盒子不合适,因为table太死板了,而div相对来说就非常的灵活了,所以侧重点应该是第二天的div,其实div也不难就是.然后table一般用的话也都是嵌套在div里的
然后正常做一个页面的话,我们一般把一些属性都放到css里,通过外部链接调用.打个比方一个<tr>添加一个属性,那有多个的话复制粘贴都麻烦.所以需要把它们装到css里.
就好比如我们java中,要把类封装起来,然后再调用,这样能够避免代码冗余.
标签这些东西 理解就好了,不需要全部记住.当然常用的要记下.因为你不可能真的闲的去写一个页面,首先你没那个天赋,没那个审美,其次你写了半天可能还没人家一个模板弄出来的好看.你不是美工,所以没那个必要,理解就行了
js很重要,所以重要的篇幅都在后面,别在前面浪费生命了

点评

对当天内容做了很好的分析,不错!  发表于 2018-5-15 17:56
回复 使用道具 举报
本帖最后由 13163997058 于 2018-5-14 23:15 编辑

王刘锁
今天学习怎么用HTML去做一个web网页(简单的静态网页),这和以前的HelloWorld大不一样,
在这里看不到System.in,能[看到的只有标签 标签 还是标签,因为今天学习的就是一种标签语言HTML,
HTML的结构标签:head-头标签 body--体标签
那么多的标签怎么记呢?根本就记不住!只好主抓重点也就是所谓的表单标签<form></form>
这个标签可以做什么呢?它可以用来做一些类似注册账号的页面,当然了.既然是标签就会有一些属性和元素
下面说一下表单标签的属性:属性的位置在标签(form)的后面 主要记两种属性
action:表单提交到的地方 默认是当前页面.method:提交的方式 GET:数据显示在网址栏 并且数据大小有限制 不同浏览器也不相同 .
POST:数据不会显示在网址栏 也没有大小限制
.再来说元素标签:
一个大类:<input type="XXXX">系列:(像这种标签都有对应的name名字[为了可以通过这个姓名来寻找数据内容]和value默认值属性)
text 文本框 password 密码框 file 文件加载
radio 只能选一个选项的按钮 还有能选多个的按钮checkbox    submit 提交按钮  reset 重置按钮.........
还有一类:
<selec>:下拉的列表 <textarea> 可以写文章的一个文本域
说完表单标签说下表格标签
表格标签<table>可以用来做页面排版布局 是挺有意思的一个标签 可以按自己的想法去设计页面
它的元素标签 <tr>--一行<td>--一列 属性不多说 可以多玩玩!
今天用到最多的就是标签的嵌套了 在使用嵌套的时候要注意一点 标签的对应位置一定不能搞错了 不然会出问题的在做今天的案例的时候在这点上栽了不少跟头

点评

很不错,有分析,有思考,有自己记的办法!置顶!  发表于 2018-5-15 17:46
回复 使用道具 举报
何平波
今天学了崭新的知识Web(前端开发)篇中的html.
那么什么是html呢?
Html就是一种超文本标记语言,它有一套标记标签.html用标记标签来描述网页
一般来说Html文档=网页
而html有专门的标签        :
一个html文档应该有     <html></html>(html里是网页的名称描述))
  和<body></body>(body里是文档内容)
注意html标签应该包含body标签   <html>是开始标签  </html>是结束标签       每一个标签都是有开始和结束标签,都是成对出现的.
1.<p>段落</p>代表一段段落
2.<h1>标题</h1>代表一个标题  h1-h6  h1字体最大
3.<a></a> 代表一个超链接的地址  用href=”地址名” 在<>里使用
4.<img src=”图片名”>  代表传入一张图片
等等....许多方法 ,必要时可以查阅W3School文档来编写代码.

今天的重点是  html中的表单标签 ,作为一个后台开发人员,表单标签在以后的开发工作中可能经常接触,表单标签可与表格结合使用效果更美观和格式更面向对象.
所以今天有必要把表单标签深刻总结下.
表单标签用<form></form>来使用,在<form></form>之间可以使用许多方法
1.<form><input type=”test”></form> 在网页显示的是一个文本域 ,这里可以输入键入字母、数字等内容
2.<form><input type="radio"  name=”sex”>男</form> 当用户从若干给定的的选择中选取其一时,就会用到单选框。
等等....许多用法.必要时可以查阅W3School文档来编写代码.
如何布局一个网页的页面呢?  
在这里需要使用到表格标签来进行布局设计,在这里可以给表格定义边框属性border="1">,这样做可以更有利于表格的设计遵循标记来为每一个单元格设计对象内容.

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

一个完整的网页布局包含许多的表格嵌套,在这里需要进行事先的规划,定义好整个页面的布局效果才能开始进行代码的编写.
行和列是可以进行合并的,这里用到了<td>的属性:
    * colspan=”列数”比如定义好了一个5行5列的表格,现在需要把第一行的第一列和第一行的第二列进行合并,就要用得到colspan,进行合并,然后将被合并的单元格删掉
    * rowspan=”行数” 同理比如定义好了一个5行5列的表格,现在需要把第一行的第一列和第二行的第一列进行合并,就要用得到rowspan进行合并,然后将被合并的单元格删掉.

点评

总结的很不错,对重点内容也着重理解了。置顶!  发表于 2018-5-15 17:58
回复 使用道具 举报
张裕
        今天的课,上午的感受是 啥 前端那么简单的吗,下午的感受是 这都是啥啥啥啊,头痛

        HTML:超文本标记语言 用于制作页面 其中表单需要重点掌握

        方法太多 主要需要掌握 字体标签<font> 图片标签<img src> 超链接标签<a> 表格标签<table>

                重点掌握表单元素<form> 属性有 action 属性为页面数据要提交的路径
               method 请求方式 get有大小限制并且会显示在地址栏中 不安全
                                POST 没有大小限制 且不显示在控制台 相对安全
                                type选择导入的框 记得要用 name 存储输入的数据 返回给数据库
                                    

点评

对于重点内容,比如表格、表单可以再多一些理解。  发表于 2018-5-15 12:33
回复 使用道具 举报

1

本帖最后由 Do1 于 2019-8-31 09:10 编辑

1111111111111111111111111111111111

点评

围绕着重点内容多一点自己的理解!  发表于 2018-5-15 17:48
回复 使用道具 举报
郑学馨
重点:表单标签
1:什么是HTML
超文本标记语言(hyper text markup language)

2:怎么创建html文件

文件名.html或者文件名.htm

3:HTML基本结构标签
<html></html>/:斜杠表示代码结束
<head>:表示页面标题
<body>:表示主体
3.1:字体标签:font 属性:(size 1-7:字体大小)(face:字体款式

)(color:字体颜色)(U:下划线)(b:加粗)(i:斜体)
3.2:排版标签:(标题标签:h1-h6)(段落标签:p)(居中:center)
3.3:图片标签:(<img src="图片所在路径名">)属性:w是宽,H是

高,asign可以设置居中
3.4:列表标签:有序:<ol></ol> 属性:type设置顺序,无序

<ul></ul>属性;type设置列表头形状
3.5:超链接标签:<a herf="链接地址"target="_blank:打开方式

是新建一个页面打开">  <a herf="链接地址"target="_self:打

开方式是直接在当前页面打开">
3.6:表格标签:(table:属性:长/宽/居中/背景颜色/边框线条/)

中嵌套(tr:行标签)行中再嵌套(td:列标签)
行列的合并:列的合并:colspan(区分方法.列:中有L) 行的合

并:rowspan
3.7:重点:*表单标签:(form: 属性action="表单信息提交路

径"method="提交方法;有两种:get(不安全,有大小限制)post(安

全,无大小限制)")
**表单元素:(input type="元素")元素:text:输入信

息;password:输入密码;radio:类别选择,单选比如性别;file:上

传信息;hidden:隐藏信息不让修改;submit:提交信息按

钮;button:空按钮,无意义;checkbox:类别的选择,可以多

选;reset:清空设置重来;imgie:图片按钮;
*select:下拉选择;
*textarea:输入文本(文本域输入)
(表单标签除了记住上面这些功能外主要还是实际运用,需要注意

一些格式:例如radio\checkbox\select)
* <input type=”radio”>                :单选按钮.
    * 常用的属性:
        * name        :表单元素的名称.必须有name属性,然后后台

才可以接收数据.
        * value        :单选按钮的默认值.
        * checked:单选按钮默认被选中.

* <input type=”checkbox”>        :复选按钮.
* 常用的属性:
        * name        :表单元素的名称.必须有name属性,然后后台

才可以接收数据.
        * value        :单选按钮的默认值.
        * checked:单选按钮默认被选中.

点评

不推荐这种方式的总结,谈谈思考,不是列举!  发表于 2018-5-15 12:28
回复 使用道具 举报
陈强
HTML的第一天,感觉只是标签有点多,但是做完登录界面和网站首页,其实常用的标签和属性也就是其中的一部分:
<table>--<tr><td>---属性---width、height、border、align
<img>---属性---src、width、height
<a>
<font>--属性---color、size
<form>---type---不同框所对应的值
排版标签基本只在文本量大的情况下才需要使用到;
而一天下来的知识点中,感觉把以下两点搞清楚就没什么了.
1,目前用来页面布局的表格标签之间的相互嵌套和单元格之间的合并关系理清楚;
2,表单标签中注意不同的框都需要有name值,这个name的值就相当于一个标记,是与后端数据的读取息息相关的
这两点搞明白后,做出来的页面的美观性就是跟你的个人审美还有页面的布局有关而已.

点评

理解的不错  发表于 2018-5-15 12:29
回复 使用道具 举报
游荣辉
今天学前端开发,再开始学以前我感觉特别的难,可是学起来也不是特别的难,只是英文单词特别多,都不会.....
        今天学了HTML学习了他的作用(制作页面),在那些地方使用(设计网页时),还有他的使用等等
        HTML有非常多的标签
                字体标签<ront (可以放属性)>
                排版标签<p><b><i><u><center>.....我就不一一举例了可以去查文件
                图片标签<img (属性)> 属性常用的 src   width   height
                表格标签格式:
                                <table  (属性)> 常用属性width height border align
                                        <tr>
                                           <td>         <td>       
                                        <tr>
                                <table>

                超链接标签 <a (属性)> 常用属性 herf
                表单标签<form (属性)> 常用属性 text password radio checkbox ....而属性中还有他特有的属性
        今天我懂得了如何排版一个网页的页面,如何再网页中添加图片,如何再网页中修改文字的大小.颜色

点评

还不错,下次多一点自己的理解  发表于 2018-5-15 12:30
还不错,下次多一点自己的理解  发表于 2018-5-15 12:30
回复 使用道具 举报
林恒山
html是用来制作静态网页的.html文件扩展名为.html或者.htm,html常用的标签有换行<br/>,标题<h1>到<h6>,段落<p></p>,字体加粗<b></b>,居中<center></center>,斜体<i></i>,下划线<u></u>,横线<hr/>,还有比较重要的字体标签<font></font>,属性有color/size/face.
图片标签是<img/>,属性有图片来源的src,宽度width,高度height,图片不显示时显示的内容alt.
列表标签有有序标签<ol></ol>,无序标签<ul></ul>
超链接标签<a></a>,href是链接的地址,target是打开方式,可以通过_self自身基础上打开,_blank是新打开一个网页显示.
表格标签<table></table>,tr控制行,td控制列,属性width宽度,height高度,border边框,align的center是居中.通过colspan可以合并列,rowspan合并行.
最后是最重要的表单标签<form></form>,<input type=""/>type属性是text表示文本框,password是密码框,radio是单选框,checkbox是复选框,button是普通按钮,submit是提交按钮,reset是重置按钮.表格标签常用的属性有name/value.单选复选框的check属性表示选中.而<select></select>的则是selected表示选中.

点评

只把知识列举了,自己的理解呢?  发表于 2018-5-15 19:04
回复 使用道具 举报
叶身辉
今天学习了HTML的一些基本操作,如何制作一个静态页面,
首先学习使用了HBuilder如何使用和操作,
之后学习了HTML的一些常用标签:包括字体fount换行br标题h1-7段落p加粗b居中center斜体i下划线u原生pre横线hr
有关于图片的标签:来源:src,宽度width,高度height,无法显示alt,
关于列表的标签有序ol,无序ul  ,type属性
超链接标签:a标签,具体有href路径,target打开方式,_self自身打开_blank新窗口打开
主要是关于定义表格的标签:
格式:<table>     <tr> 行    <td></td> 列     </tr>      </table>
其中table可以定义属性width:表格宽度height:表格高度border:边框
都可以被定义的align        :表格水平位置: left左,center中,right右
Td可以定义表格合并 : <td>的属性:colspan=”列数”, rowspan =”行数”
重要的是学习的表单元素:
from的常用属性有action提交路径默认当前
Method请求GET(会显示且大小有限制)或者POST(不会显示,大小无限制);POST主要的
<input type = ”text”> 文本框.name(重要,给后台传输数据),value,size,maxlength,readonly
<input type=”password”>          密码框.name,value,size,maxlength
<input type=”radio”>      单选按钮.name,value,checked
<input type=”checkbox”>          复选按钮.name,value,checked
<input type=”button”>          普通按钮.没有任何功能的按钮.
<input type=”submit”>          提交按钮.
<input type=”reset”>                  重置按钮.
<input type=”file”>                  文件上传的表单项.
<input type=”hidden”>          隐藏字段.
<input type=”image”>          图片按钮
<select>                                      下拉列表.
<textarea>                                   文本域.

点评

知识列举的比较详细,自己的思考少了一点  发表于 2018-5-15 17:20
回复 使用道具 举报
郑雪平

  今日总结
今天第一次接触WEB,学习了全新的知识并首次使用HBuilder这个工具,逻辑性虽没javase强,但是要记的东西特别多,还有就是那个嵌套要嵌套好几层,到最后看着都晕了.

点评

总结的太少了,不要只谈感受,多一些对知识的理解  发表于 2018-5-15 17:20
回复 使用道具 举报
本帖最后由 q55w66 于 2018-5-14 21:55 编辑

王清松

<!-- HTML(超文本标记语言):编程全依赖标签的一门语言
文件格式:以.htm或.html结尾,图标左上角带个浏览器标识

目前文件有2种常见版本:HTML4和HTML5
HTML4:旧版本,普适性强,大部分浏览器都支持
HTML5:增加部分新特性,包括email标签和date标签,目前只知道google浏览器支持

通用结构:
<!--<html>
        <head>
                ....(标题相关)
        </head>
        <body>
                ....(页面内容相关)
        </body>
</html>-->

行列容易混淆,记住以下单词即可:
row  行
column  列
span  跨越

特殊标签
{
    常用标签
    {
        </br>换行
        <!--注释内容-->
        <hr>横线
        <a>超链接
        {
            特殊属性
            {
                href超链接路径
                targrt打开方式
                {
                    _self(覆盖自身页面进行打开)    (self 自己)
                    _blank(打开一个新页面)    (blank 空白的)
                }
            }
        }
    }
    有点印象就行的标签
    {
        <pre>...<pre> 原生标签:标签中的内容是原生态的,IDE对其不做任何修改
    }
}
排版标签(非官方称呼)
{
    标题标签:一级标题比二级标题字体大(同word)
    {
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        ...
        <h6>三级标题</h6>
    }
    段落标签<p>...</p>:将文件分隔成多段   (paragraph 段落)
    字体加粗标签<b>...</b>    (bold 黑体的)
    斜体标签<i>...</i>     (italic斜体字)
    下划线标签<u>...</u>    (underline下划线)
}

图片标签<img>  (image 图像)
{
    特殊属性
    {
        src来源  (source 源头,资源)
        {
            src=""
            .代表当前路径
            ..代表上一级路径(同dos指令)
        }
        alt找不到图片显示的内容
    }   
}

列表标签
{
    (有序和无序指有没有序号,并不是指随便排序)
    有序列表
    {
        格式
        {
            <ol>
                <li>...</li>
                <li>...</li>
            </ol>
        }
        特殊属性
        {
            type序列号的格式
            {
                1:阿拉伯数字
                a(A):字母
                i:罗马数字
            }
        }
    }
    无序列表
    {
        格式
        {
            <ul>
                <li>...</li>
                <li>...</li>
            </ul>
        }
        特殊属性
        {
            type标点格式
            {
                disc:实心点
                ciecle:空心圆
                square:方块
            }
        }
    }
}

表格标签<table> (table 表格)
{
    <tr>...</tr>行
    <td>...</td>列
}

表单标签<form>
{
    <input>标签   name属性不可少,是用于传递后台数据时的坐标  value值即要传递的数值
    {
        text:文本框,用于输入单行文本
        {
            maxlength:允许输入的最大文本长度
            readonly:只读,无法修改
        }
        password:密码框,用于输入密码,输入的字符自动显示为圆点
        radio:单选按钮
        {
            同一组按钮name要一样才能保证单选
            checked设置默认选中
        }
        checkbox复选按钮
        button普通按钮,暂时不知道怎么用
        submit提交按钮,用于传递数据
        reset重置按钮,重置表单所有value为默认值
        file上传文件按钮,不同浏览器表现形式不同
        image图片
    }
   
    <select>标签 下拉列表
    {
        列表选项用<option value="北京">北京</option>定义,记得给value值,否则无法传递
    }
   
    <txetarea>标签 文本域,用于写多行文本
    {
        属性
        {
            acton:提交路径,默认为当前页面
            method:提交方式
            {
                get(默认):数据显示在地址栏,不安全,数据有大小限制
                post:数据不会显示在地址栏,数据无大小限制
            }
        }
    }
}

通用属性
{
    color颜色
    width宽度
    length长度
    name名字
    value值
    ......(还有很多,基本都是见名知义,背英语单词就好)
    使用技巧:大体有印象,然后就是/+Alt调出菜单选,不需要背哪个标签有哪些属性
}

点评

知识列举的很详细,不错!下次对内容多一点自己的思考总结  发表于 2018-5-15 17:22
回复 使用道具 举报
陈昆明:
          今天对超文本标记语言HTML进行了初步的学习,与java语言明显不同的是,HTML是由标签对事物进行描述的一种语言,虽然标签命令较为多变,但是思想较为简单,以下为今天初步整理出的单词表,希望能帮助到大家.

今日新增单词.txt

1.19 KB, 下载次数: 226

点评

尽量不要上传附件,把内容直接作为评论提交即可  发表于 2018-5-15 17:23
回复 使用道具 举报
黄兴磊
学了一天敲了一晚感觉掌握的还不够好,方法常用的记下

HTML是用来制页面作静态的,是一种超文本记录语言,一般在网页设计上要用到HTML

head---是头部
boty---是体
title---是头部窗口的类容

font 是字体的意思

要想给字体颜色可以通过<font color="red"> 我是红色</font><br/>

size是设置字体大小

例 <font color="red" size ="12">   我是12号 </font><br/>


h代表标题  p代表段落  字体加粗是b  斜体是I  下划线是u  center是居中

hr/ 代表横线.

<pre> 原生标签 比如在网站上面复制了一段文字,可以原封不动的变回去


src 是查看图片的来源,  width是图片的宽度  height 是图片的高度  alt 图片找不到内容

如果图片在同一路径 直接 ./ 和 文件名都可以
如果图片在下一个路径 可以  img/cs10006.jpg


href 是写网址链接路径的

target 网址打开来的方式

selp 在自身页面打开
blank 新打开来一个窗口

点评

下次多一点对重点内容的理解  发表于 2018-5-15 17:24
回复 使用道具 举报
许剑鸿
webDay01

今日学习HTML:超文本标记语言 用于设计页面 语法不严谨 写一串下来脑阔疼贼拉难看

HTML由<html><head><body>3个结构标签组成 标签写于<body></body>中

今日学习了以下标签 可做出简单的带图网页和登录页面↓
webDay01总结.jpg
回复 使用道具 举报
html是用来制作页面(静态页面),html的创建就是把后缀名改为html.它分为头标签<head>和体标签<boby>.
要设置文字要使用<font>标签,标题标签<h1-6>1最大6最小
要设置段落要用<p>标签,字体加粗使用<b>,字体下划线<u>,字体斜体<i>,居中<center>,换行<br>,横线<hr>,原生<pre>,引入图片<img>.
有序列表<ol> 无序标签<ul>
超链接标签<a>href:链接的路径, target:打开的方式,_self:在自身页面打开,_blank:新打开一个窗
表格标签<table>里面行用<tr>列用<td>,
HTML的表单标签:<form>:
action属性:提交的路径.默认提交到当前页面,想要更改其他页面打开要用<_blank>
method属性:请求的方式.GET和POST.默认是GET.get有文件限制大小,而且会显示在
地址栏上
在表单标签中<input type="text"> 这是文本框 ,把"text"改成possword就变成了密码框, 把"text"改成radio就变成了单选按钮
把"text"改成checkbox就变成了按钮,改成submit就成立提交按钮,改成file成立文件上传表单项,使用<selec>下拉列表<textarea>文本域
回复 使用道具 举报
郭明杰
<head> 头!<title> 标题! <br/>换行!
<p></p> 段落标签
h1 -h3 标题标签
<i>斜!</i>
<b>粗!</b>
<u>加线!</u>
<center>忘了!</center>
<pre></pre>原格式标签
<ol type=""  star="1">有序列表 (star表示从1开始)
        1 / A /a /i /I 等样式
       
<ul type="">无序列表
        disc :实心点
        circle:空心圆
        square:方块       

超链接!:
        <a href=""> </a>
        <target> 打开的方式
                _self:在自身页面打开
                _blank 新打开一个窗口
         
<table border="">
        <tr>列
       
        <td>行
        <td  colspan="2"> 占用两列
        <td rowspan="2">占用两行

[HTML的表单标签]
        HTML的表单标签<form>
        HTML中的表单元素:
        <input type="text">:文本框
                常用属性:
                *name:表单元素的名称,必须要有name属性,然后后台才能接收数据
                *value:文本框的默认值
                *size: 文本框的长度
                *maxlength:文本输入的最大长度       
                *readonly:只读文本框 ,不能输入
                *action属性:提交的路径.默认提交到当前页面
                *mwthod:提交的方式(GET, POST) ,默认为GET
                        区别:get不安全 会显示在地址栏,提交有大小限制
                            post数据不会显示在地址栏,没有大小限制
       
        <input type="password">:密码框

        <input type="radio">:单选按钮
                常用属性:
                *name:表单元素的名称,必须要有name属性,然后后台才能接收数据
                *value:单选按钮的默认值
                *checked:单选按钮默认被选中

        <input type="checkbox">:复选按钮
                常用属性:
                *name:表单元素的名称,必须要有name属性,然后后台才能接收数据
                *value:复选按钮的默认值
                *checked:复选按钮默认被选中

        <input type="button">:按钮

        <input type="submit">:提交按钮

        <input type="reset">:重置按钮

        <input type="file">:文件上传的表单项
        <input type="hidden">:隐藏字段
        <input type="image">:图片按钮

        <select> :下拉列表
        <textarea>:文本域
回复 使用道具 举报
1234下一页
您需要登录后才可以回帖 登录 | 加入黑马