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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • css样式由选择符和声明组成,而声明又由属性和值组成

    例:p(选择符  ){

                    color(属性):(声明)blue(值)

                }

    当有多条声明时,中间可以英文分号“;”

    例:p{font-size:12px;color:red;}

    css三种样式的优先级为内联式>嵌入式>外部式

    但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面

    就近原则,谁离被设置的标签近谁优先

    css中可以用/*xxx*/来注释文字



    css外部式是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内

    例:<link href="base.css" rel="stylesheet" type="text/css" />

    rel="stylesheet" type="text/css" 是固定写法不可修改

    base.css为css的文件名



    查看全部
  • css样式由选择符和声明组成,而声明又由属性和值组成

    例:p(选择符  ){

                    color(属性):(声明)blue(值)

                }

    当有多条声明时,中间可以英文分号“;”

    例:p{font-size:12px;color:red;}

    css三种样式的优先级为内联式>嵌入式>外部式

    但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面

    就近原则,谁离被设置的标签近谁优先

    css中可以用/*xxx*/来注释文字

    查看全部
  • 6.8 label 为input标签标上名字

    <label for="控件id名称">

    标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

    <label for="uname">输入你的用户名</label>

    <input type="text" id="uname" placeholder="Enter uname">

    查看全部
  •  第六节

    1.   placeholder 占位符 属于 input type的属性 用来提醒文本框内填的内容               (例:<input type=“text” placeholder>)

    2.   number数字输入框 属于input type的属性 用来限制输入的东西(只能输入数字)  (例:<input type="number" )

    3.   url  网址输入框       属于input type 的属性 url的类型需要是http://或http://

    4.   email 邮箱输入框   属于input type 的属性  email的类型必须是邮箱@必须有且要有内容

    5. submit 提交按钮 属于input type的属性 submit就相当于一个按钮 

      <input   type="submit"   value="提交">  value 为按钮显示的文字

    6. reset     重置按钮     属于input type的属性 reset 可以让选择/填写的信息重置    重置form里的所有已填写的信息

      <input   type="reset"   value="重置">  value 为按钮显示的文字

    7. radio 单选框          属于input type的属性

            checkbox  复选框   属于input type的属性 

                        <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

                       当 type="radio" 时,控件为单选框                 value:提交数据到服务器的值(后台程序PHP使用)

                       当 type="checkbox" 时,控件为复选框          name:为控件命名,以备后台程序 ASP、PHP 使用

                        checked:当设置 checked="checked" 时,该选项被默认选中

                        在一个问题内同一组的单选按钮,name 取值一定要一致,才能起到单选的作用

       8.text  文本输入框 属于input type的属性 

          password 密码输入框 属于input type的属性

                            <form>
                              <input type="text/password" name="名称" value="文本" />
                        </form>

                        type:

                               当type="text"时,输入框为文本输入框;

                               当type="password"时, 输入框为密码输入框。

                            name:为文本框命名,以备后台程序ASP 、PHP使用。

                            value:为文本输入框设置默认值。(一般起到提示作用)

        

                    

    查看全部
  • Css 布局模板:

    1 、流动模型 (flow)

    2 、浮动模型 (float)

    3 、层模型 (layer)

    查看全部
  • margin

    用于设置边框、外边距。

    查看全部
  • padding:  (数字)px;

    设置盒子内边距

    查看全部
  • 6.1 <form   method="传送方式"   action="服务器文件">

    例:

    <form    method="post"   action="save.php">  actiom="浏览者输入的数据被传送到的地方"

           <label for="username">用户名:</label>
           <input type="text" name="username" />
           <label for="pass">密码:</label>
           <input type="password" name="pass" />
    </form>

    1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)

    2、method : post/get 的区别这一部分内容属于后端


         

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

    例:

    <img src = "myimage.gif" alt = "My Image" title = "My Image" />

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

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

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

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


    5.2  <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

    例:

    <a  href="http://www.imooc.com"  title="点击进入慕课网">click here!</a>

     5.3 a标签有的target属性,代表打开网页的方式。可选值为”_self和_blank”,默认值为_self,代表在当前页面打开链接,_blank代表在新窗口打开链接。

           

    查看全部
  • border-style: dashed(虚线)、dotted(点线)、solid(实线)

    查看全部
  • <hr> 水平线标签

    <table border></table>表格标签 border属性代表给表格加上边框

    <caption>表格标题标签

    <tr>代表一行

    <th>代表一列有加粗的效果

    <td>代表一列正常字体

    查看全部
  • ul-li是没有前后顺序的信息列表。

    ol-li是有序列表

    查看全部
  • 有前后顺序的信息列表,<ol>-<li>

    ul   unorder

    ol oredr

    瞎说的

    查看全部
  • ul-li是没有前后顺序的信息列表。

    查看全部

举报

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

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