HTML + CSS_day01

浏览器


浏览器内核


移动端的浏览器内核主要说的是系统内置浏览器的内核。
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>

2.并列关系

<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>标签中输入其他标签或者文字的做法是不被允许的。

2.<li>与</li>之间相当于一个容器,可以容纳所有元素。
3.无序列表会带有自己样式属性,放下那个样式,一会让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' 就是表示密码框 用户输入的内容 是不可见的
    2.value属性 值
用户名:<input type="text"  name="username" value="请输入用户名"> 

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

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

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

  • name属性后面的值,是我们自己定义的。
  • radio 如果是一组,我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
  • name属性,我们现在用的较少, 但是,当我们学ajax 和后台的时候,是必须的。

4.checked属性
表示默认选中状态。 较常见于 单选按钮和复选按钮。

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女 

<meta charset="utf-8">

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>

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352