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>
相关推荐
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue