这是我参与【第五届青训营】笔记创作活动的第一天
前端技术栈: HTML 页面内容、结构 css 样式 javascript 行为
通过网络协议与服务器交流,构成前端技术栈
功能、美观、无障碍、安全、性能、兼容,用户体验 开发环境:编辑器+浏览器
HTML:HyperText Markup Language
!doctype html 表示html文件的类型,浏览器用相应的渲染模式
html /html 文档的根标签
head /head 页面原数据,不需要呈现给用户
body /body 呈现给用户的内容
标签和属性推荐小写,空标签不闭合,属性值要有双引号,有的可以没有属性值
标题
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
h1~h6字体依次变小
段落
<body>
<p>这是一个p标签</p>
</body>
列表 有序列表
<body>
<ol>
<li> </li>
</ol>
</body>
无序列表
<body>
<ul>
<li></li>
</ul>
</body>
定义列表
<dl>
<dt>描述列表的标题:</dt>
<dd>具体内容1</dd>
<dd>2</dd>
</dl>
链接
<body>
<a href="http://www.baidu.com" title="点击进入百度">click here!</a>
</body>
target属性:代表打开网页的方式
可选值:"_self"(默认值)
“_blank”(在新窗口打开链接)
图片
<body>
<img src="图片地址" alt="图像不可见时显示的文本" title="提示文本">
<!--提示文本提供在图像可见时对图像的描述(鼠标滑过时显示的文本)-->
</body>
音频
<body>
<audio src="音频地址" controls ></audio>
</body>
视频
<body>
<video src="视频地址" controls ></video>
</body>
controls 显示时间条之类
<body>
<input type="text" placeholder="请输入用户名">
<input type="range" >
<input type="number" min="1" max="10">
<input type="data">
<textarea>文本框内容</textarea>
</body>
placeholder属性:提示用户输入框需要输入框的内容
textarea标签是成对出现的。
cols :多行输入域的列数。
rows :多行输入域的行数。
在textarea标签之间可以输入默认值。
选择 都呈现出来
<p>
<label>
<input type="checkbox"/> 1
</label>
<label>
<input type="checkbox"/> 2
</label>
</p>
选项较多时
<p>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</p>
输入时有提示
<p>
<input list="countries"/>
<datalist>
<option> 1 </option>
<option> 2 </option>
</datalist>
</p>
blockquote 快捷引用 cite属性 表明引用用处 cite 短引用,引用书名或前面提到的内容 q 短引用,引用内容 code /code 代码,长短都可 pre 在code外,多行代码 strong 强调 紧急的意思 em 语气强调
<p>
<header>头部标签</header>
<footer>底部标签</footer>
<section>定义区段</section>
<aside>侧边栏</aside>
<span>设置单独样式</span>
<div>容器</div>
<hr>水平分割线
<br/>转行
 空格
</p>
做到语义化,传达内容而不是样式 需认真了解标签的含义及用法,在合适的地方用适当的标签来描述内容,注意所面向的群体。 HTML标签还有很多,需要慢慢了解