Web开发基础:HTML

项目开发视频:
SpringCloud微服务开发入门
手把手开发基于SpringBoot的员工管理系统
亿度云盘~Java小白入门实战


前言

开始写Web前端内容,这是JavaWeb开发必不可少的东西,包括HTML、CSS、JS等。

HTML简介

HTML(Hyper Text Markup Language) 超文本标记语言,用于描述网页的结构,浏览器对HTML代码进行渲染后就形成了我们常见的页面。

HTML基本结构

HTML代码由各种标签组成,标签由一对<>括起来,网页的标签有固定的结构:
Web开发基础:HTML_第1张图片
说明:

  • 是html5页面文档声明
  • 是根标签,代表整个网页
  • 代表网页头部,用于存在标题、元数据、CSS等元素,通常不会显示出来
  • 代表主体内容,是显示出来的网页内容
  • 是网页标题,能在浏览器上显示</li> <li><meta charset=“utf-8”/> 是元标签,可以设置字符编码解决中文乱码问题</li> </ul> <h1>HTML标签分类</h1> <p>HTML标签按显示效果可以分为:</p> <ul> <li>块级标签:单独占一行,可以设置高和宽</li> <li>内联标签:一行显示多个,不可以设置高和宽</li> </ul> <p>块级标签包括:</p> <ul> <li>标题:h1~h6</li> <li>段落:p</li> <li>水平线:hr</li> <li>有序列表:ol + li</li> <li>无序列表:ul + li</li> <li>目录列表:dl + dt + dd</li> <li>区块 div</li> <li>表格 table</li> <li>表单 form</li> </ul> <p>内联标签包含:</p> <ul> <li>图像标签:img</li> <li>span标签</li> <li>换行: br</li> <li>超链接: a</li> <li>格式标签:斜体<i>、加粗<b>、下划线<u>、删除线<del></li> </ul> <h1>常用HTML标签</h1> <h2>有序列表: ol + li</h2> <p>type可以设置排序的类型:数字1、字母A、罗马数字I 等</p> <pre><code><ol type="I"> <li>米饭</li> <li>青菜</li> <li>牛肉</li> <li>炒肥肠</li> </ol> </code></pre> <ol type="I"> <li>米饭</li> <li>青菜</li> <li>牛肉</li> <li>炒肥肠</li> </ol> <h2>无序列表:ul + li</h2> <p>type可以设置前面符号的类型:circle、square等</p> <pre><code><ul> <li>看书</li> <li>看博客</li> <li>看视频</li> <li>敲代码</li> </ul> </code></pre> <ul> <li>看书</li> <li>看博客</li> <li>看视频</li> <li>敲代码</li> </ul> <h2>目录列表:dl + dt + dd</h2> <pre><code><dl> <dt>标题</dt> <dd>内容1</dd> <dd>内容2</dd> <dd>内容3</dd> </dl> </code></pre> <dl> 标题 <dd> 内容1 </dd> <dd> 内容2 </dd> <dd> 内容3 </dd> </dl> <h2>标题标签: h1 ~ h6</h2> <pre><code><h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> </code></pre> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <h2>段落标签:p</h2> <p>主要用于描述段落文字</p> <pre><code><p>这是段落1</p> <p>这是段落2</p> </code></pre> <p>这是段落1</p> <p>这是段落2</p> <h2>区块标签:div</h2> <p>div标签主要用于配合css样式完成页面的布局。</p> <pre><code><div style="width:200px;height:200px;background:red"> Hello </div> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/f99a27cb6efc414b86d998395b602a0a.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/f99a27cb6efc414b86d998395b602a0a.png" alt="Web开发基础:HTML_第2张图片" width="253" height="254" style="border:1px solid black;"></a></p> <h2>图像标签:img</h2> <p>用法:</p> <pre><code><img src="图片路径" alt="图片说明" title="图片说明" width="200px" height="100px"> </code></pre> <p>图片路径分为:</p> <ul> <li>绝对路径,完整的文件路径,从盘符或主机名开始,如:D:/images/xxx.jpg<br> 如果是本地文件使用绝对路径,本地文件位置改变后,<br> 图片就会失效。<br> 绝对路径主要用于:显示外部网站图片。</li> <li>相对路径,相对网页的文件位置,如:images/xxx.jpg<br> 网站中的本地图片一般都使用这种。</li> </ul> <h2>范围标签 span</h2> <p>作用就是将一段文字突出显示,需要和样式配合使用</p> <pre><code>今天是<span style="color:red;font-size:30px">2018</span>年6月4号 </code></pre> <p><a href="http://img.e-com-net.com/image/info8/695c049e3d2b4a8b8632f1a4bcdffd36.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/695c049e3d2b4a8b8632f1a4bcdffd36.png" alt="在这里插入图片描述" width="235" height="63"></a></p> <h2>超链接 a</h2> <p>用法:</p> <pre><code><a href="页面路径" target="目标窗体">链接文字</a> </code></pre> <p>说明:</p> <ul> <li>页面的路径<br> 分为绝对路径和相对路径,如果链接外部网站的页面就用绝对路径,链接本网站的页面用相对路径。</li> <li>target属性<br> _blank 在新页面打开<br> _parent 在父页面打开<br> _self 在当前页面打开(默认)</li> </ul> <h3>特殊超链接</h3> <h4>锚链接</h4> <p>作用:在一个网页内部实现定位,如:回到顶部<br> 实现步骤:<br> 1、在网页的某一个位置添加锚链接</p> <pre><code><a name="锚名字"></a> </code></pre> <p>2、在需要链接的地方添加:</p> <pre><code><a href="#锚名字>文字</a> </code></pre> <h4>邮箱链接</h4> <p>作用:可以自动打开邮件客户端</p> <pre><code><a href="mailto:邮箱地址">链接文字</a> </code></pre> <h2>特殊符号</h2> <p>空格: <br> 大于(>):><br> 小于(<): <<br> 引号(“):"<br> 版权号© :©</p> <h1>表格标签</h1> <p>页面中的表格一般用于页面布局或是展示数据报表。</p> <p>表格的基本结构<br> table是表格,tr代表一行、td代表一个单元格</p> <pre><code><table> <tr> <td>单元格内容</td> .... </tr> .... </table> </code></pre> <p>table的属性:</p> <ul> <li>width 宽(单位:px固定值,n%相对值)</li> <li>height 高</li> <li>border 边框宽度</li> </ul> <p>tr和td都可以设置对齐属性align</p> <ul> <li>left 左对齐</li> <li>right 右对齐</li> <li>center 居中对齐</li> </ul> <p>单元格td的属性:</p> <ul> <li>跨行rowspan</li> <li>跨列colspan</li> </ul> <pre><code><table width="500px" height="200px" border="1px"> <tr align="center"> <td colspan="3">1</td> </tr> <tr> <td rowspan="2">2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/c8d86fe7b792495eb56d8a6815754241.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c8d86fe7b792495eb56d8a6815754241.png" alt="Web开发基础:HTML_第3张图片" width="628" height="255" style="border:1px solid black;"></a></p> <h1>表单标签</h1> <p>表单的作用是收集用户的信息,用于搜索、注册、登录等</p> <p>表单标签</p> <pre><code><form action="服务器程序地址" method="请求方法"> ... </form> </code></pre> <p>请求方法:</p> <ul> <li>post 提交的数据在后台,不会显示在URL中,安全性高;长度不限</li> <li>get 提交的数据附加URL中,安全性低;长度有限,速度更快</li> </ul> <p>表单元素</p> <pre><code><input name="元素名称" value="属性的值" maxlength="最大长度" placeholder="占位符" checked="是否选中" type="类型"> </code></pre> <p>type的值:</p> <ul> <li>text 文本框(默认)</li> <li>password 密码框</li> <li>radio 单选按钮<br> 注意:同一组的单选按钮,要设置成相同的名字</li> <li>checkbox 复选按钮</li> <li>submit 提交按钮,点击后数据会提交给服务器</li> <li>reset 重置按钮,清空数据</li> <li>button 普通按钮,需要使用JS编写功能</li> <li>file 文件域,实现文件上传</li> <li>hidden 隐藏域,不显示出来,数据可以提交</li> </ul> <p>下拉菜单</p> <pre><code><select name="名字" > <option value="值">显示选项内容</option> ... </select> </code></pre> <p>文字域</p> <pre><code><textarea name="名字" cols="文字列数" rows="文字行数"> 文字内容 </textarea> </code></pre> <h1>内嵌框架</h1> <p>iframe的作用是在当前页面嵌入另一个页面,在开发中可以将重复的页面部分单独开发,使用iframe嵌入进来。<br> 用法:</p> <pre><code><iframe src="页面地址" width="宽度" height="高度" frameborder="边框宽度" scrolling="是否滚动"> </iframe> </code></pre> <p>下面案例是讲页面头部嵌入到几个不同的页面中:<br> header.html</p> <pre><code><!DOCTYPE html> <html> <head> <title>开头部分 页面1   页面2   页面3

    page1.html

    
    
    
    	页面1
    	
    
    
    	
    	
    	

    这是页面1内容

    page2.html、page3.html 和上面类似

    结束


    大家如果需要学习其他Java知识点,戳这里 超详细的Java知识点汇总

你可能感兴趣的:(前端,web,html,前端)