zoukankan      html  css  js  c++  java
  • 前端基础-HTML

    引自狂神说Java:https://space.bilibili.com/95256449/video

    1. 初始HTML

    超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

    2. 网页基本信息

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
     
    <h1>我的第一个标题</h1>
     
    <p>我的第一个段落。</p>
     
    </body>
    </html>
    <!--注释内容
    <!DOCTYPE html>声明为 HTML5 文档
    <html>元素是 HTML 页面的根元素
    <head>元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为utf-8。
    <title>元素描述了文档的标题
    <body> 元素包含了可见的页面内容
    <h1>元素定义一个大标题
    <p>元素定义一个段落
    -->
    

    3. 网页基本标签和属性

    标题标签:h1-h6
    段落标签:<p></p>
    换行标签:<br>
    水平线标签:<hr/>
    字体样式标签:<strong></strong>、<em></em>、<u></u>
    注释和特殊符号:&nbsp;&copy;&gt;&lt;&ge;&le;
    
    属性 描述
    class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)
    id 定义元素的唯一id
    style 规定元素的行内样式(inline style)
    title 描述了元素的额外信息 (作为工具条使用)

    4. 图像标签

    <img src="图片的相对路径" alt="图片没有正常显示时显示此处文字" width="304" height="228">
    

    5. 超链接标签

    <a href="url" target="目标窗口位置"></a>
    <a href="url" target="_blank"></a>
    常用有文本超链接和图片超链接、锚链接(定义name)、功能链接、邮件链接、QQ链接
    <!--QQ推广-->
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1723265689&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1723265689:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
    

    6. 块元素和行元素

    块元素:无论内容多少,该元素独占一行。

    p、h1-h6

    行内元素:内容撑开宽度,左右都是行元素的可以排在一行

    a、strong、em

    7. 列表标签

    <!--有序列表-->
    <ol>
        <li>Java</li>
        <li>Python</li>
    </ol>
    <!--无序列表-->
    <ul>
        <li>Java</li>
        <li>Python</li>
    </ul>
    <!--自定义列表-->
    <dl>
        <dt></dt>
        
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>Linux</dd>
    </dl>
    

    8. 表格标签

    表格结构语义标签:
    1.<table>:表格根元素。
    2.<thead>:表格头。
    3.<tbody>:表格体。
    4.<tfoot>:表格尾,一般可忽略该结构。
    5.<tr>:表格行。
    
    表格内容标签:
        1.<th>:表头单元格。
        2.<td>:表体单元格。
    跨列:colspan
    跨行:rowspan
    单元格内边距:cellpadding
    单元格外边距:cellspacing
    col 和 colgroup 用于便捷定义表格指定列的样式。
    

    9. 媒体元素

    1. video
    2. audio
    <video width="320" height="240" controls autoplay>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    </video>
    
    

    10. 页面结构分析

    元素名 描述
    header 头部区域的内容
    footer 底部区域的内容
    section 页面中的一块独立区域
    article 独立的文章内容
    aside 相关内容或应用(侧边栏)
    nav 导航类辅助内容

    11. iframe内联框架

    <!--frameborder="0"移除边框-->
    <iframe src="demo_iframe.htm" name="hello-iframe" width="200" height="200" frameborder="0"></iframe>
    
    

    12. 表单

    表单是一个包含表单元素的区域。

    表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)、按钮、文件域、文本域、搜索框、滑块、简单验证等等。

    属性 说明
    type 指定元素的类型:text、password、checkbox、radio、submit、reset、file、hidden、image、button、email、url、number,默认为text。
    name 默认内容
    value 元素的初始值,type为radio时必须指定一个值
    size 指定表单元素的初始宽度。当type为text或password时,表单元素的大小用字符为单位;当type为其他类型时,宽度用像素为单位。
    maxlength 当type为text或password时,输入的最大字符数
    checked 当type为radio或checkbox时,按钮是否被选中
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>表单</title>
    	</head>
    	<body>
    		<form action="#" method="post">
    
    			<!-- 文本 -->
    			<p>名字:<input type="text" name="username" placeholder="请输入用户名" required=""></p>
    			<p>密码:<input type="password" name="password"></p>
    
    
    			<!-- 单选框 -->
    			<p>单选框:
    				<input type="radio" value="boy" name="sex" checked>男
    				<input type="radio" value="girl" name="sex">女
    			</p>
    			<!-- 复选框 -->
    			<p>爱好:
    				<input type="checkbox" value="sleep" name="hobby" checked>睡觉
    				<input type="checkbox" value="code" name="hobby">敲代码
    				<input type="checkbox" value="chat" name="hobby">聊天
    				<input type="checkbox" value="game" name="hobby">游戏
    			</p>
    
    			<!-- 按钮 -->
    			<p>按钮:
    				<input type="button" name="btn1" value="点击变长">
    				<input type="image" src="./static/images/bg.jpg">
    			</p>
    
    			<!-- 下拉框 -->
    			<p>
    				<select name="省份" id="">
    					<option value="beijin">北京</option>
    					<option value="hubei" selected>湖北</option>
    					<option value="sichuan">四川</option>
    				</select>
    			</p>
    			
    			<!-- 文本域 -->
    			<p>反馈:
    				<textarea name="textarea" cols="50" rows="10">
    					文本内容
    				</textarea>
    			</p>
    			
    			<!-- 文件域 -->
    			<p>
    				<input type="file" name="files">
    				<input type="button" value="上传" name="upload">
    			</p>
    			
    			<!-- 邮件验证 -->
    			<p>邮箱:
    				<input type="email" name="email">
    			</p>
    			<!-- url验证 -->
    			<p>URL:
    				<input type="url" name="url">
    			</p>
    			<!-- 数字验证 -->
    			<p>Number:
    				<input type="number" max="100" min="0" step="1">
    			</p>
    			<!-- 滑块 -->
    			<p>音量:
    				<input type="range" name="voice" id="" value="" min="0" max="100" step="2" />
    			</p>
    			<!-- 搜索框 -->
    			<p>搜索框:
    				<input type="search" name="search">
    			</p>
    			
    			<!-- 增强鼠标可用性 -->
    			<p>
    				<label for="mark">你点我试试</label>
    				<input type="text" id="mark">
    			</p>
    			
    			<p>
    				<input type="submit" value="提交">
    				<input type="reset" value="清空表单">
    			</p>
    		</form>
    	</body>
    </html>
    

    13. 表单的常用属性和验证

    常用属性

    • 隐藏域 hidden
    • 只读 readonly
    • 禁用 disabled

    简单验证

    • placeholder 提示信息
    • required 非空判断
    • pattern 正则表达式判断
  • 相关阅读:
    《C# to IL》第一章 IL入门
    multiple users to one ec2 instance setup
    Route53 health check与 Cloudwatch alarm 没法绑定
    rsync aws ec2 pem
    通过jvm 查看死锁
    wait, notify 使用清晰讲解
    for aws associate exam
    docker 容器不能联网
    本地运行aws lambda credential 配置 (missing credential config error)
    Cannot connect to the Docker daemon. Is 'docker daemon' running on this host?
  • 原文地址:https://www.cnblogs.com/smalldong/p/14466517.html
Copyright © 2011-2022 走看看