HTML.

HTML:超文本标记语言(Hyper Text Markup Language)

超文本:不同于普通文本,可以定义图片,音频,视频等内容

标记语言:由标签构成的语言

  1. HTML标签都是预定义好的
  2. HTML代码直接在浏览器中运行,HTML标签由浏览器解析

HTML特点:

  1. 标签不分大小写
  2. 属性值可以用单引号或双引号
  3. 语法结构松散
html 复制代码
<html>
	<head>
		<title>Hello,HTML</title>
	</head>
	<body>
		<h1>你是笨蛋吗?</h1>
		<img src="明日香.jpg"></img>
	</body>
</html>

css引入

引入方式

1.行内样式

局部样式

<h1 style="color: blueviolet;">特朗普称如果自己无法当选,美国将发生"屠杀",拜登竞选团队谴责</h1>

2.内嵌样式

全局样式

可以写在任意位置,一般写在head

<style>

h1{

color:red;

}

</style>

3.外联样式

引用css文件,实现css复用

<link rel="stylesheet" href="news.css">

全局样式
html 复制代码
     <style>
        h1{
            color:#4d4f53;
        }
        /* css选择器 设置样式*/
        /* 元素选择器 */
        span{
            color:black;
        }
        /* id选择器 */
        #time{
            color: #888888;
            font-size: 13px; /* 字体大小 */
        }
        /* 类选择器 */
        .cls{
            color: #000;
        }
        /* 优先级 id选择器>类选择器>元素选择器 */
    </style> 

超链接

<a href="https://www.bilibili.com/" target="_self">超链接</a>

href 超链接hypertext reference 指定url

target 指定打开位置 self 当前页面打开

盒子模型

html所有的元素都可以看作一个盒子 div和span为html的布局标签,无语义

html 复制代码
<div style="width: 65%;margin: 0 17.5% 0 17.5%;">
</div>

表单标签

html 复制代码
<!--    form 
        action 表单提交的url  不指定时默认为当前页面
        method 表单提交方式,
                默认为    get:在url后拼接表单数据,有长度限制  
                post:在消息体中传递-->
    <form action="" method="post">
        <p>简历</p>
        <hr>
        个人基本信息
        <hr>
        <p>个人姓名:<input type="text" name="name" placeholder="请填写真实姓名"></p>
        <!--radio单选,同一组,name相同,一般用label包裹。-->
        <p>性别:<Label><input type="radio" name="sex" value="1">男</Label>
                 <label><input type="radio" name="sex" value="2">女</label></p>
        <p>手机号:<input type="number" name="phone"></p>
        <hr>
        奖励情况
        <hr>
        <p>参加项目或竞赛情况:<textarea name="condition" cols="30" rows="10"></textarea></p>
        <hr>
        专业技能
        <hr>
        <p>技能名称:<input type="text" name="skill"></p>
        <p>掌握程度:<Label><input type="radio" name="level" value="1">优</Label>
                    <label><input type="radio" name="level" value="2">良</label>
                    <label><input type="radio" name="level" value="3">差</label></p>
        <hr>
        自我评价:<textarea name="selfEvaluation" cols="30" rows="10"></textarea
        <hr>
        <input type="hidden" name="hid" value="0">
        <input type="submit" value="注册">
        <input type="reset" value="重置">  
    </form>
相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试