前端与HTML基础|青训营笔记

郭靖媛
134 阅读4分钟

前端与HTML基础|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天

什么是前端？

  • 解决GUI人机人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端小程序
    • VR/AR等
  • Web技术栈

即：前端工程师就是使用web技术栈解决多端图形用户界面交互的工程师。

前端技术栈

  • HTML（内容）
  • CSS（样式）
  • JavaScript（行为）
    通过网络协议与服务器端进行通讯

前端应该关注的方面

  • 功能：满足用户需求
  • 美观
  • 无障碍：对于所有用户都可用
  • 安全：保障用户信息安全
  • 性能：速度是否够快
  • 兼容性：在各种设备上都可以使用
  • 体验：前端对用户体验十分重要

HTML

HyperText Markup Language

超文本（HyperText）：可以包含图片、标题、链接、表格等
标记语言（Markup Language）：成对出现的标签 eg:<h1>一级标题</h1> ，可以添加属性，标签里不需要嵌套其他内容的结束标签可以省略 eg:<img src="xxx/>。

image.png 基本结构

1.Doc type

文档类型声明。它主要告诉浏览器所查看的文件类型。不区分大小写。

2.html元素

元素就是标签的意思，html元素即html标签。html元素是文档开始和结尾的元素。它是一个双标签，头尾呼应，包含所有html内容，即显示（body）的和不显示（heade）的。它有一个属性和值：lang=“zh-cn”，表示文档采用的语言为：简体中文。 <html lang="zh-cn"> //如果是英文则为en

3.head元素

用来包含元数据内容，元素包括：、、、、。这些内容用来浏览器提供信息，比如link提供css信息，script提供javaScript信息，title提供页面标签。

4.meta元素

这个元素用来提供关于文档的信息，起始结构有一个属性为：charset=“utf-8”.表示告诉浏览器页面采用的什么编码，一般来说用utf-8。文件保存的时候也是utf-8，而浏览器也设置utf-8即可显示中文。

5.title元素

用来设置浏览器左上角的标题。

6.body元素

用来包含文档内容的元素，也就是浏览器可见部分，所有的可见内容，都应该是在这个元素内部进行添加。

浏览器对HTML代码进行解析，解析出来一个DOM树，每一个节点为DOM节点

HTML语法

  • 标签和属性不区分大小写，推荐小写

  • 空标签可以不闭合，比如input、meta

  • 属性值推荐用双引号包裹

  • 某些属性值可以省略，比如required、readonly

<ul></ul>添加无序列表

 <ul>
	<li>张三</li>
	<li>李四</li>
	<li>王五</li>
	<li>马六</li>
</ul>

解释：<ul>元素表示无序列表，而<li>元素则是内部的列表项

<ol><li>添加有序列表

<ol>
	<li>张三</li>
	<li>李四</li>
	<li>王五</li>
	<li>马六</li>
</ol>

解释：<ol>元素表示有序列表，而<li>元素则是内部的列表项，<ol>元素支持三种属性。

image.png

<dl><dt><dd>生成列表说明 是key:value形式

<dl>
   <dt>这是一份文件</dt>
   <dd>这是这份文件的详细内容1</dd>
   <dd>这是这份文件的详细内容2</dd>
</dl>

链接

<a>元素属于文本元素，有一些私有属性或教局部属性。相对应的还有通用属性或叫全局属性。

1.href属性

href是必须属性，否则<a>元素就变成了空元素了。如果属性值是http：//开头的URL，意味着点击跳转到指定的外部网站。

2.target属性 target属性告诉浏览器希望将所链接的资源显示在哪里 _blank,新建一个窗口；_self是默认，在当前窗口打开。parent和top是基于框架页面的，分别表示在父窗口打开和在整个窗口打开。而HTML5中，框架基本被废弃，只能使用<iframe>元素(嵌入式框架)，框架用的很少。

表单
1.type为text值时 <input type="text">
为text值时呈现的就是一个可以输入任意字符的文本框，也就是默认行为，还有一些额外属性。

image.png 2.type值为password时 <input type="password">
type值为password时，一般用于密码框的输入，所有的字符都会显示星号，密码框也有一些额外的属性。
3.type为number，range时 <input type="number"> <input type="range">
number 只限输入数字的文本框，不同浏览器显示方式不同。range 生成一个数值范围文本框，只是样式时拖动式，额外属性如下

image.png 4.type为data系列时
<input type="date"> <input type="month"> <input type="time"> <input type="datatime"> <input type="datetime-local">
5.type为color时
<input type="color">实现文本框获取颜色的功能。
6.type为checkbox（复选框）、radio（单选框）时

    音乐<input type="checkbox"><br>
    体育<input type="checkbox">
    //单选框name的值必须一致
    <input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女

7.生成下拉列表

    <form>
	<select name="fruit">
		<option value="1">苹果</option>
		<option value="2">香蕉</option>
		<option value="3">梨</option>
	</select>
</form>

8.用户输入时提示

    <input list="countries">
         <datalist id="countries">
              <option>Greece</option>
              <option>United Kingdom</option>
              <option>Greece</option>
    </datalist>

文本类标签

  • <blockquote cite="http//xxxx">长引用</blockquote>:一般是引用别人的一段话，cite属性来说明引用的文字来源于哪。
  • <cite>短引用</cite> ：引用作品名字或章节。
  • <q>短引用</q>；具体引用的内容
  • <code>引用代码</code>``<pre>代码</pre>：引用代码
  • <mark><strong>含义上的重要紧急</strong><mark>``<em>说的时候语气上要重读的词</em>

注意前端的语义化！！！！

avatar
文章
阅读
粉丝