当前位置： 代码迷 >> 综合 >> html的简单介绍
  详细解决方案

html的简单介绍

热度：72   发布时间：2024-03-10 01:52:31.0

``

HTML

  • Hyper Text Markup Languge超文本标记语言
    超文本：不仅仅是纯文本还包括：字体相关（样式，颜色，大小等）和多媒体（图片，音频，视频）
  • 学习html主要学习的就是有哪些标签，标签有哪些属性，标签和标签的嵌套关系
  • 和xml不同点：xml标签是可以自定义的，html提供了一部分现有的标签
    创建html页面
  • 新建文件->other->搜索html

html页面结构介绍

		<!DOCTYPE html>文档声明：用于告诉浏览器使用html哪个版本的标准解析页面，此写法是用html5的标准解析页面<html>根标签除了文档声明都写在跟标签里面<head>头标签给浏览器看的内容写在头标签里面<meta charset="UTF-8">告诉浏览器页面字符集<title>Insert title here</title>告诉浏览器页面标题是什么</head><body>体标签给用户看的内容写在体标签里面</body></html>

HTML中常见标签

  • 文本相关标签
1. 内容标题: 独占一行自带上下间距字体加粗<h1>到<h6>
2. 段落标签：独占一行自带上下间距<p>
3. 加粗和斜体<b>abc</b><i>abc</i>
列表标签
1. 无序列表
2. 有序列表
3. 定义列表
4. 列表嵌套
  • 图片标签
- 支持的图片格式： jpg/jpeg ，png位图（支持透明色）， gif动图
- src属性：图片路径1. 相对路径：访问站内资源一般使用相对路径- 页面和图片在同一目录：直接写图片名- 图片在页面的上级目录：../图片名- 图片在页面的下级目录：文件夹名/图片名2. 绝对路径：访问站外资源一般使用绝对路径，也称为图片盗链，图片盗链好处：可以节省本站资源，坏处：可能找不到图片
- alt:当图片不能正常显示时显示的文本
- title: 标题鼠标在图片上悬停时显示的文本
- width/height:  两种赋值方式： 1. 像素  2. 上级元素的百分比如果只设置宽度则高度会等比例缩放
  • 超链接a
- 如果不加href属性就是纯文本
- href：资源路径页面资源：可以访问站内资源也可以访问站外资源文件资源：如果浏览器支持浏览则直接浏览不支持则下载
- 文本超链接和图片超链接，a标签包裹文本则是文本超链接包裹图片就是图片超链接
表格table
- table:border边框的粗细
- tr行
- td列跨行rowspan跨列colspan（col=colume列）
- th表头
- caption 表格标题
  • 表单form
    作用：用于获取用户输入的相关信息，将信息提交到服务器
    学习表单主要学习的就是表单中有哪些控件：
    文本框密码框提交按钮单选多选下拉选等
<!-- action提交地址 --><!-- 表单中的任何控件必须有name属性 --><form action="http://www.tmooc.cn">用户名:<input type="text"placeholder="请输入用户名" name="username"><br>密码:<input type="password"placeholder="请输入密码" name="password"><br>性别:<input type="radio" value="nan" name="gender">男<!-- checked默认选中  value提交的值--><input type="radio" value="nv"checked="checked" name="gender">女<br>兴趣：<input type="checkbox" name="hobby"value="cy">抽烟<input type="checkbox" checked="checked" name="hobby"value="hj">喝酒<input type="checkbox" name="hobby"value="tt">烫头<br>生日：<input type="date" name="birthday"><br>靓照：<input type="file" name="pic"><br><!-- 下拉选 -->城市：<select name="city"><option value="bj">北京</option><!-- 选项 --><!-- selected默认选中 --><option value="sh" selected="selected">上海</option><option value="gz">广州</option></select><br><input type="submit" value="注册"></form>
  • 修改eclipse缩进方式
- window->preferences->web->html files->Editor->勾选Indent use spaces  把下面的1改成2
  • 实体引用(特殊字符)
- 空格：空格折叠现象（连续出现多个空格只能识别1个空格）&nbsp;
- 小于号：&lt;
- 大于号：&gt;
  • 分区标签
- 作用：将多个相关标签添加到一个分区标签中，便于统一管理，可以理解成是一个容器
- div: 独占一行
- span: 共占一行
- 一般页面至少分为三大区：<div>头</div><div>正文内容</div><div>脚</div>
- html5中新增分区标签：(目的：为了代码可读性更高)1. header 头2. article文章3. section(块、区域)4. footer 脚5. nav 导航
- h5页面区域<header>头</header><article>文章正文</article>或<section></section><footer>脚</footer>

CSS

  • Casecading层叠Style样式Sheet表
  • 作用：用于美化页面
    CSS的引入方式
  • 内联样式：在标签中的style属性里面添加样式代码，弊端：不能复用
  • 内部样式：在head标签中添加style标签，在标签体内写样式代码，好处：可以当前页面复用，弊端：只能当前页面复用不能多页面复用
  • 外部样式：在单独的css文件中写样式代码，通过link标签引入到html页面中，好处：可以多页面复用，并且可以将html代码和css代码分离

选择器

1. 标签名选择器
- 格式:  标签名{样式代码}
- 场景：需要给页面中所有某一种标签添加样式时使用
2. id选择器
- 页面中任何标签都可以添加一个id属性，页面中的标签尽量不要重复
- 格式： #id{样式代码}
- 场景：需要给页面中某一个标签添加样式时使用
3. 类选择器
- 格式： .class{样式代码}
- 场景：当需要给页面中几个不相关的标签添加相同样式时使用
4. 分组选择器
- 将多个选择器合并成一个选择器
- 格式： h3,#abc,.c1{样式代码}
5. 子孙后代选择器
- 通过元素之间的关系选择元素
- 格式：div divspan{样式代码}
6. 子元素选择器
- 通过元素之间的关系选择元素
- 格式： div>div>span{样式代码}
7. 属性选择器
- 通过元素的属性选择
- 格式：标签名[属性名='值']{样式代码}
8. 伪类选择器
- 选择的是元素的状态
- 未访问状态访问过状态悬停状态点击状态
- 格式：    a:link/visited/hover/active{样式代码}
9. 任意元素选择器
- 选择页面中所有的标签
- 格式：  *{样式代码}

盒子模型

宽高+外边距+边框+内边距=盒子模型

盒子模型之宽高

- width、height: 赋值方式有两种： 1. 像素  2. 上级元素的百分比
- 行内元素不能修改宽高，宽高由内容决定

盒子模型之外边距

- 元素距上级元素或相邻兄弟元素的距离称为外边距
- 行内元素上下外边距无效
- 粘连问题：当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距，会出现粘连问题，给上级元素添加overflow：hidden解决

赋值方式：

	margin-left/right/top/bottom:10px;margin:20px; 四个方向全部20个像素margin:20px 40px; 上下20px  左右40pxmargin:0 auto;  居中margin:10px 20px 30px 40px;  上右下左顺时针

盒子模型之边框

- 赋值方式： border: 边框粗细边框样式边框颜色border-left/right/top/bottom:边框粗细边框样式边框颜色;
- 圆角设置： border-radius: 20px；值越大越圆
盒子模型之内边距
- 什么是内边距：元素边框距内容的距离
- 赋值方式：和外边距类似padding-left/right/top/bottom:20px;padding:10px; 四个方向10padding:10px 20px; 上下10 左右20padding:10px 20px 30px 40px; 上右下左
- 行内元素内边距影响元素所占宽度，不影响所占高度

文本相关样式

1. 文本修饰： text-decoration
- overline 上划线
- underline 下划线
- line-through 删除线
- none 去掉文本修饰
2. 水平对齐方式:text-align
- left/right/center
3. 文本颜色 color
4. 行高 line-height可以实现文本上下居中
字体相关
1. 字体大小 font-size
2. 字体加粗font-weight:bold/normal(去掉加粗);
3. 斜体：fotn-style:italic
4. 字体设置： font-family: xxx,xxx,xxx;font: 字体大小xxx,xxx,xxx;

CSS的三大特性

  1. 继承性
    标签可以继承上级标签的文本和字体相关的样式，部分标签自带效果不受继承影响，比如超链接a标签自带的字体颜色不受影响，h1-h6自带的字体大小不受继承影响
  2. 层叠性
    不同的选择器有可能选择到同一个标签，如果作用的样式不同则样式层叠到一起全部生效，如果作用的样式相同则由优先级决定哪个生效。
  3. 优先级
    作用范围越小优先级越高， id选择器>class选择器>标签名>继承（属于间接选中）

定位方式：4+1种定位方式

position定位 4种

1. 文档流定位(静态定位)，默认的定位方式
- position:static
- 特点：行内元素从左向右排列，块级元素从上到下排列
- 如何控制元素的位置：通过外边距margin控制
2. 相对定位：
- 格式： position：relative
- 特点：元素不脱离文档流（占着原来的位置），通过left/right/top/bottom 让元素从当前位置做位置偏移
3. 绝对定位
- 格式： position：absolute
- 特点：元素脱离文档流（不占原来的位置），通过left/right/top/bottom让元素相对于窗口或某一个上级元素（在上级元素中添加相对定位）做位置偏移
4. 固定定位
- 格式：postion：fixed
- 特点：元素脱离文档流，通过left/right/top/bottom让元素相对于窗口做位置偏移

浮动定位

- float：left/right
- 特点：元素脱离文档流，从当前所在行向左或向右浮动，当撞到上级元素边框或其它浮动元素时停止。
- 应用场景：当需要把纵向排列改成横向排列时使用浮动定位
- 如果一行装不下会自动换行，换行时有可能被卡主
- 元素浮动后，由于元素脱离文档流，后面的元素会顶上来，如果不希望后面元素顶上来，则给后面元素添加clear:both
- 当元素的所有子元素全部浮动的时候自动识别的高度为0，通过给元素添加overflow：hidden解决此问题
溢出设置overflow
- visible（默认值）超出显示
- hidden  超出隐藏
- scroll 超出滚动显示

JavaScript

  • 作用：用于给页面添加动态效果和动态内容
  • 语言特点：
    1. js属于脚本语言，不需要编译由浏览器解析执行
    2. 属于弱类型语言
    3. 基于面向对象
    4. 安全性高：js语言只能访问浏览器内部的数据，不能访问浏览器以外（磁盘中的各种数据）的数据
    5. 交互性高，由于js语言可以直接嵌入到html页面中，可以和用户直接进行交互
      三种引入方式：

  1. 内联：在标签的事件属性中添加js代码，当事件触发时js代码执行

     <input type="button" onclick="alert('试试就试试！')" 	value="点我试试">

  2. 内部：在html页面中任意位置添加script标签，在标签体内写js代码，当页面加载时执行js代码

  3. 外部：在单独的js文件中写js代码，通过script标签的src属性引入到html页面中
    NaN

  • Not a Number 不是一个数
  • isNaN(x) 判断x是否是数是NaN(不是数)返回true 是数返回false

定时器

  1. 开启定时器
    var timer = setInterval(方法,时间间隔);
  2. 停止定时器
    clearInterval(timer);
  3. 只执行一次的定时器
    setTimeout(方法,时间间隔);

通过CSS控制元素的显示和隐藏

  • 隐藏：display:block,inline,inline-block,none(隐藏)

DOM相关

  • Document文档Object对象Model模型，页面相关的内容
  • 学习dom主要学习的就是如何对页面的标签进行增删改查操作。
    查询标签
  1. 通过id查询标签
    var d = document.getElementById(“id”);
  2. 通过标签名查询标签
    var arr = document.getElementsByTagName(“标签名”);
    通过class值查询标签
    var arr = document.getElementsbyClassName(“class”);
  3. 获取body
    document.body
  • 创建标签对象
    var h = document.createElement(“h3”);
    h.innerText=“创建的标签”;
  • 添加标签
    父标签.appendChild(h);
  • 删除标签
    父标签.removeChild(被删除的标签对象);
  • 修改文本内容
    标签.innerText=“xxxx”;
  • 修改html内容
    标签.innerHTML="";
  • 修改css样式
    标签.style.样式名=“值”;
    h.style.backgroundColor = “red”;
    样式名中的-去掉并且变成驼峰式命名
    `
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.