Java前端基础—HTML

Java前端基础—HTML

目录

  • Java前端基础—HTML
    • 1.简介
    • 2.基础语法
      • 2.1HTML页面固定结构
      • 2.2标题标签
      • 2.3段落标签
      • 2.4换行标签
      • 2.5水平线标签
      • 2.6文本标签
      • 2.7图片标签
      • 2.8音频标签
      • 2.9视频标签
      • 2.10链接标签
      • 2.11列表标签
      • 2.12表格标签
      • 2.13表单标签
      • 2.14语义标签

1.简介

1.网页组成:文字,图片,音频,视频,超链接。
2.代码如何转换成网页:依靠的是浏览器的渲染和解析将代码翻译成网页。
3.渲染引擎**(浏览器内核)**:浏览器中专门对代码进行解析渲染的部分。浏览器出品的公司不同,内在的渲染引擎也是不同,渲染引擎不同,导致解析相同代码的速度、性能、效果也不同。这就是后面前端要处理一大难题,适配兼容问题。
4.web 标准:让不同浏览器按照相同的标准显示结果,让展示的效果统一。

构成 语言 说明
结构 HTML 页面元素和内容
表现 CSS 网页元素的外观和为止等页面样式(颜色、大小等)
行为 JavaScript 网页模型的定义与页面交互(负责页面的动态效果)

2.基础语法

2.1HTML页面固定结构


<html>
    <head>
        <title>标题title>
    head>
    <body>
        主体内容
    body>
html>

2.2标题标签

<body>
    <h1>1级标题h1>
    <h2>2级标题h2>
    <h3>2级标题h3>
    <h4>2级标题h4>
    <h5>2级标题h5>
    <h6>2级标题h6>
body>

2.3段落标签


<p style="text-indent: 2em;">
        这是一个段落<br>标签
p>

2.4换行标签


<p style="text-indent: 2em;">
        这是一个段落<br/>标签
 p>

2.5水平线标签


<body>
    <h1>这是一个标题标签h1>
    <hr/>
    <h2>2级标题h4>  
body>

2.6文本标签

<body>
    <b style="color: red;">加粗b>
    <i>倾斜i>
    <u>下划线u>
    <s>删除线s>
    <strong>加粗strong>
    <ins>下划线ins>
    <em>倾斜em>
    <del>删除线del>
body>

2.7图片标签


<body>
    <img src="链接地址" alt="">
body>

2.8音频标签


<audio src="./音频名.mp3" controls>audio>

2.9视频标签


<video src="./视频名.mp4" controls autoplay muted>video>

2.10链接标签


<a href="https://www.baidu.com">跳转到百度a>

2.11列表标签


 <body>
 	
    <ul> 
    	
        <li>这是一个无序列表li> 
    ul>
    
	
	<ol>
		
        <li>这是一个有序列表li>
    ol>
	
	
	<dl>
		
        <dt>帮助中心dt>
        
        <dd>账户管理dd>
        <dd>购物指南dd>
        <dd>订单操作dd>
    dl>
body>

2.12表格标签

<body>
  1.普通表单,没有样式
  
  <table> 
  	
    <tr> 
    	
        <td>姓名td><td>学科td><td>成绩td> 
    tr>
    <tr>
        <td>小明td><td>数学td><td>142td>
    tr>
    <tr>
        <td>小风td><td>英语td><td>144td>
    tr>
  table>  

  2.添加样式,表名和表头的表格
  <table border="3" width="200" height="120"> 
  	
  	<caption><b>成绩单b>caption>
    <tr>
        <th>姓名th><th>学科td><th>成绩td>
    tr>
    <tr>
        <td>小明td><td>数学td><td>142td>
    tr>
    <tr>
        <td>小风td><td>英语td><td>144td>
    tr>
  table>  

  3.含有表格结构的标签
  <table border="3" width="200" height="120">
    <caption><b>成绩单b>caption>
    <thead>
      <tr>
        <th>姓名th><th>学科th><th>成绩th>
      tr>
    thead>
    <tbody>
      <tr>
        <td>小明td><td>数学td><td>142td>
      tr>
      <tr>
        <td>小风td><td>英语td><td>144td>
      tr>
    tbody>
    <tfoot>
      <tr>
        <td>姓名集td><td>学科集td>><td>1111td>
      tr>
    tfoot>
  table>  
  4.合并单元格
  <tr>
      <td>耶耶td>
      
      <td rowspan="2">144td>
      <td>数学td>
    tr>
    <tr>
      <td>云云td>td><td>数学td>
    tr>
body>

2.13表单标签

场景:在网页中显示收集用户信息的表单效果,如登录页、注册页
标签名:input,input标签可以通过type属性值的不同,展示不同效果
type属性值:

标签名 type属性值 说明
input text 文本框,用于输入单行文本
input password 密码框,用于输入密码
input radio 单选框,用于多选一
input checkbox 多选框,用于多选多
input file 文件选择,用于多选多
input submit 提交按钮,用于提交
input reset 重置按钮,用于重置
input button 普通按钮,默认无功能,需要配合js添加功能
DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>表单标签title> 
head>
<body>


<p>
   <input type="text" placeholder="请输入姓名"> 
p>

<p>
  性别:<input type="radio" name="gender"><input type="radio" name="gender" checked>p>

<p>
    文件选择:<input type="file" multiple>
p>

<p>	
   <button type="submit">提交按钮button>
p>

<select>
	<option>小明option>
	<option selected>小白option>
select>

<br/><br/>
<textarea rows="10" cols="30">
我是一个文本框。
textarea>

<p>
	<label><input type="radio" name="gender">label>
p>
body>
html>

2.14语义标签

<body>
	
    <div>这是一个div标签div>
    <div>这是第二个div标签div>
    <span>这是一个span标签span>
    <span>这是第二个span标签span>

	
	<header>网页头部header>
    <nav>网页导航nav>
    <footer>网页底部footer>
    <aside>网页侧边栏aside>
    <section>网页区块section>
    <article>网页文章article>

	
	<header>网页  头部header>
body>

注:以上是HTML主要使用部分,还有些细碎衍生部分这里不多做说明。可以从这里去学习HTML相关知识:点这里

你可能感兴趣的:(前端基础集合,前端,java,html)