前端基础知识-HTML和css1

TML相关

1-1、HTML语义化的理解

HTML语义化是不需要知道HTML里面的内容就能知道这段话的含义，例如h1的标签表示标题，p标签表示段落，ul表示无序列表等等。这样有两个好处，一是利于代码理解和走查，二是利于机器理解做seo的优化。

1-2 HTML中哪些是标签是块级元素，哪些是内联元素

块级标签：h1 p div ul section等

内联标签：img span i input a 等等

CSS相关

2-1、盒模型宽度的计算

.div1{
    width:100px;
    padding:10px;
    border:1px solid #ccc;
    margin:20px；
   //   box-sizing:border-box   如果加上这个属性
}

div1的offsetWidth=内容宽度（width）+ 内边距（padding）+ 边框（border）无外边距（margin）=100 + 20 + 2==122px；如果加上box-sizing:border-box 那div1的offsetWidth就是100px，这个内容的宽度包含了padding和border宽度

2-2 margin纵向重叠问题

<body>
    
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>
</body>

<style type="text/css">
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>

AAA到BBB的距离为15px，这是因为相邻元素的margin-top和margin-bottom会发生重叠，空白的p标签也会发生重叠（类似于被忽略掉的意思），所以实际AAA和BBB的距离就是15px

2-3 maring负值的问题

margin-top、margin-left设置负值，元素本身会向上，向左移动

margin-right 设置为负值，元素本身不受影响，它右侧的元素会向左移动

margin-bottom设置为负值，元素本身不受影响，它下方的元素会向上移动

2-4 BFC（block format context）块级格式化上下文的理解与应用

bfc表示一块独立的渲染区域，内部元素的渲染不会影响到边界以外的元素

形成bfc的条件，例如： float不为none；position为absolut或fixed； overflow不为visible；

display为flex或inline-block等。

bfc常用来清除浮动。

2-5 float布局

圣杯布局，圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；三栏全部使用“float:left”浮动，并配合left和right属性。其核心是三个盒子都设置浮动，主体盒子设置宽度100%，左侧盒子设置margin：-100%，右侧盒子设置maring-right为负值，具体的值和右侧盒子宽度等同

上代码，直接可以copy代码在在html文件看看效果

<style type="text/css">
    .header {
        width: 100%;
        height: 100px;
        background-color: #ccc;
    }

    .footer {
        clear: both;
        width: 100%;
        height: 100px;
        background-color: beige;
    }

    .main {
        height: 300px;
        margin: 0;
        width: 800px;
        padding-left: 200px;
        padding-right: 150px;
        overflow: hidden;
    }

    .main .float {
        float: left;
    }

    .main .content {
        width: 100%;
        height: 300px;
        background-color: #999;
    }

    .main .main-left {
        width: 200px;
        height: 300px;
        background-color: #f00;
        margin-left: -100%;
        position: relative;
        right: 200px;
    }

    .main .main-right {
        width: 150px;
        height: 300px;
        background-color: #f90;
        margin-right: -150px;
    }
</style>
<body>
    <div class="header">头部</div>
    <div class="main">
        <div class="content float">前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握。
            事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想</div>
        <div class="main-left float">左侧</div>
        <div class="main-right float">右侧</div>
    </div>
    <div class="footer">底部</div>
</body>

2-6 手写clearfix

.clearfix:after{
      content: ' ';
     display:table;
     clear:both;
}

2-7 flex布局

flex布局主要有5个基础属性：

flex-direction属性，主轴的方向，可以是水平方向，也可以是垂直方向

justify-content属性，主轴对齐的方式，开始，居中，两端对齐等方式

flex-wrap属性，是否换行显示

align-items属性，与主轴垂直方向的显示方式，有开始，居中，末端对齐等方式

align-self，子元素在与主轴垂直方向的显示方式，有开始，居中，末端对齐等方式

应用场景：用flex布局画一个骰子的3

 <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
 <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }
        .item {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }
        .item:nth-child(2) {
            align-self: center;
        }
        .item:nth-child(3) {
            align-self: flex-end;
        }

    </style>

千里之行，始于足下，关于技术的沉淀，从今天开始，记录这么些年开发总结的点点滴滴~！

与千寻网页设计设计有五个页面组成，带登录表单。网页采用div+css布局设置而成。

如果有需要网页可以增加页面以及添加js轮播图，登录验证等js效果；

网页设计运行效果图

千与千寻网页设计首页源代码


<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="css/style.css">


<title>千与千寻</title>
</head>

<body>
<div class="wrapin"> 
  <!--头部-->
  <header>
    <ul class="nav clearfix">
      <li><a href="index.html">首页</a></li>
      <li><a href="juqing.html">剧情简介</a></li>
      <li><a href="juese.html">角色介绍</a></li>
      <li><a href="tupian.html">图片鉴赏</a></li>
	  <li><a href="denglu.html">用户登录</a></li>
    </ul>
  </header>
      <div class="banner"><img src="images/9.jpg" alt=""></div>
  
  <!--内容-->
  <div class="con">
    <div class="top clearfix">
      <div class="text">
        <h2><a href="http://74fan.com/player/868-4-1.html"><i>千与千寻</i></a></h2>
		<hr>
        <p>《千与千寻》是由吉卜力工作室制作的动画电影，由宫崎骏执导，柊瑠美、入野自由、中村彰男、夏木真理等人担任主要配音。该片主要讲述了千寻意外来到神灵世界后，为了救因惩罚而变成猪的家人，经历许多磨难的故事。2001年7月20日在日本上映。2019年6月21日在中国大陆公映。2022年8月5日起在中国台湾地区重映数字修复版本。</p>
      </div>
      <div class="pic"> <img src="images/11.jpg" alt=""> </div>
    </div>
    <div class="tupian">
      <div class="title">
        <h2>图片鉴赏</h2>
      </div>
      <ul class="clearfix">
        <li><img src="images/17.jpg" alt=""></li>
        <li><img src="images/9.jpg" alt=""></li>
        <li><img src="images/11.jpg" alt=""></li>
      </ul>
    </div>
	  
	
  <!--底部-->
  <footer> 

  
  <p>千与千寻</p>
  </footer>
  </div>
 
</div>

<div>
</div>
</body>
</html>

第一：word转html应用场景

将Microsoft Word（.docx）文档转换为HTML（HyperText Markup Language）格式，这一需求广泛存在于网页开发、内容发布、文档分享等多个领域。HTML作为网页内容的标准标记语言，不仅定义了网页内容的结构，还决定了内容在浏览器中的展示方式。

word转html

第二：HTML是什么格式

HTML（HyperText Markup Language），即超文本标记语言，是一种用于创建网页的标准标记语言。Html不是一种编程语言，而是一种标记语言，通过一系列的标签（tags）来告诉浏览器如何显示文本、图片、链接、表格等元素。HTML文档通常包含头部（head）和主体（body）两部分，头部包含文档的元数据（如文档标题、字符集声明等），而主体则包含可见的页面内容。

word转html

第三：Word转HTML的必要性

①跨平台兼容性：HTML是网页的标准格式，几乎所有现代浏览器都能完美解析，无需担心兼容性问题。

②易于分享与发布：将Word文档转换为HTML后，可以轻松地通过网站、博客、社交媒体等平台分享给更多人。

③优化SEO：HTML文档中的关键词、标题、链接等元素对搜索引擎优化（SEO）至关重要，有助于提升网页在搜索结果中的排名。

④增强可读性：HTML支持丰富的样式表（CSS）和脚本（JavaScript），可以大幅提升文档的可读性和交互性。

word转html

第四：Word转HTML的图文详解教程

方法一：使用专业pdf转换器

金舟PDF转换器支持多种文件格式的转换，包括但不限于PDF转Word、PDF转Excel、PDF转PPT、PDF转JPG、PDF转TXT等，同时也支持将Word、PPT、Excel等文件反向转换为PDF格式。

#1打开金舟PDF转换器，选择“Word转换”中的“Word转HTML”。

word转html

#2将需要转换的word添加进来。

word转html

#3直接点击“开始转换”，转换完成后，直接就能打开文件浏览。

word转html

此时生成的不仅有网页，还有对应的文件夹，分享给好友时需要两者都分享哦。

word转html

方法二：使用Microsoft Word直接转换

Microsoft Word/WPS office除了支持我们日常编辑文档之外，还支持对文档进行另存格式，压缩，提取，分割等操作，非常方便快捷。

#1另存为HTML：打开你想要转换的Word文档，点击文件菜单（File），选择“另存为”（Save As），在保存类型（Save as type）下拉菜单中选择“网页（*.htm; *.html）”选项。

word转html

#2调整设置（可选）：在保存之前，Word可能会提供一个对话框，允许你选择是否包含导航栏、图片等额外选项。根据你的需求进行选择。

word转html

#3保存并检查：选择一个位置保存你的HTML文件，并使用浏览器打开以检查转换效果。

word转html

方法三：使用在线转换工具

除了使用pdf转换软件，Microsoft Word等，我们还可以使用在线工具帮助我们更快地转换word和html格式，下面就是具体的操作步骤。

#1上传Word文档：在转换工具页面点击上传按钮，选择你的Word文档进行上传。

word转html

#2等待转换：上传完成后，工具会自动开始转换过程。根据文档大小和网络速度，转换时间可能有所不同。

word转html

#3下载HTML文件：转换完成后，点击下载按钮，将转换好的HTML文件保存到你的设备上。

word转html

第五：结语

无论是通过Microsoft Word直接转换还是使用在线转换工具，将Word文档转换为HTML都是一个简单且高效的过程。HTML作为网页内容的基石，其灵活性和广泛的兼容性使得文档转换成为提升工作效率和扩大内容传播范围的重要手段。希望本文的图文详解教程能够帮助您更好地掌握Word转HTML的技巧，从而在工作中更加得心应手。

word转html

往期文章：

转换mp3格式免费版app好用吗？麻烦推荐几款！不想花钱！

jpg转pdf：图片jpg格式如何转换成pdf？深度解析这8款软件！新！

word转图片jpg格式（不收费）：6大方法简单解决！挺不错！

在线咨询

上一篇：如何看待本轮吧以冲突
下一篇：js实现简单点击展开收缩切换效果

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端基础知识-HTML和css1

TML相关

CSS相关

网页设计运行效果图

千与千寻网页设计首页源代码

更多源码选择

第一：word转html应用场景

第二：HTML是什么格式

第四：Word转HTML的图文详解教程

第五：结语

您的项目需求