HTML + CSS+ js 认识

前端学习

前端三大技术核心 html 、CSS、js

一、HTML 网页主体内容

1.1、概念

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

现在发展到第五代了，我们又称为h5页面

  • 他不是编程语言，而是一种标记语言，由各种标签组成 （HTML tag）

  • 可以描述 文字，图形、动画、声音、表格、链接等

  • HTML 运行在浏览器上，由浏览器来解析

1.2、标准骨架

html文件 都有一个标准的骨架 即在创建一个html文件 会自动生成的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

1.2.1 标签概念

我们分析 上面代码 可知：

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • 而且成对出现的 ,如 :<head> 内容.....</head>
  • 第一个标签，我们称为开始标签(开放标签) 如：<head> ,第二标签 我们称为 结束标签（闭合标签） 如 </head>

1.2.2、骨架标签解析

<!DOCTYPE html>

第一行代码 是用来声明 这个是一个 html 文件

<html lang="en"> 内容 </html>

第二行代码 到最后一行

这是所有html 的内容 为最最外层的一个大标签

lang="en"：向搜索引擎表示该页面是html语言，并且语言为英文网站 en 为 english ， 也可以改为<html lang="zh"> 即为中文网站

注：不代表里面都是中文 ，也可以不写 lang="en"

<head>  内容  </head>

头部标签：

它是所有头部元素的容器。在head标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题

文档头部包含的数据都不会真正作为内容显示

    <meta charset="UTF-8">
    <title >Title</title>

meta： 标签可以设置网页的字符集（utf-8 国际编码）

title ：标签设置网页的标题

<body>

</body>

body : 身体主体，和head标签是同一级 ，所有网页显示的内容 都在 body标签之中

1.3、标题标签

你在浏览一个html界面时 ，如果是文字 一般你都会看到有标题

html 标题 分为六级 依次减小效果，每个标题都是独占一行空间

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

1.4、段落标签

有标题 即有段落

<p>
    段落内容.....
</p>

合适内容使用合理的标签，就叫满足标签语义化；这样可以在搜索引擎排名中更靠前！点击率更高，带来更多的收益！

1.5、 注释

html 虽然不是编程语言 但人家也是标记语言，也是有注释

<!-- 在此处写注释 -->

浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。

您可以利用注释在 HTML 中放置通知和提醒信息

1.6、空格与换行

在html 中空格要用：

&nbsp;   等于 一个空格

换行：

<br />  也就是一个回车

路径

**相对路径**：从当前位置 或  任意相对位置开始 到目标 文件的路径

**绝对路径**：从根目录开始 到目标文件的路径

1.7、属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以 名称/值 对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
如：name 属性用于指定标签元素的名称。 <a> 标签内必须提供 href 或 name 属性

<a href="http://www.baidu.com">百度一下</a>
<a name="value">

1.7.1、id 属性

id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。

id 或 name 属性的值可以是引号引起来的任何字符串。字符串必须是唯一的标记，不能在同一文档中的其他 name 或 id 属性中重复使用，但是可以在不同的文档中再次使用。

1.7.2、style 属性

样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

背景颜色：background-color 属性为元素定义了背景颜色

<html>

<body style="background-color:yellow">

<h2 style="background-color:red">这是一个标题</h2>

<p style="background-color:green">这是一段内容，这是一段内容</p>
</body>

</html>

字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸

<html>
<body>
<h1 style="font-family:verdana">一个标题</h1>
<p style="font-family:隶书;color:red;font-size:20px;">一段内容</p>
</body>

</html>

文本对齐

<html>

<body>
<h1 style="text-align:center">这是一个标题</h1>
<p>内容lll手动释放速度士大夫士大夫地方</p>
</body>

</html>

更多属性：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

1.8、图像

当在html 插入一张图片时 ，要先把图片准备好 ，我们交给网页的 是这个图片所在的路径（位置）

<img src="C:\Users\huangwei\Desktop\test\test_img.jpg" width="104" height="142" title="鼠标悬停提示文字" alt=”图片未加载时候提示文字“ />
  • image 就是图像，没有结束标签
  • src 等于资源，后面指向 图片所在的位置
  • width ：代表宽度（横向距离）、height ：代表高度（纵向距离）；如果宽和高都不设置，图片会按照原本的大小去显示
  • title ： 鼠标悬停时候的提示文字
  • alt ：当图片未正常加载的时候，显示文字

1.9、超链接

在网页中 你会经常遇到超链接 , 用a标签表示

<a href="http://www.baidu.com"> 百度一下 点击这里 </a>

  • href属性 指向就是 要跳转的 地址（也可以是本地的地址）

  • a标签包裹的内容 就是显示在网页上的 链接标题

1.10、div 块

可定义文档中的分区或节（division/section）。 <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

<h1>新闻网站</h1>
  <p>一些 内容 一些内容</p>
  ...

 <div class="news">
  <h2>新闻标题1</h2>
  <p>新闻内容  新闻内容 新闻内容</p>
  ...
 </div>
<!-- 加颜色 设置了高和宽-->
 <div style="background-color:red; height:100px;width:300px">
  <h2>新闻标题2</h2>
  <p>新闻内容 新闻内容 新闻内容</p>
  ...
 </div>

1.11、form表单

form表单标签里面包括所有用户填写的表单数据，

比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等

文本框 input

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

input标签的type类型：
type="radio" 单选框
type="checkbox" 多选框、复选框
checked="checked" 默认选中
type="button" 普通按钮，需要js配合才能实现其它效果
type="reset" 点击后可以让表单数据恢复默认值
type="submit" 点击后可以让表单提交给指定后台处理
placeholder="请输入用户名" 文字提醒属性
type="text" 普通的输入框
type=”password” 密码框

单选下拉列表

select标签嵌套若干option标签，每组option就是一个下拉菜单中的选项

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

selected="selected" 下拉菜单的默认选中

复选下拉框

  <!-- 复选下拉框 -->
    <select multiple="multiple" size="3">
        <option value="apple">苹果</option>
        <option selected = selected>香蕉</option>
        <option>西瓜</option>
    </select >

注：添加 selected 属性 可以预定选择

单选按钮

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

文本域 textarea

<form action="">
<textarea>  是一个文本域</textarea>
</form>

二、CSS 网页样式 美化

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

2.1、CSS作用

样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

2.2、CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

如：将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

h1 {color:red; font-size:14px;}

2.3、Css外部样式引用

<head>
<link rel=stylesheet type=text/css href=mystyle.css>
</head>

更多css内容请参考
http://www.w3school.com.cn/css/index.asp

三、js 网页操作 行为

<!DOCTYPE html> 

<html>

<head>
<meta charset="utf-8" /> 
<!--以下定义一个js方法，主要是根据id来改变内容-->
<script type="text/javascript">
function change_header()
{
document.getElementById("myHeader_1").innerHTML="恭喜发财";
}
</script>

</head>

<body>
<h1 id="myHeader">正在学习前端基础</h1>
<h1 id="myHeader_1">选择大于努力</h1>
<button onclick="change_header()">点击这里</button>
</body>

</html>
posted @ 2021-07-20 19:00  钟鼎山林  阅读(783)  评论(0)  编辑  收藏  举报