美文网首页
HTML+CSSday01

HTML+CSSday01

作者: __method__ | 来源:发表于2020-08-11 09:40 被阅读0次

    浏览器


    浏览器内核(了解)


    移动端的浏览器内核主要说的是系统内置浏览器的内核。]
    Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。
    iOS平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari

    web标准(有利于浏览器生态发展)

    web标准有三层结构,分别是结构(HTML)、表现(CSS)和行为(Javascript)

    HTML

    HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言

    • 所谓超文本,有2层含义:因为它可以加入图片、声音、动画、多媒体等内容(超越文本限制) , 不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本 )
      HTML 有自己的语言语法骨架格式
    <html>   
        <head>     
            <title></title>
        </head>
        <body>
        </body>
    </html>
    

    团队约定:

    HTML标签名、类名、标签属性和大部分属性值统一用小写
    

    HTML元素标签分类

    • 常规元素(双标签)
    <标签名> 内容 </标签名>   比如 <body>  我是文字  </body>
    
    • 空元素(单标签)
    <标签名 />  比如  <br />
    

    HTML标签关系

    1. 嵌套关系
    <head>  
        <title> </title> 
    </head>
    
    1. 并列关系
    <head></head>
    <body></body>
    

    文档类型<!DOCTYPE>

    <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

    • 页面语言lang
    <html lang="en">  指定html 语言种类
    
    1. en定义语言为英语
    2. zh-CN定义语言为中文

    字符集

    <meta charset="UTF-8" />


    HTML常用标签

    首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了。 不会再给结构标签指定样式了。

    1)标题标签h (熟记)

    <h1>   标题文本   </h1>
    <h2>   标题文本   </h2>
    <h3>   标题文本   </h3>
    <h4>   标题文本   </h4>
    <h5>   标题文本   </h5>
    <h6>   标题文本   </h6>
    

    2)段落标签p ( 熟记)

    单词缩写: paragraph 段落 [ˈpærəgræf] 无须记这个单词
    可以把 HTML 文档分割为若干段落

    <p>  文本内容  </p>
    

    是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

    3)水平线标签hr(认识)

    单词缩写: horizontal 横线 [ˌhɔrəˈzɑntl] 同上

    <hr />是单标签
    

    4)换行标签br (熟记)

    单词缩写: break 打断 ,换行

    5)div 和 span标签(重点)

    • div span 是没有语义的 是我们网页布局主要的2个盒子 想必你听过 css+div
    • div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。
    • span 跨度,跨距;范围
    <div> 这是头部 </div>    <span>今日价格</span>
    

    他们两个都是盒子,用来装我们网页元素的, 只不过他们有区别,现在我们主要记住使用方法和特点就好了

    • div标签 用来布局的,但是现在一行只能放一个div
    • span标签 用来布局的,一行上可以放好多个span


    文本格式化标签(熟记)

    标签属性

    所谓属性就是外在特性 比如 手机的颜色 手机的尺寸 ,总结就是手机的。
    使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法格式如下:

    <标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
    <手机 颜色="红色" 大小="5寸">  </手机>
    

    图像标签img (重点)

    要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签<img />以及和他相关的属性。(它是一个单身狗)

    语法如下:

    <img src="图像URL" />
    

    链接标签(重点)

    单词缩写: anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的
    在HTML中创建超链接非常简单,只需用标签把文字包括起来就好。
    语法格式:

    <a href="跳转目标" >文本或图像</a>
    

    注释标签

        <!-- 注释语句 -->     快捷键是:    ctrl + /       或者 ctrl +shift + / 
    

    特殊字符 (理解)

    一些特殊的符号,我们再html 里面很难或者 不方便直接 使用, 我们此时可以使用下面的替代代码。




    三个表

    表格 table(会使用)

    • 创建表格
      在HTML网页中,要想创建表格,就需要使用表格相关的标签
    <table>
      <tr>
        <td>单元格内的文字</td>
        ...
      </tr>
      ...
    </table>
    
    1. table用于定义一个表格标签。
    2. tr标签 用于定义表格中的行,必须嵌套在 table标签中。
    3. td 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
    4. 字母 td 指表格数据(table data),即数据单元格的内容,现在我们明白,表格最合适的地方就是用来存储数据的
    <!--align="center"--> 表格居中
    <table width="500"  border="1" height ="300" cellpadding="30" cellspacing="0" align="center">
        <tr>
            <th>英雄</th>
            <th>价格</th>
            <th>皮肤数量</th>
        </tr>
        <tr>
            <td>安琪拉</td>
            <td>13800</td>
            <td>5</td>
        </tr>
        <tr>
            <td>后羿</td>
            <td>8888</td>
            <td>4</td>
        </tr>
        <tr>
            <td>韩信</td>
            <td>水晶获取</td>
            <td>2</td>
        </tr>
    </table>
    

    列表标签(重点)

    • 无序列表ul
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ul>
    
    1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
    1. <li>与</li>之间相当于一个容器,可以容纳所有元素。
    2. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!

    有序列表 ol (了解)

    <ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ol>
    

    表单标签(掌握)

    input 控件(重点)

    <input type="属性值" value="你好">
    
    • input 输入的意思
    • <input /标签为单标签
    • type属性设置不同的属性值用来指定不同的控件类型
    • 除了type属性还有别的属性
    1. type 属性
    • 这个属性通过改变值,可以决定了你属于那种input表单。
    • 比如 type = 'text' 就表示 文本框 可以做 用户名, 昵称等。
    • 比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的
    1. value属性 值
    用户名:<input type="text"  name="username" value="请输入用户名"> 
    

    value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字,就可以通过这个value 来设置。

    1. name属性
    用户名:<input type="text"  name=“username” />  
    

    name表单的名字, 这样,后台可以通过这个name属性找到这个表单。 页面中的表单很多,name主要作用就是用于区别不同的表单。

    • name属性后面的值,是我们自己定义的。

    • radio 如果是一组,我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦

    • name属性,我们现在用的较少, 但是,当我们学ajax 和后台的时候,是必须的。

    1. checked属性
      表示默认选中状态。 较常见于 单选按钮和复选按钮。
    性    别:
    <input type="radio" name="sex" value="男" checked="checked" />男
    <input type="radio" name="sex" value="女" />女 
    
    label标签(理解)

    目标:label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。

    概念: label 标签为 input 元素定义标注(标签)。

    作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
    如何绑定元素呢?

    1. 第一种用法就是用label直接包括input表单。
    <label >请选择性别 <input type="radio" name="gender" > 男
        <input type="radio" name="gender"  checked="checked"> 女</label>
    

    第二种用法 for 属性规定 label 与哪个表单元素绑定。

    <label for="gender"> <input type="radio" name="gender" > 男
        <input type="radio" name="gender"  checked="checked" id="gender"> 女</label>
    

    当我们鼠标点击 label标签里面的文字时, 光标会定位到指定的表单里面

    textarea控件(文本域)

    <textarea >
      文本内容
    </textarea
    

    作用:
    通过textarea控件可以轻松地创建多行文本输入框.
    cols="每行中的字符数" rows="显示的行数" 我们实际开发不用


    select下拉列表

    <select name="" id="">
        <option value="">黑龙江</option>
        <option value="">吉林</option>
        <option value="">辽宁</option>
    </select>
    
    • 注意:
    1. select 中至少包含一对 option
    2. 在option 中定义selected =" selected "时,当前项即为默认选中项。
    3. 但是我们实际开发会用的比较少

    form表单域

    目的:在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。

    <form action="url地址" method="提交方式" name="表单名称">
      各种表单控件
    </form>
    

    综合案例(世纪佳缘注册页面)

    相关文章

      网友评论

          本文标题:HTML+CSSday01

          本文链接:https://www.haomeiwen.com/subject/bgkedktx.html