美文网首页
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

    浏览器 浏览器内核(了解) 移动端的浏览器内核主要说的是系统内置浏览器的内核。]Android手机而言,使用率最高...

网友评论

      本文标题:HTML+CSSday01

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