为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
初识HTML(5)+CSS(3)_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • method : post/get 的区别这一部分内容属于后端程序员考虑的问题。


    浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法:POST 方法和 GET 方法。

    如果采用 POST 方法,浏览器将会按照下面两步来发送数据。首先,浏览器将与 action 属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。

    在服务器端,一旦 POST 样式的应用程序开始执行时,就应该从一个标志位置读取参数,而一旦读到参数,在应用程序能够使用这些表单值以前,必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

    另一种情况是采用 GET 方法,这时浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据:浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

    一般浏览器通过上述任何一种方法都可以传输表单信息,而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method (方法)属性中指明表单处理服务器要用方法来处理数据,使 POST 还是 GET。


    POST 还是 GET?

    如果表单处理服务器既支持 POST 方法又支持 GET 方法,那么你该选择哪种方法呢?下面是有关这方面的一些规律:

    如果希望获得最佳表单传输性能,可以采用 GET 方法发送只有少数简短字段的小表单。

    一些服务器操作系统在处理可以立即传递给应用程序的命令行参数时,会限制其数目和长度,在这种情况下,对那些有许多字段或是很长的文本域的表单来说,就应该采用 POST 方法来发送。

    如果你在编写服务器端的表单处理应用程序方面经验不足,应该选择 GET 方法。如果采用 POST 方法,就要在读取和解码方法做些额外的工作,也许这并不很难,但是也许你不太愿意去处理这些问题。

    如果安全性是个问题,那么我们建议选用 POST 方法GET 方法将表单参数直接放在应用程序的 URL 中,这样网络窥探者可以很轻松地捕获它们,还可以从服务器的日志文件中进行摘录。如果参数中包含了信用卡帐号这样的敏感信息,就会在不知不觉中危及用户的安全。而 POST 应用程序就没有安全方面的漏洞,在将参数作为单独的事务传输给服务器进行处理时,至少还可以采用加密的方法。

    如果想在表单之外调用服务器端的应用程序,而且包括向其传递参数的过程,就要采用 GET 方法,因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。而另一方面,使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程,其中传输的内容不能作为传统 <a> 标签的内容。

    查看全部
  • http://img1.sycdn.imooc.com//60aa1a40000167c408780590.jpg

    thead、tbody、tfoot均要放在table标签内,并且都是有尾标签,将表格分成一块一块的,对表格中的行进行分组。

    如果不加<thead><tbody><tfooter> , table表格加载完后才显示加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,(如果是比较长的表格的话,优势就可以发挥出来,不需要再等全部表格加载完才会显示内容)同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)

    这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

    查看全部
  • 创建表格的四个元素:table、tr、th、td

    1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

    2、<tr>…</tr>行:表格的一行,所以有几对tr 表格就有几行。

    3、<td>…</td>列:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

    4、<th>…</th>:表格的每列的头部的一个单元格,表格表头,和td不同的是th标签有加粗效果(每一列的表头加粗),并且加粗居中显示

    5、表格中列的个数,取决于一行中数据单元格的个数。

    6、border属性可以为表格添加边框,属性值为数字。<table border="1"></table>,如果table标签中没有border属性时,则在浏览器中显示是没有表格线的!

    http://img1.sycdn.imooc.com//60aa17d00001858a03110136.jpg

    注意:

    1、table标签用来定义整个表格,为双标签,必须有结束标签。

    2、table标签里面可以放caption标签和tr标签。

    3、caption标签用来定义表格的标题。

    4、tr标签用来设置表格的行,tr里面只能放th或者td标签,一组tr标签代表一行。

    5、th用来设置表格的标题,会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

    6、td同来设置表格的列,一组td标签代表一列。


     

    查看全部
  • <a  href="http://www.imooc.com"  title="点击进入慕课网" target="_self">click here!</a>
    1. href:目标网址

    2. title:当鼠标滑过时会显示的内容

    3. click here:在浏览器中所显示的文本内容

    4. target:代表打开网页的方式。可选值为”_self和_blank”,默认值为_self,代表在当前页面打开链接,_blank代表在新窗口打开链接。

    5. 当加入a标签后,文本内容转变为蓝色,当点击过后则会显示紫色(这种情况可以通过css样式来转变)

    http://img1.sycdn.imooc.com//60aa067000017bd617970649.jpg

    查看全部
  • <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

    1、src:标识图像的位置;

    2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

    3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

    4、图像可以是GIF,PNG,JPEG格式的图像文件。

    http://img1.sycdn.imooc.com//60aa01730001f88e12710607.jpg

    查看全部
  • <!--有序列表,支持全局属性,默认列表加入序号。利用属性type可以使得列标签是序号还是字母-->

    <ol type="a">   
         <li>我的第一个列表信息</li>    
         <li>我的第二个列表信息</li>   
    </ol>

    http://img1.sycdn.imooc.com//60a9ff65000196ac10210533.jpg

    http://img1.sycdn.imooc.com//60a9ff21000162ac10400530.jpg

    http://img1.sycdn.imooc.com//60a9ff450001aafe08830444.jpg

    查看全部
  • 支持全局属性:

    http://img1.sycdn.imooc.com//60a9fd9a00014aeb09910807.jpg

    查看全部
  • 空格:&nbsp

    在hrml代码中输入空格不起作用,所以当我们想要文字中出现空格时应该使用代码(&nbsp; ),例如:

     来源:作文网&nbsp;&nbsp;作者:为梦想而飞

    http://img1.sycdn.imooc.com//60a9fc1c000141e408960323.jpg

    查看全部
  • 空标签:

    <br />空行

    http://img1.sycdn.imooc.com//60a9fb480001b06808060469.jpg

    <hr />水平线分隔,<hr />标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。

    http://img1.sycdn.imooc.com//60a9fd1c0001417f12080406.jpg

    <img />图片

    http://img1.sycdn.imooc.com//60aa01ca00015ff306860495.jpg

    查看全部
  • http://img1.sycdn.imooc.com//60a9f9800001027e04560250.jpg

    section和div军事代表一个区域,但section具备语义化

    语义化:

    语义化。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等

    讲了这么多语义化,但是语义化可以给我们带来什么样的好处呢?

    1. 更容易被搜索引擎收录。

    2. 更容易让屏幕阅读器读出网页内容。

    在后面的章节会带领大家学习了解html中每个标签的语义(用途)。

    查看全部
  • class VS id

    class 属性或者 div 元素也一样。它们都可以回溯到 HTML 时代。id 属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。(例如,假如你的页面包含 id 为 content 的 div,那么另外一个 div 或者其他别的元素都不能使用这个名字。相反地,class 属性可以被一遍又一遍地使用在页面中

    查看全部
  • 1.关于行内元素和块级元素的说明

    块级元素会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整这个矩形的样子;与之相反,行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。(置换元素除外)

    2.行内、块级元素区别:

    1,块级元素独占一行,其宽度自动填满父元素宽度
    行内元素不独占一行,相邻行内元素排在同一行,直到排不下,才换行,其宽度随元素的内容而变化
    2,一般情况下,块级元素可设置 width, height属性,行内元素设置width,  height无效(置换元素除外)
    (注意:块级元素即使设置了宽度,仍然是独占一行的)
    3,块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(行内元素:水平方向有效,竖直方向无效)

    3.行内、块级元素:

    常见块级元素(block element)

    address - 地址
    center - 居中对齐块
    div - 常用块级元素,也是css layout的主要标签
    dl - 定义列表
    form - 交互表单
    h1 - 大标题
    h2 - 副标题
    h3 - 3级标题
    h4 - 4级标题
    h5 - 5级标题
    h6 - 6级标题
    hr - 水平分隔线
    menu - 菜单列表
    ol - 有序列表
    ul - 无序列表
    li - 列表项
    p - 段落
    pre - 格式化文本
    table - 表格
    tr - 表格中的行

    常见内联元素(inline element)

    a - 锚点
    b - 粗体(不推荐)
    big - 大字体
    br - 换行
    dfn - 定义字段
    em - 强调
    i - 斜体
    img - 图片
    input - 输入框
    label - 表格标签
    q - 短引用
    select - 项目选择
    span - 常用内联容器,定义文本内区块
    strong - 粗体强调
    textarea - 多行文本输入框
    u - 下划线
    var - 定义变量




    查看全部
  • http://img1.sycdn.imooc.com//60a8ebf50001e31b12140639.jpg

    块级元素,有尾

    h1~h6,级别逐渐递减

    查看全部
  • span标签:有尾,为了设置单独的样式,行内元素,仅占用自身的一小块地方

    代码:

    http://img1.sycdn.imooc.com//60a8ea210001f8b909040546.jpg

    显示结果:

    http://img1.sycdn.imooc.com//60a8ea770001c30f07590237.jpg

    查看全部
  • p:有尾,段落标签,默认段前段后都会有空白,可以通过css样式删除或改变

    查看全部

举报

0/150
提交
取消
课程须知
没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。
老师告诉你能学到什么?
本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识,可以利用HTML(5)、CSS(3)样式技术制作出简单页面。
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!